@jbrowse/plugin-dotplot-view 2.15.0 → 2.15.2

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

@@ -28,7 +28,7 @@ const material_1 = require("@mui/material");
 const ui_1 = require("@jbrowse/core/ui");
 const mobx_react_1 = require("mobx-react");
 const util_1 = require("./util");
-function getAdapter({ radioOption, assembly1, assembly2, fileLocation, bed1Location, bed2Location, }) {
+function getAdapter({ radioOption, assembly1, assembly2, fileLocation, indexFileLocation, bed1Location, bed2Location, }) {
     if (radioOption === '.paf') {
         return {
             type: 'PAFAdapter',
@@ -79,14 +79,23 @@ function getAdapter({ radioOption, assembly1, assembly2, fileLocation, bed1Locat
             assemblyNames: [assembly1, assembly2],
         };
     }
+    else if (radioOption === '.pif.gz') {
+        return {
+            type: 'PairwiseIndexedPAFAdapter',
+            pifGzLocation: fileLocation,
+            index: { location: indexFileLocation },
+            assemblyNames: [assembly1, assembly2],
+        };
+    }
     else {
         throw new Error(`Unknown to detect type ${radioOption} from filename (select radio button to clarify)`);
     }
 }
-const OpenTrack = (0, mobx_react_1.observer)(({ assembly1, assembly2, setSessionTrackData, }) => {
+const ImportCustomTrack = (0, mobx_react_1.observer)(function ({ assembly1, assembly2, setSessionTrackData, }) {
     const [bed2Location, setBed2Location] = (0, react_1.useState)();
     const [bed1Location, setBed1Location] = (0, react_1.useState)();
     const [fileLocation, setFileLocation] = (0, react_1.useState)();
+    const [indexFileLocation, setIndexFileLocation] = (0, react_1.useState)();
     const [value, setValue] = (0, react_1.useState)('');
     const [error, setError] = (0, react_1.useState)();
     const fileName = (0, util_1.getName)(fileLocation);
@@ -107,6 +116,7 @@ const OpenTrack = (0, mobx_react_1.observer)(({ assembly1, assembly2, setSession
                         assembly1,
                         assembly2,
                         fileLocation,
+                        indexFileLocation,
                         bed1Location,
                         bed2Location,
                     }),
@@ -124,12 +134,13 @@ const OpenTrack = (0, mobx_react_1.observer)(({ assembly1, assembly2, setSession
         bed1Location,
         bed2Location,
         fileLocation,
+        indexFileLocation,
         radioOption,
         setSessionTrackData,
     ]);
     return (react_1.default.createElement(material_1.Paper, { style: { padding: 12 } },
         error ? react_1.default.createElement(ui_1.ErrorMessage, { error: error }) : null,
-        react_1.default.createElement(material_1.Typography, { style: { textAlign: 'center' } }, "Add a .paf, .out (MashMap), .delta (Mummer), .chain, .anchors or .anchors.simple (MCScan) file to view in the dotplot. These file types can also be gzipped. The first assembly should be the query sequence (e.g. left column of the PAF) and the second assembly should be the target sequence (e.g. right column of the PAF)"),
+        react_1.default.createElement(material_1.Typography, { style: { textAlign: 'center' } }, "Add a .paf, .out (MashMap), .delta (Mummer), .chain, .anchors or .anchors.simple (MCScan) file to view. These file types can also be gzipped. The first assembly should be the query sequence (e.g. left column of the PAF) and the second assembly should be the target sequence (e.g. right column of the PAF)"),
         react_1.default.createElement(material_1.RadioGroup, { value: radioOption, onChange: event => {
                 setValue(event.target.value);
             } },
@@ -145,7 +156,9 @@ const OpenTrack = (0, mobx_react_1.observer)(({ assembly1, assembly2, setSession
                 react_1.default.createElement(material_1.Grid, { item: true },
                     react_1.default.createElement(material_1.FormControlLabel, { value: ".anchors", control: react_1.default.createElement(material_1.Radio, null), label: ".anchors" })),
                 react_1.default.createElement(material_1.Grid, { item: true },
-                    react_1.default.createElement(material_1.FormControlLabel, { value: ".anchors.simple", control: react_1.default.createElement(material_1.Radio, null), label: ".anchors.simple" })))),
+                    react_1.default.createElement(material_1.FormControlLabel, { value: ".anchors.simple", control: react_1.default.createElement(material_1.Radio, null), label: ".anchors.simple" })),
+                react_1.default.createElement(material_1.Grid, { item: true },
+                    react_1.default.createElement(material_1.FormControlLabel, { value: ".pif.gz", control: react_1.default.createElement(material_1.Radio, null), label: ".pif.gz" })))),
         react_1.default.createElement(material_1.Grid, { container: true, justifyContent: "center" },
             react_1.default.createElement(material_1.Grid, { item: true }, value === '.anchors' || value === '.anchors.simple' ? (react_1.default.createElement("div", null,
                 react_1.default.createElement("div", { style: { margin: 20 } },
@@ -166,8 +179,16 @@ const OpenTrack = (0, mobx_react_1.observer)(({ assembly1, assembly2, setSession
                     react_1.default.createElement("div", null,
                         react_1.default.createElement(ui_1.FileSelector, { name: "genome 2 .bed (right column of anchors file)", description: "", location: bed2Location, setLocation: loc => {
                                 setBed2Location(loc);
-                            } }))))) : (react_1.default.createElement(ui_1.FileSelector, { name: value ? `${value} location` : '', description: "", location: fileLocation, setLocation: loc => {
+                            } }))))) : value === '.pif.gz' ? (react_1.default.createElement("div", { style: { display: 'flex' } },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(ui_1.FileSelector, { name: `${value} location`, description: "", location: fileLocation, setLocation: loc => {
+                            setFileLocation(loc);
+                        } })),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(ui_1.FileSelector, { name: `${value} index location`, description: "", location: indexFileLocation, setLocation: loc => {
+                            setIndexFileLocation(loc);
+                        } })))) : (react_1.default.createElement(ui_1.FileSelector, { name: value ? `${value} location` : '', description: "", location: fileLocation, setLocation: loc => {
                     setFileLocation(loc);
                 } }))))));
 });
-exports.default = OpenTrack;
+exports.default = ImportCustomTrack;

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;

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;