@jbrowse/plugin-linear-comparative-view 3.6.4 → 3.7.0

package/dist/LinearSyntenyDisplay/drawSynteny.js

@@ -2,9 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MAX_COLOR_RANGE = void 0;
 exports.getId = getId;
+exports.drawCigarClickMap = drawCigarClickMap;
 exports.drawRef = drawRef;
-exports.drawMouseoverSynteny = drawMouseoverSynteny;
+exports.drawMouseoverClickMap = drawMouseoverClickMap;
+const colors_1 = require("@jbrowse/core/ui/colors");
 const util_1 = require("@jbrowse/core/util");
+const colord_1 = require("@jbrowse/core/util/colord");
 const util_2 = require("./components/util");
 exports.MAX_COLOR_RANGE = 255 * 255 * 255;
 function makeColor(idx) {
@@ -13,7 +16,20 @@ function makeColor(idx) {
     const b = idx % 255;
     return `rgb(${r},${g},${b})`;
 }
-const colorMap = {
+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];
+}
+const defaultCigarColors = {
     I: '#ff03',
     N: '#0a03',
     D: '#00f3',
@@ -21,13 +37,39 @@ const colorMap = {
     M: '#f003',
     '=': '#f003',
 };
+const strandCigarColors = {
+    I: '#ff03',
+    N: '#a020f0',
+    D: '#a020f0',
+    X: 'brown',
+    M: '#f003',
+    '=': '#f003',
+};
+const colorSchemes = {
+    default: {
+        cigarColors: defaultCigarColors,
+    },
+    strand: {
+        posColor: 'red',
+        negColor: 'blue',
+        cigarColors: strandCigarColors,
+    },
+    query: {
+        cigarColors: defaultCigarColors,
+    },
+};
+function applyAlpha(color, alpha) {
+    if (alpha === 1) {
+        return color;
+    }
+    return (0, colord_1.colord)(color).alpha(alpha).toHex();
+}
 const lineLimit = 3;
 const oobLimit = 1600;
 function getId(r, g, b, unitMultiplier) {
     return Math.floor((r * 255 * 255 + g * 255 + b - 1) / unitMultiplier);
 }
-function drawRef(model, ctx1, ctx3) {
-    var _a;
+function drawCigarClickMap(model, cigarClickMapCanvas) {
     const view = (0, util_1.getContainingView)(model);
     const drawCurves = view.drawCurves;
     const drawCIGAR = view.drawCIGAR;
@@ -35,55 +77,226 @@ function drawRef(model, ctx1, ctx3) {
     const { level, height, featPositions } = model;
     const width = view.width;
     const bpPerPxs = view.views.map(v => v.bpPerPx);
-    if (ctx3) {
-        ctx3.imageSmoothingEnabled = false;
-    }
-    ctx1.beginPath();
+    cigarClickMapCanvas.imageSmoothingEnabled = false;
+    cigarClickMapCanvas.clearRect(0, 0, width, height);
     const offsets = view.views.map(v => v.offsetPx);
-    const unitMultiplier = Math.floor(exports.MAX_COLOR_RANGE / featPositions.length);
-    ctx1.fillStyle = colorMap.M;
-    ctx1.strokeStyle = colorMap.M;
-    for (const { p11, p12, p21, p22 } of featPositions) {
+    const bpPerPxInv0 = 1 / bpPerPxs[level];
+    const bpPerPxInv1 = 1 / bpPerPxs[level + 1];
+    for (const { p11, p12, p21, p22, f, cigar } of featPositions) {
         const x11 = p11.offsetPx - offsets[level];
         const x12 = p12.offsetPx - offsets[level];
         const x21 = p21.offsetPx - offsets[level + 1];
         const x22 = p22.offsetPx - offsets[level + 1];
         const l1 = Math.abs(x12 - x11);
         const l2 = Math.abs(x22 - x21);
+        const minX = Math.min(x21, x22);
+        const maxX = Math.max(x21, x22);
         const y1 = 0;
         const y2 = height;
         const mid = (y2 - y1) / 2;
+        if (!(l1 <= lineLimit && l2 <= lineLimit) &&
+            (0, util_1.doesIntersect2)(minX, maxX, -oobLimit, view.width + oobLimit)) {
+            const s1 = f.get('strand');
+            const k1 = s1 === -1 ? x12 : x11;
+            const k2 = s1 === -1 ? x11 : x12;
+            const rev1 = k1 < k2 ? 1 : -1;
+            const rev2 = (x21 < x22 ? 1 : -1) * s1;
+            let cx1 = k1;
+            let cx2 = s1 === -1 ? x22 : x21;
+            if (cigar.length && drawCIGAR) {
+                let continuingFlag = false;
+                let px1 = 0;
+                let px2 = 0;
+                const unitMultiplier2 = Math.floor(exports.MAX_COLOR_RANGE / cigar.length);
+                for (let j = 0; j < cigar.length; j += 2) {
+                    const len = +cigar[j];
+                    const op = cigar[j + 1];
+                    if (!continuingFlag) {
+                        px1 = cx1;
+                        px2 = cx2;
+                    }
+                    const d1 = len * bpPerPxInv0;
+                    const d2 = len * bpPerPxInv1;
+                    if (op === 'M' || op === '=' || op === 'X') {
+                        cx1 += d1 * rev1;
+                        cx2 += d2 * rev2;
+                    }
+                    else if (op === 'D' || op === 'N') {
+                        cx1 += d1 * rev1;
+                    }
+                    else if (op === 'I') {
+                        cx2 += d2 * rev2;
+                    }
+                    if (!(Math.max(px1, px2, cx1, cx2) < 0 ||
+                        Math.min(px1, px2, cx1, cx2) > width)) {
+                        const isNotLast = j < cigar.length - 2;
+                        if (Math.abs(cx1 - px1) <= 1 &&
+                            Math.abs(cx2 - px2) <= 1 &&
+                            isNotLast) {
+                            continuingFlag = true;
+                        }
+                        else {
+                            continuingFlag = false;
+                            const shouldDraw = !drawCIGARMatchesOnly ||
+                                ((op === 'M' || op === '=' || op === 'X') &&
+                                    Math.abs(cx1 - px1) > 1 &&
+                                    Math.abs(cx2 - px2) > 1);
+                            if (shouldDraw) {
+                                const idx = j * unitMultiplier2 + 1;
+                                cigarClickMapCanvas.fillStyle = makeColor(idx);
+                                (0, util_2.draw)(cigarClickMapCanvas, px1, cx1, y1, cx2, px2, y2, mid, drawCurves);
+                                cigarClickMapCanvas.fill();
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+function drawRef(model, mainCanvas) {
+    var _a;
+    const view = (0, util_1.getContainingView)(model);
+    const drawCurves = view.drawCurves;
+    const drawCIGAR = view.drawCIGAR;
+    const drawCIGARMatchesOnly = view.drawCIGARMatchesOnly;
+    const drawLocationMarkersEnabled = view.drawLocationMarkers;
+    const { level, height, featPositions, alpha, minAlignmentLength, colorBy } = model;
+    const width = view.width;
+    const bpPerPxs = view.views.map(v => v.bpPerPx);
+    const queryTotalLengths = new Map();
+    if (minAlignmentLength > 0) {
+        for (const { f } of featPositions) {
+            const queryName = f.get('name') || f.get('id') || f.id();
+            const alignmentLength = Math.abs(f.get('end') - f.get('start'));
+            const currentTotal = queryTotalLengths.get(queryName) || 0;
+            queryTotalLengths.set(queryName, currentTotal + alignmentLength);
+        }
+    }
+    const schemeConfig = colorSchemes[colorBy] || colorSchemes.default;
+    const activeColorMap = schemeConfig.cigarColors;
+    const posColor = colorBy === 'strand' ? colorSchemes.strand.posColor : 'red';
+    const negColor = colorBy === 'strand' ? colorSchemes.strand.negColor : 'blue';
+    const colorMapWithAlpha = {
+        I: applyAlpha(activeColorMap.I, alpha),
+        N: applyAlpha(activeColorMap.N, alpha),
+        D: applyAlpha(activeColorMap.D, alpha),
+        X: applyAlpha(activeColorMap.X, alpha),
+        M: applyAlpha(activeColorMap.M, alpha),
+        '=': applyAlpha(activeColorMap['='], alpha),
+    };
+    const posColorWithAlpha = applyAlpha(posColor, alpha);
+    const negColorWithAlpha = applyAlpha(negColor, alpha);
+    const queryColorCache = new Map();
+    const getQueryColorWithAlpha = (queryName) => {
+        if (!queryColorCache.has(queryName)) {
+            const color = getQueryColor(queryName);
+            queryColorCache.set(queryName, applyAlpha(color, alpha));
+        }
+        return queryColorCache.get(queryName);
+    };
+    mainCanvas.beginPath();
+    const offsets = view.views.map(v => v.offsetPx);
+    const offsetsL0 = offsets[level];
+    const offsetsL1 = offsets[level + 1];
+    const unitMultiplier = Math.floor(exports.MAX_COLOR_RANGE / featPositions.length);
+    const y1 = 0;
+    const y2 = height;
+    const mid = (y2 - y1) / 2;
+    const useStrandColorThin = colorBy === 'strand';
+    const useQueryColorThin = colorBy === 'query';
+    mainCanvas.fillStyle = colorMapWithAlpha.M;
+    mainCanvas.strokeStyle = colorMapWithAlpha.M;
+    const thinLinesByColor = new Map();
+    for (const { p11, p12, p21, p22, f } of featPositions) {
+        if (minAlignmentLength > 0) {
+            const queryName = f.get('name') || f.get('id') || f.id();
+            const totalLength = queryTotalLengths.get(queryName) || 0;
+            if (totalLength < minAlignmentLength) {
+                continue;
+            }
+        }
+        const x11 = p11.offsetPx - offsetsL0;
+        const x12 = p12.offsetPx - offsetsL0;
+        const x21 = p21.offsetPx - offsetsL1;
+        const x22 = p22.offsetPx - offsetsL1;
+        const l1 = Math.abs(x12 - x11);
+        const l2 = Math.abs(x22 - x21);
         if (l1 <= lineLimit &&
             l2 <= lineLimit &&
             x21 < width + oobLimit &&
             x21 > -oobLimit) {
-            ctx1.moveTo(x11, y1);
-            if (drawCurves) {
-                ctx1.bezierCurveTo(x11, mid, x21, mid, x21, y2);
+            let colorKey = 'default';
+            if (useStrandColorThin) {
+                const strand = f.get('strand');
+                colorKey = strand === -1 ? 'neg' : 'pos';
             }
-            else {
-                ctx1.lineTo(x21, y2);
+            else if (useQueryColorThin) {
+                colorKey = f.get('refName');
+            }
+            if (!thinLinesByColor.has(colorKey)) {
+                thinLinesByColor.set(colorKey, []);
             }
+            thinLinesByColor.get(colorKey).push({ x11, x21, y1, y2, mid });
         }
     }
-    ctx1.stroke();
-    ctx1.fillStyle = colorMap.M;
-    ctx1.strokeStyle = colorMap.M;
+    for (const [colorKey, lines] of thinLinesByColor) {
+        if (colorKey === 'pos') {
+            mainCanvas.strokeStyle = posColorWithAlpha;
+        }
+        else if (colorKey === 'neg') {
+            mainCanvas.strokeStyle = negColorWithAlpha;
+        }
+        else if (colorKey !== 'default') {
+            mainCanvas.strokeStyle = getQueryColorWithAlpha(colorKey);
+        }
+        else {
+            mainCanvas.strokeStyle = colorMapWithAlpha.M;
+        }
+        mainCanvas.beginPath();
+        if (drawCurves) {
+            for (const { x11, x21, y1, y2, mid } of lines) {
+                mainCanvas.moveTo(x11, y1);
+                mainCanvas.bezierCurveTo(x11, mid, x21, mid, x21, y2);
+            }
+        }
+        else {
+            for (const { x11, x21, y1, y2 } of lines) {
+                mainCanvas.moveTo(x11, y1);
+                mainCanvas.lineTo(x21, y2);
+            }
+        }
+        mainCanvas.stroke();
+    }
+    const bpPerPx0 = bpPerPxs[level];
+    const bpPerPx1 = bpPerPxs[level + 1];
+    const bpPerPxInv0 = 1 / bpPerPx0;
+    const bpPerPxInv1 = 1 / bpPerPx1;
+    const useStrandColor = colorBy === 'strand';
+    const useQueryColor = colorBy === 'query';
+    mainCanvas.fillStyle = colorMapWithAlpha.M;
+    mainCanvas.strokeStyle = colorMapWithAlpha.M;
     for (const { p11, p12, p21, p22, f, cigar } of featPositions) {
-        const x11 = p11.offsetPx - offsets[level];
-        const x12 = p12.offsetPx - offsets[level];
-        const x21 = p21.offsetPx - offsets[level + 1];
-        const x22 = p22.offsetPx - offsets[level + 1];
+        const strand = f.get('strand');
+        const refName = f.get('refName');
+        if (minAlignmentLength > 0) {
+            const queryName = f.get('name') || f.get('id') || f.id();
+            const totalLength = queryTotalLengths.get(queryName) || 0;
+            if (totalLength < minAlignmentLength) {
+                continue;
+            }
+        }
+        const x11 = p11.offsetPx - offsetsL0;
+        const x12 = p12.offsetPx - offsetsL0;
+        const x21 = p21.offsetPx - offsetsL1;
+        const x22 = p22.offsetPx - offsetsL1;
         const l1 = Math.abs(x12 - x11);
         const l2 = Math.abs(x22 - x21);
         const minX = Math.min(x21, x22);
         const maxX = Math.max(x21, x22);
-        const y1 = 0;
-        const y2 = height;
-        const mid = (y2 - y1) / 2;
         if (!(l1 <= lineLimit && l2 <= lineLimit) &&
             (0, util_1.doesIntersect2)(minX, maxX, -oobLimit, view.width + oobLimit)) {
-            const s1 = f.get('strand');
+            const s1 = strand;
             const k1 = s1 === -1 ? x12 : x11;
             const k2 = s1 === -1 ? x11 : x12;
             const rev1 = k1 < k2 ? 1 : -1;
@@ -94,17 +307,15 @@ function drawRef(model, ctx1, ctx3) {
                 let continuingFlag = false;
                 let px1 = 0;
                 let px2 = 0;
-                const unitMultiplier2 = Math.floor(exports.MAX_COLOR_RANGE / cigar.length);
                 for (let j = 0; j < cigar.length; j += 2) {
-                    const idx = j * unitMultiplier2 + 1;
                     const len = +cigar[j];
                     const op = cigar[j + 1];
                     if (!continuingFlag) {
                         px1 = cx1;
                         px2 = cx2;
                     }
-                    const d1 = len / bpPerPxs[level];
-                    const d2 = len / bpPerPxs[level + 1];
+                    const d1 = len * bpPerPxInv0;
+                    const d2 = len * bpPerPxInv1;
                     if (op === 'M' || op === '=' || op === 'X') {
                         cx1 += d1 * rev1;
                         cx2 += d2 * rev2;
@@ -125,30 +336,51 @@ function drawRef(model, ctx1, ctx3) {
                         }
                         else {
                             const letter = (continuingFlag && d1 > 1) || d2 > 1 ? op : 'M';
-                            ctx1.fillStyle = colorMap[letter];
+                            const isInsertionOrDeletion = letter === 'I' || letter === 'D' || letter === 'N';
+                            if (useStrandColor && !isInsertionOrDeletion) {
+                                mainCanvas.fillStyle =
+                                    strand === -1 ? negColorWithAlpha : posColorWithAlpha;
+                            }
+                            else if (useQueryColor && !isInsertionOrDeletion) {
+                                mainCanvas.fillStyle = getQueryColorWithAlpha(refName);
+                            }
+                            else {
+                                mainCanvas.fillStyle = colorMapWithAlpha[letter];
+                            }
                             continuingFlag = false;
                             if (drawCIGARMatchesOnly) {
                                 if (letter === 'M') {
-                                    (0, util_2.draw)(ctx1, px1, cx1, y1, cx2, px2, y2, mid, drawCurves);
-                                    ctx1.fill();
+                                    (0, util_2.draw)(mainCanvas, px1, cx1, y1, cx2, px2, y2, mid, drawCurves);
+                                    mainCanvas.fill();
+                                    if (drawLocationMarkersEnabled) {
+                                        (0, util_2.drawLocationMarkers)(mainCanvas, px1, cx1, y1, cx2, px2, y2, mid, bpPerPx0, bpPerPx1, drawCurves);
+                                    }
                                 }
                             }
                             else {
-                                (0, util_2.draw)(ctx1, px1, cx1, y1, cx2, px2, y2, mid, drawCurves);
-                                ctx1.fill();
-                            }
-                            if (ctx3) {
-                                ctx3.fillStyle = makeColor(idx);
-                                (0, util_2.draw)(ctx3, px1, cx1, y1, cx2, px2, y2, mid, drawCurves);
-                                ctx3.fill();
+                                (0, util_2.draw)(mainCanvas, px1, cx1, y1, cx2, px2, y2, mid, drawCurves);
+                                mainCanvas.fill();
+                                if (drawLocationMarkersEnabled) {
+                                    (0, util_2.drawLocationMarkers)(mainCanvas, px1, cx1, y1, cx2, px2, y2, mid, bpPerPx0, bpPerPx1, drawCurves);
+                                }
                             }
                         }
                     }
                 }
             }
             else {
-                (0, util_2.draw)(ctx1, x11, x12, y1, x22, x21, y2, mid, drawCurves);
-                ctx1.fill();
+                if (useStrandColor) {
+                    mainCanvas.fillStyle =
+                        strand === -1 ? negColorWithAlpha : posColorWithAlpha;
+                }
+                else if (useQueryColor) {
+                    mainCanvas.fillStyle = getQueryColorWithAlpha(refName);
+                }
+                (0, util_2.draw)(mainCanvas, x11, x12, y1, x22, x21, y2, mid, drawCurves);
+                mainCanvas.fill();
+                if (useStrandColor || useQueryColor) {
+                    mainCanvas.fillStyle = colorMapWithAlpha.M;
+                }
             }
         }
     }
@@ -160,6 +392,13 @@ function drawRef(model, ctx1, ctx3) {
     ctx2.clearRect(0, 0, width, height);
     for (let i = 0; i < featPositions.length; i++) {
         const feature = featPositions[i];
+        if (minAlignmentLength > 0) {
+            const queryName = feature.f.get('name') || feature.f.get('id') || feature.f.id();
+            const totalLength = queryTotalLengths.get(queryName) || 0;
+            if (totalLength < minAlignmentLength) {
+                continue;
+            }
+        }
         const idx = i * unitMultiplier + 1;
         ctx2.fillStyle = makeColor(idx);
         (0, util_2.drawMatchSimple)({
@@ -178,7 +417,7 @@ function drawRef(model, ctx1, ctx3) {
         });
     }
 }
-function drawMouseoverSynteny(model) {
+function drawMouseoverClickMap(model) {
     var _a;
     const { level, clickId, mouseoverId } = model;
     const highResolutionScaling = 1;

package/dist/LinearSyntenyDisplay/model.d.ts

@@ -22,6 +22,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     type: import("mobx-state-tree").ISimpleType<"LinearSyntenyDisplay">;
     configuration: AnyConfigurationSchemaType;
+    colorBy: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
 }, {
     rendererTypeName: string;
     error: unknown;
@@ -260,6 +261,8 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     mouseoverId: string | undefined;
     clickId: string | undefined;
     cigarMouseoverId: number;
+    alpha: number;
+    minAlignmentLength: number;
 } & {
     setFeatPositions(arg: FeatPos[]): void;
     setMainCanvasRef(ref: HTMLCanvasElement | null): void;
@@ -269,6 +272,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     setMouseoverId(arg?: string): void;
     setCigarMouseoverId(arg: number): void;
     setClickId(arg?: string): void;
+    setAlpha(value: number): void;
+    setMinAlignmentLength(value: number): void;
+    setColorBy(value: string): void;
 } & {
     readonly adapterConfig: any;
     readonly trackIds: string[];

package/dist/LinearSyntenyDisplay/model.js

@@ -44,6 +44,7 @@ function stateModelFactory(configSchema) {
         .compose('LinearSyntenyDisplay', (0, stateModelFactory_1.default)(configSchema), mobx_state_tree_1.types.model({
         type: mobx_state_tree_1.types.literal('LinearSyntenyDisplay'),
         configuration: (0, configuration_1.ConfigurationReference)(configSchema),
+        colorBy: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string, 'default'),
     }))
         .volatile(() => ({
         mainCanvas: null,
@@ -54,6 +55,8 @@ function stateModelFactory(configSchema) {
         mouseoverId: undefined,
         clickId: undefined,
         cigarMouseoverId: -1,
+        alpha: 0.2,
+        minAlignmentLength: 0,
     }))
         .actions(self => ({
         setFeatPositions(arg) {
@@ -80,6 +83,15 @@ function stateModelFactory(configSchema) {
         setClickId(arg) {
             self.clickId = arg;
         },
+        setAlpha(value) {
+            self.alpha = value;
+        },
+        setMinAlignmentLength(value) {
+            self.minAlignmentLength = value;
+        },
+        setColorBy(value) {
+            self.colorBy = value;
+        },
     }))
         .views(self => ({
         get adapterConfig() {

package/dist/LinearSyntenyView/components/DiagonalizationProgressDialog.d.ts

@@ -0,0 +1,6 @@
+import type { LinearSyntenyViewModel } from '../model';
+declare const DiagonalizationProgressDialog: ({ handleClose, model, }: {
+    handleClose: () => void;
+    model: LinearSyntenyViewModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DiagonalizationProgressDialog;

package/dist/LinearSyntenyView/components/DiagonalizationProgressDialog.js

@@ -0,0 +1,87 @@
+"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 util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
+const mobx_1 = require("mobx");
+const mobx_react_1 = require("mobx-react");
+const diagonalize_1 = require("../util/diagonalize");
+const DiagonalizationProgressDialog = (0, mobx_react_1.observer)(function ({ handleClose, model, }) {
+    const [progress, setProgress] = (0, react_1.useState)(0);
+    const [message, setMessage] = (0, react_1.useState)('Initializing...');
+    const [error, setError] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        const runDiagonalization = async () => {
+            const session = (0, util_1.getSession)(model);
+            try {
+                if (model.views.length !== 2) {
+                    setError('Diagonalization requires exactly 2 views');
+                    setProgress(100);
+                    session.notify('Diagonalization requires exactly 2 views', 'warning');
+                    return;
+                }
+                const queryView = model.views[1];
+                setProgress(5);
+                setMessage('Collecting alignment data...');
+                const alignments = [];
+                for (const level of model.levels) {
+                    for (const track of level.tracks) {
+                        for (const display of track.displays) {
+                            const { featPositions } = display;
+                            for (const { f } of featPositions) {
+                                const mate = f.get('mate');
+                                alignments.push({
+                                    queryRefName: f.get('refName'),
+                                    refRefName: mate.refName,
+                                    queryStart: f.get('start'),
+                                    queryEnd: f.get('end'),
+                                    refStart: mate.start,
+                                    refEnd: mate.end,
+                                    strand: f.get('strand') || 1,
+                                });
+                            }
+                        }
+                    }
+                }
+                if (alignments.length === 0) {
+                    setError('No alignments found');
+                    setProgress(100);
+                    session.notify('No alignments found to diagonalize', 'warning');
+                    return;
+                }
+                const result = await (0, diagonalize_1.diagonalizeRegions)(alignments, queryView.displayedRegions, async (prog, msg) => {
+                    setProgress(prog);
+                    setMessage(msg);
+                });
+                if (result.newRegions.length > 0) {
+                    setProgress(95);
+                    setMessage('Applying new layout...');
+                    (0, mobx_1.transaction)(() => {
+                        queryView.setDisplayedRegions(result.newRegions);
+                    });
+                    setProgress(100);
+                    setMessage('Diagonalization complete');
+                    setTimeout(() => {
+                        handleClose();
+                    }, 1500);
+                }
+                else {
+                    setError('No regions to reorder');
+                    setProgress(100);
+                    session.notify('No query regions found to reorder', 'warning');
+                }
+            }
+            catch (err) {
+                console.error('Diagonalization error:', err);
+                setError(`Error: ${err}`);
+                setProgress(100);
+                session.notify(`Diagonalization failed: ${err}`, 'error');
+            }
+        };
+        runDiagonalization();
+    }, [model, handleClose]);
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { open: true, title: "Diagonalizing", onClose: handleClose, children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { style: { minWidth: 400 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", gutterBottom: true, color: error ? 'error' : 'inherit', children: error || message }), (0, jsx_runtime_1.jsx)(material_1.LinearProgress, { variant: "determinate", value: progress, style: { marginTop: 16 }, color: error ? 'error' : 'primary' }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "caption", color: "textSecondary", style: { marginTop: 8, display: 'block' }, children: [Math.round(progress), "% complete"] })] }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleClose, color: "primary", disabled: progress < 100, children: progress < 100 ? 'Processing...' : 'Done' }) })] }));
+});
+exports.default = DiagonalizationProgressDialog;