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

package/esm/LinearSyntenyView/model.d.ts

@@ -13,6 +13,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
     showIntraviewLinks: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     linkViews: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     interactiveOverlay: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showDynamicControls: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     levels: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
         id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
         type: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -285,6 +286,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
     drawCIGAR: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     drawCIGARMatchesOnly: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     drawCurves: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    drawLocationMarkers: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
 }, {
     width: number;
 } & {
@@ -308,6 +310,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
     removeView(view: import("@jbrowse/plugin-linear-genome-view").LinearGenomeViewModel): void;
     setLevelHeight(newHeight: number, level?: number): number;
     setLinkViews(arg: boolean): void;
+    setShowDynamicControls(arg: boolean): void;
     activateTrackSelector(level: number): import("@jbrowse/core/util").Widget;
     toggleTrack(trackId: string, level?: number): void;
     showTrack(trackId: string, level?: number, initialSnapshot?: {}): void;
@@ -333,6 +336,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
     setDrawCurves(arg: boolean): void;
     setDrawCIGAR(arg: boolean): void;
     setDrawCIGARMatchesOnly(arg: boolean): void;
+    setDrawLocationMarkers(arg: boolean): void;
     showAllRegions(): void;
 } & {
     exportSvg(opts: ExportSvgOptions): Promise<void>;
@@ -344,40 +348,66 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
-        checked?: undefined;
+        helpText: string;
         type?: undefined;
+        checked?: undefined;
+        subMenu?: undefined;
     } | {
         label: string;
-        checked: boolean;
         type: string;
-        description: string;
+        checked: boolean;
         onClick: () => void;
+        helpText: string;
+        description?: undefined;
         icon?: undefined;
+        subMenu?: undefined;
     } | {
         label: string;
-        type: string;
-        checked: boolean;
-        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-            muiName: string;
-        };
-        onClick: () => void;
+        subMenu: ({
+            label: string;
+            checked: boolean;
+            type: string;
+            description: string;
+            onClick: () => void;
+            helpText: string;
+            icon?: undefined;
+        } | {
+            label: string;
+            type: string;
+            checked: boolean;
+            icon: typeof Curves;
+            onClick: () => void;
+            helpText: string;
+            description?: undefined;
+        })[];
+        onClick?: undefined;
         description?: undefined;
+        icon?: undefined;
+        helpText?: undefined;
+        type?: undefined;
+        checked?: undefined;
     } | {
         label: string;
         type: string;
         checked: boolean;
-        icon: typeof Curves;
+        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
         onClick: () => void;
+        helpText: string;
         description?: undefined;
+        subMenu?: undefined;
     } | {
         label: string;
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
         onClick: () => void;
+        helpText: string;
         description?: undefined;
-        checked?: undefined;
         type?: undefined;
+        checked?: undefined;
+        subMenu?: undefined;
     })[];
     menuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
         label: string;
@@ -399,6 +429,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
     showIntraviewLinks: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     linkViews: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     interactiveOverlay: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showDynamicControls: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     levels: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
         id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
         type: import("mobx-state-tree").IType<string | undefined, string, string>;

package/esm/LinearSyntenyView/model.js

@@ -3,6 +3,7 @@ import { getSession } from '@jbrowse/core/util';
 import CropFreeIcon from '@mui/icons-material/CropFree';
 import LinkIcon from '@mui/icons-material/Link';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
+import ShuffleIcon from '@mui/icons-material/Shuffle';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import { saveAs } from 'file-saver';
 import { observable, transaction } from 'mobx';
@@ -10,6 +11,7 @@ import { types } from 'mobx-state-tree';
 import { Curves } from './components/Icons';
 import baseModel from '../LinearComparativeView/model';
 const ExportSvgDialog = lazy(() => import('./components/ExportSvgDialog'));
+const DiagonalizationProgressDialog = lazy(() => import('./components/DiagonalizationProgressDialog'));
 export default function stateModelFactory(pluginManager) {
     return types
         .compose('LinearSyntenyView', baseModel(pluginManager), types.model({
@@ -17,6 +19,7 @@ export default function stateModelFactory(pluginManager) {
         drawCIGAR: true,
         drawCIGARMatchesOnly: false,
         drawCurves: false,
+        drawLocationMarkers: false,
     }))
         .volatile(() => ({
         importFormSyntenyTrackSelections: observable.array(),
@@ -40,6 +43,9 @@ export default function stateModelFactory(pluginManager) {
         setDrawCIGARMatchesOnly(arg) {
             self.drawCIGARMatchesOnly = arg;
         },
+        setDrawLocationMarkers(arg) {
+            self.drawLocationMarkers = arg;
+        },
         showAllRegions() {
             transaction(() => {
                 for (const view of self.views) {
@@ -68,30 +74,83 @@ export default function stateModelFactory(pluginManager) {
                         onClick: self.squareView,
                         description: 'Makes both views use the same zoom level, adjusting to the average of each',
                         icon: CropFreeIcon,
+                        helpText: 'Square view synchronizes the zoom levels of both genome views by calculating the average zoom level and applying it to both panels. This helps ensure features are displayed at comparable scales, making it easier to compare syntenic regions visually.',
                     },
                     {
                         label: 'Show all regions',
                         onClick: self.showAllRegions,
                         description: 'Show entire genome assemblies',
                         icon: VisibilityIcon,
+                        helpText: 'This command will zoom out all views to display the entire genome assemblies. This is useful when you want to get a high-level overview of syntenic relationships across whole genomes or when you need to reset the view after zooming into specific regions.',
                     },
                     {
-                        label: 'Draw CIGAR',
-                        checked: self.drawCIGAR,
-                        type: 'checkbox',
-                        description: 'If disabled, only draws the broad scale CIGAR match',
+                        label: 'Re-order chromosomes',
                         onClick: () => {
-                            self.setDrawCIGAR(!self.drawCIGAR);
+                            getSession(self).queueDialog(handleClose => [
+                                DiagonalizationProgressDialog,
+                                {
+                                    handleClose,
+                                    model: self,
+                                },
+                            ]);
                         },
+                        icon: ShuffleIcon,
+                        description: "Reorder and reorient query regions to minimize crossing lines, also known as 'diagonalizing'",
+                        helpText: "This operation 'diagonalizes' the data which algorithmically reorders and reorients chromosomes to minimize crossing synteny lines, creating a more diagonal pattern. This makes it easier to identify large-scale genomic rearrangements, inversions, and translocations. The process may take a few moments for large genomes.",
                     },
                     {
-                        label: 'Draw only CIGAR matches',
-                        checked: self.drawCIGARMatchesOnly,
+                        label: 'Show dynamic controls',
                         type: 'checkbox',
-                        description: 'If enabled, it hides the insertions and deletions in the CIGAR strings, helps with divergent',
+                        checked: self.showDynamicControls,
                         onClick: () => {
-                            self.setDrawCIGARMatchesOnly(!self.drawCIGARMatchesOnly);
+                            self.setShowDynamicControls(!self.showDynamicControls);
                         },
+                        helpText: 'Toggle visibility of dynamic controls like opacity and minimum length sliders. These controls allow you to adjust synteny visualization parameters in real-time.',
+                    },
+                    {
+                        label: 'Draw',
+                        subMenu: [
+                            {
+                                label: 'Draw CIGAR',
+                                checked: self.drawCIGAR,
+                                type: 'checkbox',
+                                description: 'If disabled, only draws the broad scale CIGAR match',
+                                onClick: () => {
+                                    self.setDrawCIGAR(!self.drawCIGAR);
+                                },
+                                helpText: 'CIGAR strings encode detailed alignment information including matches, insertions, and deletions. When enabled, this option visualizes the fine-scale variations in syntenic alignments. Disable this for a cleaner view that shows only broad syntenic blocks.',
+                            },
+                            {
+                                label: 'Draw only CIGAR matches',
+                                checked: self.drawCIGARMatchesOnly,
+                                type: 'checkbox',
+                                description: 'If enabled, it hides the insertions and deletions in the CIGAR strings, helps with divergent',
+                                onClick: () => {
+                                    self.setDrawCIGARMatchesOnly(!self.drawCIGARMatchesOnly);
+                                },
+                                helpText: 'When comparing divergent genomes, showing all insertions and deletions can clutter the view. This option filters the CIGAR visualization to show only the matching regions, providing a cleaner view of conserved syntenic blocks while hiding small-scale indels.',
+                            },
+                            {
+                                label: 'Draw curved lines',
+                                type: 'checkbox',
+                                checked: self.drawCurves,
+                                icon: Curves,
+                                onClick: () => {
+                                    self.setDrawCurves(!self.drawCurves);
+                                },
+                                helpText: 'Toggle between straight lines and smooth bezier curves for synteny connections. Curved lines can make the visualization more aesthetically pleasing and may help reduce visual clutter when many syntenic regions are displayed. Straight lines provide a more direct representation.',
+                            },
+                            {
+                                label: 'Draw location markers',
+                                type: 'checkbox',
+                                checked: self.drawLocationMarkers,
+                                description: 'Draw periodic markers to show location within large matches',
+                                onClick: () => {
+                                    self.setDrawLocationMarkers(!self.drawLocationMarkers);
+                                },
+                                helpText: 'Location markers add periodic visual indicators along long syntenic blocks, helping you track position and scale within large conserved regions. This is particularly useful when examining very long syntenic matches where it can be difficult to gauge relative position.',
+                            },
+                        ],
                     },
                     {
                         label: 'Link views',
@@ -101,15 +160,7 @@ export default function stateModelFactory(pluginManager) {
                         onClick: () => {
                             self.setLinkViews(!self.linkViews);
                         },
-                    },
-                    {
-                        label: 'Use curved lines',
-                        type: 'checkbox',
-                        checked: self.drawCurves,
-                        icon: Curves,
-                        onClick: () => {
-                            self.setDrawCurves(!self.drawCurves);
-                        },
+                        helpText: 'When linked, panning and zooming in one genome view will automatically adjust the other view to maintain the correspondence shown by synteny lines. This makes it easier to explore syntenic regions interactively. Unlink views to navigate each genome independently.',
                     },
                     {
                         label: 'Export SVG',
@@ -123,6 +174,7 @@ export default function stateModelFactory(pluginManager) {
                                 },
                             ]);
                         },
+                        helpText: 'Export the current synteny view as a scalable vector graphics (SVG) file. SVG format preserves quality at any zoom level and can be edited in vector graphics software like Inkscape or Adobe Illustrator. Perfect for creating publication-quality figures.',
                     },
                 ];
             },

package/esm/LinearSyntenyView/util/diagonalize.d.ts

@@ -0,0 +1,27 @@
+export interface AlignmentData {
+    queryRefName: string;
+    refRefName: string;
+    queryStart: number;
+    queryEnd: number;
+    refStart: number;
+    refEnd: number;
+    strand: number;
+}
+export interface Region {
+    refName: string;
+    start: number;
+    end: number;
+    reversed?: boolean;
+    assemblyName: string;
+}
+export interface DiagonalizationResult {
+    newRegions: Region[];
+    stats: {
+        totalAlignments: number;
+        regionsProcessed: number;
+        regionsReordered: number;
+        regionsReversed: number;
+    };
+}
+export type ProgressCallback = (progress: number, message: string) => void | Promise<void>;
+export declare function diagonalizeRegions(alignments: AlignmentData[], currentRegions: Region[], progressCallback?: ProgressCallback): Promise<DiagonalizationResult>;

package/esm/LinearSyntenyView/util/diagonalize.js

@@ -0,0 +1,88 @@
+export async function diagonalizeRegions(alignments, currentRegions, progressCallback) {
+    const updateProgress = async (progress, message) => {
+        if (progressCallback) {
+            await progressCallback(progress, message);
+        }
+    };
+    await 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;
+    }
+    await 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,
+        });
+    }
+    await 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;
+    });
+    await 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++;
+            }
+        }
+        else {
+            console.warn(`Could not find region for refName: ${refName}`);
+        }
+    }
+    await updateProgress(100, 'Diagonalization complete!');
+    return {
+        newRegions: newQueryRegions,
+        stats: {
+            totalAlignments: alignments.length,
+            regionsProcessed: queryOrdering.length,
+            regionsReordered: newQueryRegions.length,
+            regionsReversed,
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-comparative-view",
-  "version": "3.6.5",
+  "version": "3.7.0",
   "description": "JBrowse 2 linear comparative view",
   "keywords": [
     "jbrowse",
@@ -36,9 +36,9 @@
     "clean": "rimraf dist esm *.tsbuildinfo"
   },
   "dependencies": {
-    "@jbrowse/core": "^3.6.5",
-    "@jbrowse/plugin-alignments": "^3.6.5",
-    "@jbrowse/plugin-linear-genome-view": "^3.6.5",
+    "@jbrowse/core": "^3.7.0",
+    "@jbrowse/plugin-alignments": "^3.7.0",
+    "@jbrowse/plugin-linear-genome-view": "^3.7.0",
     "@mui/icons-material": "^7.0.0",
     "@mui/material": "^7.0.0",
     "copy-to-clipboard": "^3.3.1",
@@ -59,5 +59,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "354d0a87b757b4d84f824b47507662f6f3a1693f"
+  "gitHead": "85bdd0d58286b7adbfd408146b15847676317635"
 }