@jbrowse/plugin-dotplot-view 3.6.5 → 4.0.0

package/esm/DotplotRenderer/drawDotplot.js

@@ -1,91 +1,49 @@
 import { readConfObject } from '@jbrowse/core/configuration';
 import { createJBrowseTheme } from '@jbrowse/core/ui';
+import { category10 } from '@jbrowse/core/ui/colors';
 import { bpToPx } from '@jbrowse/core/util/Base1DUtils';
+import { colord } from '@jbrowse/core/util/colord';
+import { getSnapshot } from '@jbrowse/mobx-state-tree';
 import { MismatchParser } from '@jbrowse/plugin-alignments';
-import { getSnapshot } from 'mobx-state-tree';
+import { clampWithWarnX, clampWithWarnY } from "./clamp.js";
 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;
-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 category10[hash % category10.length];
+}
+function applyAlpha(color, alpha) {
+    if (alpha === 1) {
+        return color;
+    }
+    return colord(color).alpha(alpha).toRgbString();
 }
 export 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 = readConfObject(config, 'color');
     const posColor = readConfObject(config, 'posColor');
     const negColor = readConfObject(config, 'negColor');
-    const colorBy = readConfObject(config, 'colorBy');
+    const colorBy = colorByOverride ?? 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 db1 = hview.dynamicBlocks.contentBlocks[0]?.offsetPx;
+    const db2 = vview.dynamicBlocks.contentBlocks[0]?.offsetPx;
     const warnings = [];
     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 = {
         ...getSnapshot(hview),
         staticBlocks: hview.staticBlocks,
@@ -97,41 +55,76 @@ export async function drawDotplot(ctx, props) {
         width: vview.width,
     };
     const t = 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
-                ? 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 = readConfObject(config, 'color', { feature });
+            }
+            colorWithAlpha = applyAlpha(r, alpha);
         }
-        ctx.fillStyle = r;
-        ctx.strokeStyle = r;
+        ctx.fillStyle = colorWithAlpha;
+        ctx.strokeStyle = colorWithAlpha;
         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 });
@@ -145,7 +138,9 @@ export 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;
@@ -170,8 +165,8 @@ export 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 = clampWithWarnX(currX, b1, b2, feature, warnings);
+                        currY = clampWithWarnY(currY, e1, e2, feature, warnings);
                         if (Math.abs(currX - lastDrawnX) > 0.5 ||
                             Math.abs(currY - lastDrawnY) > 0.5) {
                             ctx.lineTo(currX, height - currY);
@@ -193,13 +188,13 @@ export 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/esm/DotplotRenderer/index.js

@@ -1,11 +1,11 @@
-import DotplotRenderer from './DotplotRenderer';
-import ReactComponent from './components/DotplotRendering';
-import configSchema from './configSchema';
+import { lazy } from 'react';
+import DotplotRenderer from "./DotplotRenderer.js";
+import configSchema from "./configSchema.js";
 export default function DotplotRendererF(pluginManager) {
     pluginManager.addRendererType(() => new DotplotRenderer({
         name: 'DotplotRenderer',
         configSchema: configSchema,
-        ReactComponent,
+        ReactComponent: lazy(() => import("./components/DotplotRendering.js")),
         pluginManager,
     }));
 }

package/esm/DotplotView/1dview.d.ts

@@ -1,11 +1,11 @@
-import type { Instance } from 'mobx-state-tree';
-declare const Dotplot1DView: import("mobx-state-tree").IModelType<{
-    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-    displayedRegions: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>;
-    bpPerPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-    offsetPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-    interRegionPaddingWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
-    minimumBlockWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
+import type { Instance } from '@jbrowse/mobx-state-tree';
+declare const Dotplot1DView: import("@jbrowse/mobx-state-tree").IModelType<{
+    id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+    displayedRegions: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>;
+    bpPerPx: import("@jbrowse/mobx-state-tree").IType<number | undefined, number, number>;
+    offsetPx: import("@jbrowse/mobx-state-tree").IType<number | undefined, number, number>;
+    interRegionPaddingWidth: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<number>, [undefined]>;
+    minimumBlockWidth: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<number>, [undefined]>;
 }, {
     features: undefined | import("@jbrowse/core/util").Feature[];
     volatileWidth: number;
@@ -62,14 +62,14 @@ declare const Dotplot1DView: import("mobx-state-tree").IModelType<{
     readonly minBpPerPx: number;
     readonly maxOffset: number;
     readonly minOffset: number;
-}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
-declare const DotplotHView: import("mobx-state-tree").IModelType<{
-    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-    displayedRegions: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>;
-    bpPerPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-    offsetPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-    interRegionPaddingWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
-    minimumBlockWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
+}, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>;
+declare const DotplotHView: import("@jbrowse/mobx-state-tree").IModelType<{
+    id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+    displayedRegions: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>;
+    bpPerPx: import("@jbrowse/mobx-state-tree").IType<number | undefined, number, number>;
+    offsetPx: import("@jbrowse/mobx-state-tree").IType<number | undefined, number, number>;
+    interRegionPaddingWidth: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<number>, [undefined]>;
+    minimumBlockWidth: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<number>, [undefined]>;
 }, {
     features: undefined | import("@jbrowse/core/util").Feature[];
     volatileWidth: number;
@@ -128,14 +128,14 @@ declare const DotplotHView: import("mobx-state-tree").IModelType<{
     readonly minOffset: number;
 } & {
     readonly width: any;
-}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
-declare const DotplotVView: import("mobx-state-tree").IModelType<{
-    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-    displayedRegions: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>;
-    bpPerPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-    offsetPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-    interRegionPaddingWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
-    minimumBlockWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
+}, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>;
+declare const DotplotVView: import("@jbrowse/mobx-state-tree").IModelType<{
+    id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+    displayedRegions: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>;
+    bpPerPx: import("@jbrowse/mobx-state-tree").IType<number | undefined, number, number>;
+    offsetPx: import("@jbrowse/mobx-state-tree").IType<number | undefined, number, number>;
+    interRegionPaddingWidth: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<number>, [undefined]>;
+    minimumBlockWidth: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<number>, [undefined]>;
 }, {
     features: undefined | import("@jbrowse/core/util").Feature[];
     volatileWidth: number;
@@ -194,6 +194,6 @@ declare const DotplotVView: import("mobx-state-tree").IModelType<{
     readonly minOffset: number;
 } & {
     readonly width: any;
-}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+}, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>;
 export { Dotplot1DView, DotplotHView, DotplotVView };
 export type Dotplot1DViewModel = Instance<typeof Dotplot1DView>;

package/esm/DotplotView/1dview.js

@@ -1,7 +1,7 @@
 import Base1DView from '@jbrowse/core/util/Base1DViewModel';
 import calculateDynamicBlocks from '@jbrowse/core/util/calculateDynamicBlocks';
+import { getParent } from '@jbrowse/mobx-state-tree';
 import { observable } from 'mobx';
-import { getParent } from 'mobx-state-tree';
 function x() { }
 const Dotplot1DView = Base1DView.extend(self => {
     const scaleFactor = observable.box(1);
@@ -14,16 +14,28 @@ const Dotplot1DView = Base1DView.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 contentPx = self.displayedRegionsTotalPx;
+                const viewWidth = self.width;
+                if (contentPx <= viewWidth) {
+                    return (contentPx - viewWidth) / 2;
+                }
+                const leftPadding = 10;
+                return contentPx - leftPadding;
             },
             get minOffset() {
-                return -self.width * 0.8;
+                const contentPx = self.displayedRegionsTotalPx;
+                const viewWidth = self.width;
+                if (contentPx <= viewWidth) {
+                    return (contentPx - viewWidth) / 2;
+                }
+                const rightPadding = 30;
+                return -viewWidth + rightPadding;
             },
         },
         actions: {

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

@@ -1,4 +1,4 @@
-import type { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model.ts';
 export declare const HorizontalAxis: ({ model, }: {
     model: DotplotViewModel;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/DotplotView/components/Axes.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getFillProps, getStrokeProps, getTickDisplayStr, } from '@jbrowse/core/util';
 import { bpToPx } from '@jbrowse/core/util/Base1DUtils';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { getSnapshot } from '@jbrowse/mobx-state-tree';
 import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-import { getSnapshot } from 'mobx-state-tree';
-import { makeStyles } from 'tss-react/mui';
-import { getBlockLabelKeysToHide } from './util';
+import { getBlockLabelKeysToHide } from "./util.js";
 const useStyles = makeStyles()(() => ({
     vtext: {
         gridColumn: '1/2',
@@ -20,12 +20,12 @@ const useStyles = makeStyles()(() => ({
         userSelect: 'none',
     },
 }));
-export const HorizontalAxis = observer(function ({ model, }) {
+export const HorizontalAxis = observer(function HorizontalAxis({ model, }) {
     const { viewWidth, borderY } = model;
     const { classes } = useStyles();
     return (_jsx("svg", { width: viewWidth, height: borderY, className: classes.htext, children: _jsx(HorizontalAxisRaw, { model: model }) }));
 });
-export const HorizontalAxisRaw = observer(function ({ model, }) {
+export const HorizontalAxisRaw = observer(function HorizontalAxisRaw({ model, }) {
     const { viewWidth, borderX, borderY, hview, htextRotation, hticks } = model;
     const { offsetPx, width, dynamicBlocks, bpPerPx } = hview;
     const dblocks = dynamicBlocks.contentBlocks;
@@ -37,36 +37,31 @@ export const HorizontalAxisRaw = observer(function ({ model, }) {
         staticBlocks: hview.staticBlocks,
     };
     const ticks = hticks
-        .map(tick => {
-        var _a;
-        return [
-            tick,
-            (_a = bpToPx({
-                refName: tick.refName,
-                coord: tick.base,
-                self: hviewSnap,
-            })) === null || _a === void 0 ? void 0 : _a.offsetPx,
-        ];
-    })
+        .map(tick => [
+        tick,
+        bpToPx({
+            refName: tick.refName,
+            coord: tick.base,
+            self: hviewSnap,
+        })?.offsetPx,
+    ])
         .filter(f => f[1] !== undefined)
         .map(f => [f[0], f[1] - offsetPx]);
     return (_jsxs(_Fragment, { children: [dblocks
                 .filter(region => !hide.has(region.key))
                 .map(region => {
-                const x = region.offsetPx;
-                const y = 0;
-                const xoff = Math.floor(x - hview.offsetPx);
-                return (_jsx("text", { transform: `rotate(${htextRotation},${xoff},${y})`, x: xoff, y: y + 1, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end", ...getFillProps(theme.palette.text.primary), children: region.refName }, JSON.stringify(region)));
-            }), ticks.map(([tick, x]) => x > 0 && x < width ? (_jsx("line", { x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, ...getFillProps(theme.palette.text.primary) }, `line-${JSON.stringify(tick)}`)) : null), ticks
+                const xoff = Math.floor(region.offsetPx - hview.offsetPx);
+                return (_jsx("text", { transform: `rotate(${htextRotation},${xoff},0)`, x: xoff, y: 1, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end", ...getFillProps(theme.palette.text.primary), children: region.refName }, region.key));
+            }), ticks.map(([tick, x], idx) => x > 0 && x < width ? (_jsx("line", { x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, ...getStrokeProps(theme.palette.text.primary) }, `line-${tick.refName}-${tick.base}-${idx}`)) : null), ticks
                 .filter(t => t[0].type === 'major')
-                .map(([tick, x]) => x > 10 && x < width ? (_jsx("text", { x: x - 7, y: 0, transform: `rotate(${htextRotation},${x},0)`, fontSize: 11, dominantBaseline: "middle", textAnchor: "end", ...getFillProps(theme.palette.text.primary), children: getTickDisplayStr(tick.base + 1, bpPerPx) }, `text-${JSON.stringify(tick)}`)) : null), _jsx("text", { y: borderY - 12, x: (viewWidth - borderX) / 2, textAnchor: "middle", fontSize: 11, dominantBaseline: "hanging", ...getFillProps(theme.palette.text.primary), children: hview.assemblyNames.join(',') })] }));
+                .map(([tick, x], idx) => x > 10 && x < width ? (_jsx("text", { x: x - 7, y: 0, transform: `rotate(${htextRotation},${x},0)`, fontSize: 11, dominantBaseline: "middle", textAnchor: "end", ...getFillProps(theme.palette.text.primary), children: getTickDisplayStr(tick.base + 1, bpPerPx) }, `text-${tick.refName}-${tick.base}-${idx}`)) : null), _jsx("text", { y: borderY - 12, x: (viewWidth - borderX) / 2, textAnchor: "middle", fontSize: 11, dominantBaseline: "hanging", ...getFillProps(theme.palette.text.primary), children: hview.assemblyNames.join(',') })] }));
 });
-export const VerticalAxis = observer(function ({ model, }) {
+export const VerticalAxis = observer(function VerticalAxis({ model, }) {
     const { borderX, viewHeight } = model;
     const { classes } = useStyles();
     return (_jsx("svg", { className: classes.vtext, width: borderX, height: viewHeight, children: _jsx(VerticalAxisRaw, { model: model }) }));
 });
-export const VerticalAxisRaw = observer(function ({ model, }) {
+export const VerticalAxisRaw = observer(function VerticalAxisRaw({ model, }) {
     const { viewHeight, borderX, borderY, vview, vtextRotation, vticks } = model;
     const { offsetPx, width, dynamicBlocks, bpPerPx } = vview;
     const dblocks = dynamicBlocks.contentBlocks;
@@ -78,27 +73,22 @@ export const VerticalAxisRaw = observer(function ({ model, }) {
         staticBlocks: vview.staticBlocks,
     };
     const ticks = vticks
-        .map(tick => {
-        var _a;
-        return [
-            tick,
-            (_a = bpToPx({
-                refName: tick.refName,
-                coord: tick.base,
-                self: vviewSnap,
-            })) === null || _a === void 0 ? void 0 : _a.offsetPx,
-        ];
-    })
+        .map(tick => [
+        tick,
+        bpToPx({
+            refName: tick.refName,
+            coord: tick.base,
+            self: vviewSnap,
+        })?.offsetPx,
+    ])
         .filter(f => f[1] !== undefined)
         .map(f => [f[0], f[1] - offsetPx]);
     return (_jsxs(_Fragment, { children: [dblocks
                 .filter(region => !hide.has(region.key))
                 .map(region => {
-                const y = region.offsetPx;
-                const x = borderX;
-                const yoff = Math.floor(viewHeight - y + offsetPx);
-                return (_jsx("text", { transform: `rotate(${vtextRotation},${x},${y})`, x: x, y: yoff, fontSize: 11, textAnchor: "end", ...getFillProps(theme.palette.text.primary), children: region.refName }, JSON.stringify(region)));
-            }), ticks.map(([tick, y]) => y > 0 ? (_jsx("line", { y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, ...getStrokeProps(theme.palette.grey[400]) }, `line-${JSON.stringify(tick)}`)) : null), ticks
+                const yoff = Math.floor(viewHeight - region.offsetPx + offsetPx);
+                return (_jsx("text", { transform: `rotate(${vtextRotation},${borderX},${region.offsetPx})`, x: borderX, y: yoff, fontSize: 11, textAnchor: "end", ...getFillProps(theme.palette.text.primary), children: region.refName }, region.key));
+            }), ticks.map(([tick, y], idx) => y > 0 && y < viewHeight ? (_jsx("line", { y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, ...getStrokeProps(theme.palette.text.primary) }, `line-${tick.refName}-${tick.base}-${idx}`)) : null), ticks
                 .filter(t => t[0].type === 'major')
-                .map(([tick, y]) => y > 10 && y < viewHeight ? (_jsx("text", { y: viewHeight - y - 3, x: borderX - 7, textAnchor: "end", dominantBaseline: "hanging", fontSize: 11, ...getFillProps(theme.palette.text.primary), children: getTickDisplayStr(tick.base + 1, bpPerPx) }, `text-${JSON.stringify(tick)}`)) : null), _jsx("text", { y: (viewHeight - borderY) / 2, x: 12, transform: `rotate(-90,12,${(viewHeight - borderY) / 2})`, textAnchor: "middle", fontSize: 11, ...getFillProps(theme.palette.text.primary), children: vview.assemblyNames.join(',') })] }));
+                .map(([tick, y], idx) => y > 10 && y < viewHeight ? (_jsx("text", { y: viewHeight - y - 3, x: borderX - 7, textAnchor: "end", dominantBaseline: "hanging", fontSize: 11, ...getFillProps(theme.palette.text.primary), children: getTickDisplayStr(tick.base + 1, bpPerPx) }, `text-${tick.refName}-${tick.base}-${idx}`)) : null), _jsx("text", { y: (viewHeight - borderY) / 2, x: 12, transform: `rotate(-90,12,${(viewHeight - borderY) / 2})`, textAnchor: "middle", fontSize: 11, ...getFillProps(theme.palette.text.primary), children: vview.assemblyNames.join(',') })] }));
 });

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

@@ -0,0 +1,5 @@
+import type { DotplotViewModel } from '../model.ts';
+declare const ColorBySelector: ({ model, }: {
+    model: DotplotViewModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ColorBySelector;

package/esm/DotplotView/components/ColorBySelector.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import PaletteIcon from '@mui/icons-material/Palette';
+import { observer } from 'mobx-react';
+const ColorBySelector = observer(function ColorBySelector({ model, }) {
+    const firstDisplay = model.tracks[0]?.displays[0];
+    const colorBy = firstDisplay?.colorBy ?? 'default';
+    const setColorBy = (value) => {
+        for (const track of model.tracks) {
+            for (const display of track.displays) {
+                ;
+                display.setColorBy(value);
+            }
+        }
+    };
+    return (_jsx(CascadingMenuButton, { menuItems: [
+            {
+                label: 'Default',
+                type: 'radio',
+                checked: colorBy === 'default',
+                onClick: () => {
+                    setColorBy('default');
+                },
+                helpText: 'Use the default color scheme specified in the track configuration. This respects the color settings defined in the config file.',
+            },
+            {
+                label: 'Identity',
+                type: 'radio',
+                checked: colorBy === 'identity',
+                onClick: () => {
+                    setColorBy('identity');
+                },
+                helpText: 'Color alignments by sequence identity percentage. Higher identity matches appear in warmer colors, while lower identity matches appear cooler. Useful for identifying highly conserved vs. divergent regions.',
+            },
+            {
+                label: 'Mean Query Identity',
+                type: 'radio',
+                checked: colorBy === 'meanQueryIdentity',
+                onClick: () => {
+                    setColorBy('meanQueryIdentity');
+                },
+                helpText: 'Color alignments based on the mean identity across the query sequence. This provides a smoothed view of overall alignment quality, reducing noise from local variations. For instance, a single long query of e.g. a contig of an assembly, when aligned to the target, may get split into many smaller "hits". This score aggregates across them, and colors them all the same. Similar code exists in the program dotPlotly',
+            },
+            {
+                label: 'Mapping Quality',
+                type: 'radio',
+                checked: colorBy === 'mappingQuality',
+                onClick: () => {
+                    setColorBy('mappingQuality');
+                },
+                helpText: 'Color alignments by mapping quality score (MAPQ). Higher quality mappings (more unique/confident) appear in darker colors. Useful for identifying ambiguous or multi-mapping regions.',
+            },
+            {
+                label: 'Strand',
+                type: 'radio',
+                checked: colorBy === 'strand',
+                onClick: () => {
+                    setColorBy('strand');
+                },
+                helpText: 'Color alignments by strand orientation. Forward strand alignments and reverse strand alignments are shown in different colors, making it easy to identify inversions and strand-specific patterns.',
+            },
+            {
+                label: 'Query',
+                type: 'radio',
+                checked: colorBy === 'query',
+                onClick: () => {
+                    setColorBy('query');
+                },
+                helpText: 'Color alignments by query sequence name. Each unique query sequence is assigned a consistent color based on its name, making it easy to visually distinguish between different sequences.',
+            },
+        ], children: _jsx(PaletteIcon, {}) }));
+});
+export default ColorBySelector;

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

@@ -0,0 +1,6 @@
+import type { DotplotViewModel } from '../model.ts';
+declare const DiagonalizationProgressDialog: ({ handleClose, model, }: {
+    handleClose: () => void;
+    model: Pick<DotplotViewModel, "tracks" | "hview" | "vview" | "id" | "type" | "displayName">;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DiagonalizationProgressDialog;