@jbrowse/plugin-linear-comparative-view 4.0.2 → 4.0.4

package/esm/LinearSyntenyDisplay/model.js

@@ -1,5 +1,6 @@
 import { ConfigurationReference, getConf } from '@jbrowse/core/configuration';
 import { types } from '@jbrowse/mobx-state-tree';
+import { applyAlpha, colorSchemes, getQueryColor } from "./drawSyntenyUtils.js";
 import baseModelFactory from "../LinearComparativeDisplay/stateModelFactory.js";
 function stateModelFactory(configSchema) {
     return types
@@ -7,6 +8,8 @@ function stateModelFactory(configSchema) {
         type: types.literal('LinearSyntenyDisplay'),
         configuration: ConfigurationReference(configSchema),
         colorBy: types.optional(types.string, 'default'),
+        alpha: types.optional(types.number, 0.2),
+        minAlignmentLength: types.optional(types.number, 0),
     }))
         .volatile(() => ({
         mainCanvas: null,
@@ -17,8 +20,6 @@ function stateModelFactory(configSchema) {
         mouseoverId: undefined,
         clickId: undefined,
         cigarMouseoverId: -1,
-        alpha: 0.2,
-        minAlignmentLength: 0,
     }))
         .actions(self => ({
         setFeatPositions(arg) {
@@ -75,6 +76,53 @@ function stateModelFactory(configSchema) {
         get featMap() {
             return Object.fromEntries(self.featPositions.map(f => [f.f.id(), f]));
         },
+        get colorSchemeConfig() {
+            return colorSchemes[self.colorBy] || colorSchemes.default;
+        },
+        get colorMapWithAlpha() {
+            const { alpha } = self;
+            const activeColorMap = this.colorSchemeConfig.cigarColors;
+            return {
+                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),
+            };
+        },
+        get posColorWithAlpha() {
+            const posColor = self.colorBy === 'strand' ? colorSchemes.strand.posColor : 'red';
+            return applyAlpha(posColor, self.alpha);
+        },
+        get negColorWithAlpha() {
+            const negColor = self.colorBy === 'strand' ? colorSchemes.strand.negColor : 'blue';
+            return applyAlpha(negColor, self.alpha);
+        },
+        get queryColorWithAlphaMap() {
+            const { alpha } = self;
+            const cache = new Map();
+            return (queryName) => {
+                if (!cache.has(queryName)) {
+                    const color = getQueryColor(queryName);
+                    cache.set(queryName, applyAlpha(color, alpha));
+                }
+                return cache.get(queryName);
+            };
+        },
+        get queryTotalLengths() {
+            if (self.minAlignmentLength <= 0) {
+                return undefined;
+            }
+            const lengths = new Map();
+            for (const { f } of self.featPositions) {
+                const queryName = f.get('name') || f.get('id') || f.id();
+                const alignmentLength = Math.abs(f.get('end') - f.get('start'));
+                const currentTotal = lengths.get(queryName) || 0;
+                lengths.set(queryName, currentTotal + alignmentLength);
+            }
+            return lengths;
+        },
     }))
         .actions(self => ({
         afterAttach() {

package/esm/LinearSyntenyView/model.d.ts

@@ -53,11 +53,14 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         lastTrackDragY: undefined | number;
         volatileError: unknown;
         scaleFactor: number;
+        targetBpPerPx: number | undefined;
         trackRefs: Record<string, HTMLDivElement>;
         coarseDynamicBlocks: import("@jbrowse/core/util/blockTypes").BaseBlock[];
         coarseTotalBp: number;
         leftOffset: undefined | import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").BpOffset;
         rightOffset: undefined | import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").BpOffset;
+        isScalebarRefNameMenuOpen: boolean;
+        scalebarRefNameClickPending: boolean;
     } & {
         readonly pinnedTracks: any[];
         readonly unpinnedTracks: any[];
@@ -111,6 +114,8 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         setShowCytobands(flag: boolean): void;
         setWidth(newWidth: number): void;
         setError(error: unknown): void;
+        setIsScalebarRefNameMenuOpen(isOpen: boolean): void;
+        setScalebarRefNameClickPending(pending: boolean): void;
         setHideHeader(b: boolean): void;
         setHideHeaderOverview(b: boolean): void;
         setHideNoTracksActive(b: boolean): void;
@@ -150,6 +155,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         setDraggingTrackId(idx?: string): void;
         setLastTrackDragY(y: number): void;
         setScaleFactor(factor: number): void;
+        setTargetBpPerPx(target: number | undefined): void;
         clearView(): void;
         setInit(arg?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").InitState): void;
         exportSvg(opts?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").ExportSvgOptions): Promise<void>;
@@ -171,6 +177,9 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         readonly visibleLocStrings: string;
         readonly coarseVisibleLocStrings: string;
         readonly coarseTotalBpDisplayStr: string;
+        readonly effectiveBpPerPx: number;
+        readonly effectiveTotalBp: number;
+        readonly effectiveTotalBpDisplayStr: string;
     } & {
         setCoarseDynamicBlocks(blocks: import("@jbrowse/core/util/blockTypes").BlockSet): void;
     } & {
@@ -182,8 +191,8 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         }): Promise<void>;
         navToLocation(parsedLocString: import("@jbrowse/core/util").ParsedLocString, assemblyName?: string, grow?: number): Promise<void>;
         navToLocations(regions: import("@jbrowse/core/util").ParsedLocString[], assemblyName?: string, grow?: number): Promise<void>;
-        navTo(query: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").NavLocation): void;
-        navToMultiple(locations: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").NavLocation[]): void;
+        navTo(query: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").NavLocation, grow?: number): void;
+        navToMultiple(locations: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").NavLocation[], grow?: number): void;
     } & {
         rubberBandMenuItems(): import("@jbrowse/core/ui").MenuItem[];
         bpToPx({ refName, coord, regionNumber, }: {
@@ -349,21 +358,30 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
             muiName: string;
         };
         helpText: string;
+        subMenu?: undefined;
         type?: undefined;
         checked?: undefined;
-        subMenu?: undefined;
-    } | {
-        label: string;
-        type: string;
-        checked: boolean;
-        onClick: () => void;
-        helpText: string;
-        description?: undefined;
-        icon?: undefined;
-        subMenu?: undefined;
     } | {
         label: string;
         subMenu: ({
+            label: string;
+            onClick: () => void;
+            description: string;
+            icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+                muiName: string;
+            };
+            helpText: string;
+            type?: undefined;
+            checked?: undefined;
+        } | {
+            label: string;
+            type: string;
+            checked: boolean;
+            onClick: () => void;
+            helpText: string;
+            description?: undefined;
+            icon?: undefined;
+        } | {
             label: string;
             checked: boolean;
             type: string;
@@ -403,11 +421,11 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
             muiName: string;
         };
         onClick: () => void;
-        helpText: string;
         description?: undefined;
+        helpText?: undefined;
+        subMenu?: 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;
@@ -471,11 +489,14 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         lastTrackDragY: undefined | number;
         volatileError: unknown;
         scaleFactor: number;
+        targetBpPerPx: number | undefined;
         trackRefs: Record<string, HTMLDivElement>;
         coarseDynamicBlocks: import("@jbrowse/core/util/blockTypes").BaseBlock[];
         coarseTotalBp: number;
         leftOffset: undefined | import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").BpOffset;
         rightOffset: undefined | import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").BpOffset;
+        isScalebarRefNameMenuOpen: boolean;
+        scalebarRefNameClickPending: boolean;
     } & {
         readonly pinnedTracks: any[];
         readonly unpinnedTracks: any[];
@@ -529,6 +550,8 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         setShowCytobands(flag: boolean): void;
         setWidth(newWidth: number): void;
         setError(error: unknown): void;
+        setIsScalebarRefNameMenuOpen(isOpen: boolean): void;
+        setScalebarRefNameClickPending(pending: boolean): void;
         setHideHeader(b: boolean): void;
         setHideHeaderOverview(b: boolean): void;
         setHideNoTracksActive(b: boolean): void;
@@ -568,6 +591,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         setDraggingTrackId(idx?: string): void;
         setLastTrackDragY(y: number): void;
         setScaleFactor(factor: number): void;
+        setTargetBpPerPx(target: number | undefined): void;
         clearView(): void;
         setInit(arg?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").InitState): void;
         exportSvg(opts?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").ExportSvgOptions): Promise<void>;
@@ -589,6 +613,9 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         readonly visibleLocStrings: string;
         readonly coarseVisibleLocStrings: string;
         readonly coarseTotalBpDisplayStr: string;
+        readonly effectiveBpPerPx: number;
+        readonly effectiveTotalBp: number;
+        readonly effectiveTotalBpDisplayStr: string;
     } & {
         setCoarseDynamicBlocks(blocks: import("@jbrowse/core/util/blockTypes").BlockSet): void;
     } & {
@@ -600,8 +627,8 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         }): Promise<void>;
         navToLocation(parsedLocString: import("@jbrowse/core/util").ParsedLocString, assemblyName?: string, grow?: number): Promise<void>;
         navToLocations(regions: import("@jbrowse/core/util").ParsedLocString[], assemblyName?: string, grow?: number): Promise<void>;
-        navTo(query: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").NavLocation): void;
-        navToMultiple(locations: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").NavLocation[]): void;
+        navTo(query: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").NavLocation, grow?: number): void;
+        navToMultiple(locations: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").NavLocation[], grow?: number): void;
     } & {
         rubberBandMenuItems(): import("@jbrowse/core/ui").MenuItem[];
         bpToPx({ refName, coord, regionNumber, }: {
@@ -740,11 +767,14 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         lastTrackDragY: undefined | number;
         volatileError: unknown;
         scaleFactor: number;
+        targetBpPerPx: number | undefined;
         trackRefs: Record<string, HTMLDivElement>;
         coarseDynamicBlocks: import("@jbrowse/core/util/blockTypes").BaseBlock[];
         coarseTotalBp: number;
         leftOffset: undefined | import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").BpOffset;
         rightOffset: undefined | import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").BpOffset;
+        isScalebarRefNameMenuOpen: boolean;
+        scalebarRefNameClickPending: boolean;
     } & {
         readonly pinnedTracks: any[];
         readonly unpinnedTracks: any[];
@@ -798,6 +828,8 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         setShowCytobands(flag: boolean): void;
         setWidth(newWidth: number): void;
         setError(error: unknown): void;
+        setIsScalebarRefNameMenuOpen(isOpen: boolean): void;
+        setScalebarRefNameClickPending(pending: boolean): void;
         setHideHeader(b: boolean): void;
         setHideHeaderOverview(b: boolean): void;
         setHideNoTracksActive(b: boolean): void;
@@ -837,6 +869,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         setDraggingTrackId(idx?: string): void;
         setLastTrackDragY(y: number): void;
         setScaleFactor(factor: number): void;
+        setTargetBpPerPx(target: number | undefined): void;
         clearView(): void;
         setInit(arg?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").InitState): void;
         exportSvg(opts?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").ExportSvgOptions): Promise<void>;
@@ -858,6 +891,9 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         readonly visibleLocStrings: string;
         readonly coarseVisibleLocStrings: string;
         readonly coarseTotalBpDisplayStr: string;
+        readonly effectiveBpPerPx: number;
+        readonly effectiveTotalBp: number;
+        readonly effectiveTotalBpDisplayStr: string;
     } & {
         setCoarseDynamicBlocks(blocks: import("@jbrowse/core/util/blockTypes").BlockSet): void;
     } & {
@@ -869,8 +905,8 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         }): Promise<void>;
         navToLocation(parsedLocString: import("@jbrowse/core/util").ParsedLocString, assemblyName?: string, grow?: number): Promise<void>;
         navToLocations(regions: import("@jbrowse/core/util").ParsedLocString[], assemblyName?: string, grow?: number): Promise<void>;
-        navTo(query: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").NavLocation): void;
-        navToMultiple(locations: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").NavLocation[]): void;
+        navTo(query: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").NavLocation, grow?: number): void;
+        navToMultiple(locations: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types.ts").NavLocation[], grow?: number): void;
     } & {
         rubberBandMenuItems(): import("@jbrowse/core/ui").MenuItem[];
         bpToPx({ refName, coord, regionNumber, }: {

package/esm/LinearSyntenyView/model.js

@@ -90,13 +90,6 @@ export default function stateModelFactory(pluginManager) {
                         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: 'Re-order chromosomes',
                         onClick: () => {
@@ -113,39 +106,46 @@ export default function stateModelFactory(pluginManager) {
                         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: 'Show dynamic controls',
-                        type: 'checkbox',
-                        checked: self.showDynamicControls,
-                        onClick: () => {
-                            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',
+                        label: 'Show...',
                         subMenu: [
                             {
-                                label: 'Draw CIGAR',
+                                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: 'Show dynamic controls',
+                                type: 'checkbox',
+                                checked: self.showDynamicControls,
+                                onClick: () => {
+                                    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: 'Show CIGAR insertions/deletions',
                                 checked: self.drawCIGAR,
                                 type: 'checkbox',
-                                description: 'If disabled, only draws the broad scale CIGAR match',
+                                description: 'If disabled, only shows 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',
+                                label: 'Show CIGAR matches only',
                                 checked: self.drawCIGARMatchesOnly,
                                 type: 'checkbox',
-                                description: 'If enabled, it hides the insertions and deletions in the CIGAR strings, helps with divergent',
+                                description: 'If enabled, hides the insertions and deletions in the CIGAR strings',
                                 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',
+                                label: 'Show curved lines',
                                 type: 'checkbox',
                                 checked: self.drawCurves,
                                 icon: Curves,
@@ -155,7 +155,7 @@ export default function stateModelFactory(pluginManager) {
                                 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',
+                                label: 'Show location markers',
                                 type: 'checkbox',
                                 checked: self.drawLocationMarkers,
                                 description: 'Draw periodic markers to show location within large matches',
@@ -188,7 +188,6 @@ 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/SyntenyFeatureDetail/LinkToSyntenyView.js

@@ -10,8 +10,8 @@ const LinkToSyntenyView = observer(function LinkToSyntenyView({ model, feat, })
                         event.preventDefault();
                         const { views } = view;
                         if (level !== undefined) {
-                            views[level]?.navTo(feat);
-                            views[level + 1]?.navTo(feat.mate);
+                            views[level]?.navTo(feat, 0.2);
+                            views[level + 1]?.navTo(feat.mate, 0.2);
                         }
                         else {
                             const f1 = feat;
@@ -30,8 +30,8 @@ const LinkToSyntenyView = observer(function LinkToSyntenyView({ model, feat, })
                                         : '',
                                 ].join(' ... '));
                             }
-                            v1?.navTo(f1);
-                            v2?.navTo(f2);
+                            v1?.navTo(f1, 0.2);
+                            v2?.navTo(f2, 0.2);
                         }
                     }, children: "Center view on this feature" }) })) : null, _jsx("li", { children: _jsx(Link, { href: "#", onClick: event => {
                         event.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-comparative-view",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "description": "JBrowse 2 linear comparative view",
   "keywords": [
     "jbrowse",
@@ -28,9 +28,9 @@
     "file-saver-es": "^2.0.5",
     "mobx": "^6.15.0",
     "mobx-react": "^9.2.1",
-    "@jbrowse/core": "^4.0.2",
-    "@jbrowse/plugin-alignments": "^4.0.2",
-    "@jbrowse/plugin-linear-genome-view": "^4.0.2"
+    "@jbrowse/plugin-alignments": "^4.0.4",
+    "@jbrowse/plugin-linear-genome-view": "^4.0.4",
+    "@jbrowse/core": "^4.0.4"
   },
   "peerDependencies": {
     "react": ">=18.0.0",