@jbrowse/plugin-dotplot-view 3.6.4 → 3.7.0

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

@@ -0,0 +1,156 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const RpcMethodTypeWithFiltersAndRenameRegions_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/RpcMethodTypeWithFiltersAndRenameRegions"));
+const stopToken_1 = require("@jbrowse/core/util/stopToken");
+const model_1 = require("./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,
+        },
+    };
+}
+class DiagonalizeDotplotRpc extends RpcMethodTypeWithFiltersAndRenameRegions_1.default {
+    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 = model_1.Dotplot1DView.create(snap);
+            v.setVolatileWidth(dimensions[idx]);
+            return v;
+        });
+        const targetView = views[0];
+        (0, stopToken_1.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');
+        }
+        (0, stopToken_1.checkStopToken)(stopToken);
+        statusCallback === null || statusCallback === void 0 ? void 0 : statusCallback('Fetching features...');
+        const feats = await rendererType.getFeatures({
+            regions: targetView.dynamicBlocks.contentBlocks,
+            adapterConfig,
+            sessionId,
+        });
+        (0, stopToken_1.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) => {
+            (0, stopToken_1.checkStopToken)(stopToken);
+            statusCallback === null || statusCallback === void 0 ? void 0 : statusCallback(message);
+        });
+        statusCallback === null || statusCallback === void 0 ? void 0 : statusCallback('Diagonalization complete!');
+        return result;
+    }
+}
+exports.default = DiagonalizeDotplotRpc;

package/dist/DotplotDisplay/renderDotplotBlock.js

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

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

@@ -18,6 +18,7 @@ function stateModelFactory(configSchema) {
         .model({
         type: mobx_state_tree_1.types.literal('DotplotDisplay'),
         configuration: (0, configuration_1.ConfigurationReference)(configSchema),
+        colorBy: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string, 'default'),
     })
         .volatile(() => ({
         stopToken: undefined,
@@ -28,6 +29,8 @@ function stateModelFactory(configSchema) {
         message: undefined,
         renderingComponent: undefined,
         ReactComponent2: ServerSideRenderedBlockContent_1.default,
+        alpha: 1,
+        minAlignmentLength: 0,
     })))
         .views(self => ({
         get shouldDisplay() {
@@ -44,6 +47,9 @@ function stateModelFactory(configSchema) {
                 rpcDriverName: self.rpcDriverName,
                 displayModel: self,
                 config: self.configuration.renderer,
+                statusCallback: (message) => {
+                    self.setMessage(message);
+                },
             };
         },
     }))
@@ -115,5 +121,14 @@ 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/dist/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/dist/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/dist/DotplotRenderer/clamp.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clampWithWarnX = clampWithWarnX;
+exports.clampWithWarnY = clampWithWarnY;
+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;
+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;
+}
+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;
+}

package/dist/DotplotRenderer/drawDotplot.d.ts

@@ -1,3 +1,4 @@
+import { type Warning } from './clamp';
 import type { Dotplot1DViewModel } from '../DotplotView/model';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import type { RenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
@@ -6,6 +7,9 @@ export interface DotplotRenderArgsDeserialized extends RenderArgsDeserialized {
     height: number;
     width: number;
     highResolutionScaling: number;
+    alpha?: number;
+    minAlignmentLength?: number;
+    colorBy?: string;
     view: {
         hview: Dotplot1DViewModel;
         vview: Dotplot1DViewModel;
@@ -14,8 +18,5 @@ export interface DotplotRenderArgsDeserialized extends RenderArgsDeserialized {
 export declare function drawDotplot(ctx: CanvasRenderingContext2D, props: DotplotRenderArgsDeserialized & {
     views: Dotplot1DViewModel[];
 }): Promise<{
-    warnings: {
-        message: string;
-        effect: string;
-    }[];
+    warnings: Warning[];
 }>;

package/dist/DotplotRenderer/drawDotplot.js

@@ -3,26 +3,39 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.drawDotplot = drawDotplot;
 const configuration_1 = require("@jbrowse/core/configuration");
 const ui_1 = require("@jbrowse/core/ui");
+const colors_1 = require("@jbrowse/core/ui/colors");
 const Base1DUtils_1 = require("@jbrowse/core/util/Base1DUtils");
+const colord_1 = require("@jbrowse/core/util/colord");
 const plugin_alignments_1 = require("@jbrowse/plugin-alignments");
 const mobx_state_tree_1 = require("mobx-state-tree");
+const clamp_1 = require("./clamp");
 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;
-function drawCir(ctx, x, y, r = 1) {
-    ctx.beginPath();
-    ctx.arc(x, y, r / 2, 0, 2 * Math.PI);
-    ctx.fill();
+function hashString(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash = hash & hash;
+    }
+    return Math.abs(hash);
+}
+function getQueryColor(queryName) {
+    const hash = hashString(queryName);
+    return colors_1.category10[hash % colors_1.category10.length];
+}
+function applyAlpha(color, alpha) {
+    if (alpha === 1) {
+        return color;
+    }
+    return (0, colord_1.colord)(color).alpha(alpha).toRgbString();
 }
 async function drawDotplot(ctx, props) {
     var _a, _b;
-    const { config, views, height, drawCigar, theme } = props;
+    const { config, views, height, drawCigar, theme, alpha = 1, minAlignmentLength = 0, colorBy: colorByOverride, } = 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 colorBy = colorByOverride !== null && colorByOverride !== void 0 ? colorByOverride : (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');
@@ -35,60 +48,6 @@ async function drawDotplot(ctx, props) {
     ctx.lineWidth = lineWidth;
     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,
@@ -100,41 +59,76 @@ async function drawDotplot(ctx, props) {
         width: vview.width,
     };
     const t = (0, ui_1.createJBrowseTheme)(theme);
-    for (const feature of hview.features || []) {
+    const features = hview.features || [];
+    let posColorWithAlpha;
+    let negColorWithAlpha;
+    let defaultColorWithAlpha;
+    const queryColorCache = new Map();
+    const getQueryColorWithAlpha = (queryName) => {
+        if (!queryColorCache.has(queryName)) {
+            const c = getQueryColor(queryName);
+            queryColorCache.set(queryName, applyAlpha(c, alpha));
+        }
+        return queryColorCache.get(queryName);
+    };
+    if (colorBy === 'strand') {
+        posColorWithAlpha = applyAlpha(posColor, alpha);
+        negColorWithAlpha = applyAlpha(negColor, alpha);
+    }
+    else if (colorBy === 'default' && !isCallback) {
+        const c = color === '#f0f' ? t.palette.text.primary : color;
+        defaultColorWithAlpha = applyAlpha(c, alpha);
+    }
+    for (const feature of 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 fStart = feature.get('start');
+        const fEnd = feature.get('end');
+        if (minAlignmentLength > 0) {
+            const alignmentLength = Math.abs(fEnd - fStart);
+            if (alignmentLength < minAlignmentLength) {
+                continue;
+            }
+        }
         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%)`;
+        const start = strand === 1 ? fStart : fEnd;
+        const end = strand === 1 ? fEnd : fStart;
+        let colorWithAlpha;
+        if (colorBy === 'strand') {
+            colorWithAlpha = strand === -1 ? negColorWithAlpha : posColorWithAlpha;
         }
-        else if (colorBy === 'mappingQuality') {
-            r = `hsl(${feature.get('mappingQual')},100%,40%)`;
+        else if (colorBy === 'query') {
+            const queryName = refName;
+            colorWithAlpha = getQueryColorWithAlpha(queryName);
         }
-        else if (colorBy === 'strand') {
-            r = strand === -1 ? negColor : posColor;
+        else if (colorBy === 'default' && !isCallback) {
+            colorWithAlpha = defaultColorWithAlpha;
         }
-        else if (colorBy === 'default') {
-            r = isCallback
-                ? (0, configuration_1.readConfObject)(config, 'color', { feature })
-                : color === '#f0f'
-                    ? t.palette.text.primary
-                    : color;
+        else {
+            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 === 'default' && isCallback) {
+                r = (0, configuration_1.readConfObject)(config, 'color', { feature });
+            }
+            colorWithAlpha = applyAlpha(r, alpha);
         }
-        ctx.fillStyle = r;
-        ctx.strokeStyle = r;
+        ctx.fillStyle = colorWithAlpha;
+        ctx.strokeStyle = colorWithAlpha;
         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 });
@@ -148,7 +142,9 @@ async function drawDotplot(ctx, props) {
             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);
+                ctx.beginPath();
+                ctx.arc(b1, height - e1, lineWidth / 2, 0, 2 * Math.PI);
+                ctx.fill();
             }
             else {
                 let currX = b1;
@@ -173,8 +169,8 @@ async function drawDotplot(ctx, props) {
                         else if (op === 'I') {
                             currY += val / vBpPerPx;
                         }
-                        currX = clampWithWarnX(currX, b1, b2, feature);
-                        currY = clampWithWarnY(currY, e1, e2, feature);
+                        currX = (0, clamp_1.clampWithWarnX)(currX, b1, b2, feature, warnings);
+                        currY = (0, clamp_1.clampWithWarnY)(currY, e1, e2, feature, warnings);
                         if (Math.abs(currX - lastDrawnX) > 0.5 ||
                             Math.abs(currY - lastDrawnY) > 0.5) {
                             ctx.lineTo(currX, height - currY);
@@ -196,13 +192,13 @@ async function drawDotplot(ctx, props) {
             if (warnings.length <= 5) {
                 if (b10 === undefined || b20 === undefined) {
                     warnings.push({
-                        message: `feature at (X ${refName}:${start}-${end}) not plotted, fell outside of range`,
+                        message: `feature at (X-coord: ${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`,
+                        message: `feature at (Y-coord: ${mateRef}:${mate.start}-${mate.end}) not plotted, fell outside of range`,
                         effect: 'feature not rendered',
                     });
                 }

package/dist/DotplotView/1dview.js

@@ -20,16 +20,18 @@ const Dotplot1DView = Base1DViewModel_1.default.extend(self => {
                 return scaleFactor.get();
             },
             get maxBpPerPx() {
-                return self.totalBp / (self.width - 50);
+                return self.totalBp / (self.width * 0.9);
             },
             get minBpPerPx() {
                 return 1 / 50;
             },
             get maxOffset() {
-                return self.displayedRegionsTotalPx - self.width * 0.2;
+                const leftPadding = 10;
+                return self.displayedRegionsTotalPx - leftPadding;
             },
             get minOffset() {
-                return -self.width * 0.8;
+                const rightPadding = 30;
+                return -self.width + rightPadding;
             },
         },
         actions: {