@jbrowse/plugin-dotplot-view 3.6.4 → 3.7.0

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMouseMoveHandler = useMouseMoveHandler;
+const react_1 = require("react");
+function useMouseMoveHandler(mousecurrClient, mousedownClient, mouseupClient, validPan, hview, vview, setMouseCurrClient) {
+    (0, react_1.useEffect)(() => {
+        function globalMouseMove(event) {
+            setMouseCurrClient([event.clientX, event.clientY]);
+            if (mousecurrClient && mousedownClient && validPan && !mouseupClient) {
+                hview.scroll(-event.clientX + mousecurrClient[0]);
+                vview.scroll(event.clientY - mousecurrClient[1]);
+            }
+        }
+        window.addEventListener('mousemove', globalMouseMove);
+        return () => {
+            window.removeEventListener('mousemove', globalMouseMove);
+        };
+    }, [
+        validPan,
+        mousecurrClient,
+        mousedownClient,
+        mouseupClient,
+        hview,
+        vview,
+        setMouseCurrClient,
+    ]);
+}

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

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

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMouseUpHandler = useMouseUpHandler;
+const react_1 = require("react");
+function useMouseUpHandler(mousedown, mouseup, xdistance, ydistance, validSelect, setMouseUpClient, setMouseDownClient) {
+    (0, react_1.useEffect)(() => {
+        function globalMouseUp(event) {
+            if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
+                setMouseUpClient([event.clientX, event.clientY]);
+            }
+            else {
+                setMouseDownClient(undefined);
+            }
+        }
+        if (mousedown && !mouseup) {
+            window.addEventListener('mouseup', globalMouseUp, true);
+            return () => {
+                window.removeEventListener('mouseup', globalMouseUp, true);
+            };
+        }
+        return () => { };
+    }, [
+        validSelect,
+        mousedown,
+        mouseup,
+        xdistance,
+        ydistance,
+        setMouseUpClient,
+        setMouseDownClient,
+    ]);
+}

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

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

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWheelHandler = useWheelHandler;
+const react_1 = require("react");
+const mobx_1 = require("mobx");
+function useWheelHandler(ref, wheelMode, hview, vview, mousecurr, rootRectHeight) {
+    const distanceX = (0, react_1.useRef)(0);
+    const distanceY = (0, react_1.useRef)(0);
+    const scheduled = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        function onWheel(event) {
+            event.preventDefault();
+            distanceX.current += event.deltaX;
+            distanceY.current -= event.deltaY;
+            if (!scheduled.current) {
+                scheduled.current = true;
+                window.requestAnimationFrame(() => {
+                    (0, mobx_1.transaction)(() => {
+                        if (wheelMode === 'pan') {
+                            hview.scroll(distanceX.current / 3);
+                            vview.scroll(distanceY.current / 10);
+                        }
+                        else if (wheelMode === 'zoom') {
+                            if (Math.abs(distanceY.current) > Math.abs(distanceX.current) * 2 &&
+                                mousecurr) {
+                                const val = distanceY.current < 0 ? 1.1 : 0.9;
+                                hview.zoomTo(hview.bpPerPx * val, mousecurr[0]);
+                                vview.zoomTo(vview.bpPerPx * val, rootRectHeight - mousecurr[1]);
+                            }
+                        }
+                    });
+                    scheduled.current = false;
+                    distanceX.current = 0;
+                    distanceY.current = 0;
+                });
+            }
+        }
+        if (ref.current) {
+            const curr = ref.current;
+            curr.addEventListener('wheel', onWheel);
+            return () => {
+                curr.removeEventListener('wheel', onWheel);
+            };
+        }
+        return () => { };
+    }, [hview, vview, wheelMode, mousecurr, rootRectHeight, ref]);
+}

package/dist/DotplotView/components/util.js

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

package/dist/DotplotView/model.d.ts

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

package/dist/DotplotView/model.js

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

package/dist/ServerSideRenderedBlockContent.js

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const ui_1 = require("@jbrowse/core/ui");
-const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
 const useStyles = (0, mui_1.makeStyles)()(theme => {
@@ -19,33 +17,18 @@ const useStyles = (0, mui_1.makeStyles)()(theme => {
             backgroundColor: bg,
             padding: '10px',
         },
-        blockError: {
-            backgroundColor: bg,
-            padding: '10px',
-            color: 'red',
-        },
     };
 });
 function LoadingMessage() {
-    const [shown, setShown] = (0, react_1.useState)(false);
     const { classes } = useStyles();
-    (0, react_1.useEffect)(() => {
-        const timeout = setTimeout(() => {
-            setShown(true);
-        }, 300);
-        return () => {
-            clearTimeout(timeout);
-        };
-    }, []);
-    return shown ? ((0, jsx_runtime_1.jsx)("div", { className: classes.loading, children: (0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, {}) })) : null;
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes.loading, children: (0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, {}) }));
 }
 function BlockMessage({ messageText }) {
     const { classes } = useStyles();
-    return ((0, jsx_runtime_1.jsx)("div", { className: classes.blockMessage, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: messageText }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes.loading, children: (0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, { message: messageText }) }));
 }
 function BlockError({ error }) {
-    const { classes } = useStyles();
-    return ((0, jsx_runtime_1.jsx)("div", { className: classes.blockError, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: `${error}` }) }));
+    return (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error });
 }
 const ServerSideRenderedDotplotContent = (0, mobx_react_1.observer)(function ({ model, style, }) {
     if (model.error) {

package/dist/index.js

@@ -7,6 +7,7 @@ const Plugin_1 = __importDefault(require("@jbrowse/core/Plugin"));
 const util_1 = require("@jbrowse/core/util");
 const Timeline_1 = __importDefault(require("@mui/icons-material/Timeline"));
 const ComparativeRenderer_1 = __importDefault(require("./ComparativeRenderer"));
+const DiagonalizeDotplotRpc_1 = __importDefault(require("./DiagonalizeDotplotRpc"));
 const DotplotDisplay_1 = __importDefault(require("./DotplotDisplay"));
 const DotplotReadVsRef_1 = __importDefault(require("./DotplotReadVsRef"));
 const DotplotRenderer_1 = __importDefault(require("./DotplotRenderer"));
@@ -24,6 +25,7 @@ class DotplotPlugin extends Plugin_1.default {
         (0, LaunchDotplotView_1.default)(pluginManager);
         (0, DotplotReadVsRef_1.default)(pluginManager);
         pluginManager.addRpcMethod(() => new ComparativeRenderer_1.default(pluginManager));
+        pluginManager.addRpcMethod(() => new DiagonalizeDotplotRpc_1.default(pluginManager));
     }
     configure(pluginManager) {
         if ((0, util_1.isAbstractMenuManager)(pluginManager.rootModel)) {

package/esm/DiagonalizeDotplotRpc.d.ts

@@ -0,0 +1,30 @@
+import RpcMethodTypeWithFiltersAndRenameRegions from '@jbrowse/core/pluggableElementTypes/RpcMethodTypeWithFiltersAndRenameRegions';
+import type { Region } from '@jbrowse/core/util';
+interface DiagonalizationResult {
+    newRegions: Region[];
+    stats: {
+        totalAlignments: number;
+        regionsProcessed: number;
+        regionsReordered: number;
+        regionsReversed: number;
+    };
+}
+interface DiagonalizeDotplotArgs {
+    sessionId: string;
+    view: {
+        hview: {
+            displayedRegions: Region[];
+        };
+        vview: {
+            displayedRegions: Region[];
+        };
+    };
+    adapterConfig: Record<string, unknown>;
+    stopToken?: string;
+    statusCallback?: (message: string) => void;
+}
+export default class DiagonalizeDotplotRpc extends RpcMethodTypeWithFiltersAndRenameRegions {
+    name: string;
+    execute(args: DiagonalizeDotplotArgs, rpcDriverClassName: string): Promise<DiagonalizationResult>;
+}
+export {};

package/esm/DiagonalizeDotplotRpc.js

@@ -0,0 +1,150 @@
+import RpcMethodTypeWithFiltersAndRenameRegions from '@jbrowse/core/pluggableElementTypes/RpcMethodTypeWithFiltersAndRenameRegions';
+import { checkStopToken } from '@jbrowse/core/util/stopToken';
+import { Dotplot1DView } from './DotplotView/model';
+async function diagonalizeRegions(alignments, currentRegions, progressCallback) {
+    const updateProgress = (progress, message) => {
+        if (progressCallback) {
+            progressCallback(progress, message);
+        }
+    };
+    updateProgress(20, `Grouping ${alignments.length} alignments...`);
+    const queryGroups = new Map();
+    for (const aln of alignments) {
+        const targetRefName = aln.refRefName;
+        if (!queryGroups.has(targetRefName)) {
+            queryGroups.set(targetRefName, {
+                refAlignments: new Map(),
+                strandWeightedSum: 0,
+            });
+        }
+        const group = queryGroups.get(targetRefName);
+        const alnLength = Math.abs(aln.queryEnd - aln.queryStart);
+        if (!group.refAlignments.has(aln.queryRefName)) {
+            group.refAlignments.set(aln.queryRefName, {
+                bases: 0,
+                positions: [],
+            });
+        }
+        const refData = group.refAlignments.get(aln.queryRefName);
+        refData.bases += alnLength;
+        refData.positions.push((aln.queryStart + aln.queryEnd) / 2);
+        const direction = aln.strand >= 0 ? 1 : -1;
+        group.strandWeightedSum += direction * alnLength;
+    }
+    updateProgress(50, 'Determining optimal ordering and orientation...');
+    const queryOrdering = [];
+    for (const [targetRefName, group] of queryGroups) {
+        let bestRefName = '';
+        let maxBases = 0;
+        let bestPositions = [];
+        for (const [firstViewRefName, data] of group.refAlignments) {
+            if (data.bases > maxBases) {
+                maxBases = data.bases;
+                bestRefName = firstViewRefName;
+                bestPositions = data.positions;
+            }
+        }
+        const bestRefPos = bestPositions.reduce((a, b) => a + b, 0) / bestPositions.length;
+        const shouldReverse = group.strandWeightedSum < 0;
+        queryOrdering.push({
+            refName: targetRefName,
+            bestRefName,
+            bestRefPos,
+            shouldReverse,
+        });
+    }
+    updateProgress(70, `Sorting ${queryOrdering.length} query regions...`);
+    queryOrdering.sort((a, b) => {
+        if (a.bestRefName !== b.bestRefName) {
+            return a.bestRefName.localeCompare(b.bestRefName);
+        }
+        return a.bestRefPos - b.bestRefPos;
+    });
+    updateProgress(85, 'Building new region layout...');
+    const newQueryRegions = [];
+    let regionsReversed = 0;
+    for (const { refName, shouldReverse } of queryOrdering) {
+        const region = currentRegions.find(r => r.refName === refName);
+        if (region) {
+            newQueryRegions.push({
+                ...region,
+                reversed: shouldReverse,
+            });
+            if (shouldReverse !== region.reversed) {
+                regionsReversed++;
+            }
+        }
+    }
+    const regionsWithoutAlignments = currentRegions.filter(r => !newQueryRegions.some(nr => nr.refName === r.refName));
+    updateProgress(100, 'Diagonalization complete!');
+    return {
+        newRegions: [...newQueryRegions, ...regionsWithoutAlignments],
+        stats: {
+            totalAlignments: alignments.length,
+            regionsProcessed: queryOrdering.length,
+            regionsReordered: newQueryRegions.length,
+            regionsReversed,
+        },
+    };
+}
+export default class DiagonalizeDotplotRpc extends RpcMethodTypeWithFiltersAndRenameRegions {
+    constructor() {
+        super(...arguments);
+        this.name = 'DiagonalizeDotplot';
+    }
+    async execute(args, rpcDriverClassName) {
+        const deserializedArgs = await this.deserializeArguments(args, rpcDriverClassName);
+        const { view, sessionId, adapterConfig, stopToken, statusCallback } = deserializedArgs;
+        if (!sessionId) {
+            throw new Error('must pass a unique session id');
+        }
+        statusCallback === null || statusCallback === void 0 ? void 0 : statusCallback('Initializing diagonalization...');
+        const dimensions = [800, 800];
+        const views = [view.hview, view.vview].map((snap, idx) => {
+            const v = Dotplot1DView.create(snap);
+            v.setVolatileWidth(dimensions[idx]);
+            return v;
+        });
+        const targetView = views[0];
+        checkStopToken(stopToken);
+        statusCallback === null || statusCallback === void 0 ? void 0 : statusCallback('Getting renderer...');
+        const rendererType = this.pluginManager.getRendererType('DotplotRenderer');
+        if (!rendererType) {
+            throw new Error('DotplotRenderer not found');
+        }
+        checkStopToken(stopToken);
+        statusCallback === null || statusCallback === void 0 ? void 0 : statusCallback('Fetching features...');
+        const feats = await rendererType.getFeatures({
+            regions: targetView.dynamicBlocks.contentBlocks,
+            adapterConfig,
+            sessionId,
+        });
+        checkStopToken(stopToken);
+        statusCallback === null || statusCallback === void 0 ? void 0 : statusCallback('Extracting alignment data...');
+        const alignments = [];
+        for (const feat of feats.values()) {
+            const mate = feat.get('mate');
+            if (mate) {
+                alignments.push({
+                    queryRefName: feat.get('refName'),
+                    refRefName: mate.refName,
+                    queryStart: feat.get('start'),
+                    queryEnd: feat.get('end'),
+                    refStart: mate.start,
+                    refEnd: mate.end,
+                    strand: feat.get('strand') || 1,
+                });
+            }
+        }
+        if (alignments.length === 0) {
+            throw new Error('No alignments found to diagonalize');
+        }
+        statusCallback === null || statusCallback === void 0 ? void 0 : statusCallback(`Running diagonalization on ${alignments.length} alignments...`);
+        const result = await diagonalizeRegions(alignments, view.vview.displayedRegions, (progress, message) => {
+            checkStopToken(stopToken);
+            statusCallback === null || statusCallback === void 0 ? void 0 : statusCallback(message);
+        });
+        statusCallback === null || statusCallback === void 0 ? void 0 : statusCallback('Diagonalization complete!');
+        return result;
+    }
+}

package/esm/DotplotDisplay/renderDotplotBlock.js

@@ -26,6 +26,9 @@ export function renderBlockData(self) {
                 rendererType: rendererType.name,
                 sessionId: getRpcSessionId(self),
                 timeout: 1000000,
+                alpha: self.alpha,
+                minAlignmentLength: self.minAlignmentLength,
+                colorBy: self.colorBy,
             },
         };
     }

package/esm/DotplotDisplay/stateModelFactory.d.ts

@@ -9,6 +9,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 } & {
     type: import("mobx-state-tree").ISimpleType<"DotplotDisplay">;
     configuration: AnyConfigurationSchemaType;
+    colorBy: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
 }, {
     rendererTypeName: string;
     error: unknown;
@@ -79,6 +80,8 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     message: string | undefined;
     renderingComponent: any;
     ReactComponent2: React.FC<any>;
+    alpha: number;
+    minAlignmentLength: number;
 } & {
     readonly shouldDisplay: boolean;
     readonly rendererTypeName: any;
@@ -97,6 +100,9 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
         renderingComponent: React.Component;
     }): void;
     setError(error: unknown): void;
+    setAlpha(value: number): void;
+    setMinAlignmentLength(value: number): void;
+    setColorBy(value: string): void;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type DotplotDisplayStateModel = ReturnType<typeof stateModelFactory>;
 export type DotplotDisplayModel = Instance<DotplotDisplayStateModel>;

package/esm/DotplotDisplay/stateModelFactory.js

@@ -12,6 +12,7 @@ export function stateModelFactory(configSchema) {
         .model({
         type: types.literal('DotplotDisplay'),
         configuration: ConfigurationReference(configSchema),
+        colorBy: types.optional(types.string, 'default'),
     })
         .volatile(() => ({
         stopToken: undefined,
@@ -22,6 +23,8 @@ export function stateModelFactory(configSchema) {
         message: undefined,
         renderingComponent: undefined,
         ReactComponent2: ServerSideRenderedBlockContent,
+        alpha: 1,
+        minAlignmentLength: 0,
     })))
         .views(self => ({
         get shouldDisplay() {
@@ -38,6 +41,9 @@ export function stateModelFactory(configSchema) {
                 rpcDriverName: self.rpcDriverName,
                 displayModel: self,
                 config: self.configuration.renderer,
+                statusCallback: (message) => {
+                    self.setMessage(message);
+                },
             };
         },
     }))
@@ -109,5 +115,14 @@ export function stateModelFactory(configSchema) {
             self.renderingComponent = undefined;
             self.stopToken = undefined;
         },
+        setAlpha(value) {
+            self.alpha = value;
+        },
+        setMinAlignmentLength(value) {
+            self.minAlignmentLength = value;
+        },
+        setColorBy(value) {
+            self.colorBy = value;
+        },
     }));
 }

package/esm/DotplotRenderer/DotplotRenderer.d.ts

@@ -35,10 +35,7 @@ export default class DotplotRenderer extends ComparativeRenderer {
         offsetY: number;
         bpPerPxX: number;
         bpPerPxY: number;
-        warnings: {
-            message: string;
-            effect: string;
-        }[];
+        warnings: import("./clamp").Warning[];
         canvasRecordedData: Record<string, unknown>;
         reactElement?: React.ReactElement;
         html?: string;
@@ -49,10 +46,7 @@ export default class DotplotRenderer extends ComparativeRenderer {
         offsetY: number;
         bpPerPxX: number;
         bpPerPxY: number;
-        warnings: {
-            message: string;
-            effect: string;
-        }[];
+        warnings: import("./clamp").Warning[];
         imageData: any;
         reactElement?: React.ReactElement;
         html?: string;
@@ -63,10 +57,7 @@ export default class DotplotRenderer extends ComparativeRenderer {
         offsetY: number;
         bpPerPxX: number;
         bpPerPxY: number;
-        warnings: {
-            message: string;
-            effect: string;
-        }[];
+        warnings: import("./clamp").Warning[];
         reactElement: React.ReactElement;
         html?: string;
     }>;

package/esm/DotplotRenderer/clamp.d.ts

@@ -0,0 +1,7 @@
+import type { Feature } from '@jbrowse/core/util';
+export declare function clampWithWarnX(num: number, min: number, max: number, feature: Feature, warnings: Warning[]): number;
+export declare function clampWithWarnY(num: number, min: number, max: number, feature: Feature, warnings: Warning[]): number;
+export interface Warning {
+    message: string;
+    effect: string;
+}

package/esm/DotplotRenderer/clamp.js

@@ -0,0 +1,58 @@
+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;
+export function clampWithWarnX(num, min, max, feature, warnings) {
+    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;
+}
+export function clampWithWarnY(num, min, max, feature, warnings) {
+    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;
+}