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

package/dist/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>;
@@ -78,8 +79,8 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         readonly interRegionPaddingWidth: number;
         readonly assemblyNames: string[];
         readonly assemblyDisplayNames: string[];
-        readonly isTopLevelView: import("@jbrowse/core/util").AbstractViewModel | undefined;
-        readonly stickyViewHeaders: boolean | undefined;
+        readonly isTopLevelView: boolean;
+        readonly stickyViewHeaders: boolean;
         readonly rubberbandTop: number;
         readonly pinnedTracksTop: number;
     } & {
@@ -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>;
@@ -464,8 +495,8 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         readonly interRegionPaddingWidth: number;
         readonly assemblyNames: string[];
         readonly assemblyDisplayNames: string[];
-        readonly isTopLevelView: import("@jbrowse/core/util").AbstractViewModel | undefined;
-        readonly stickyViewHeaders: boolean | undefined;
+        readonly isTopLevelView: boolean;
+        readonly stickyViewHeaders: boolean;
         readonly rubberbandTop: number;
         readonly pinnedTracksTop: number;
     } & {

package/dist/LinearSyntenyView/model.js

@@ -42,6 +42,7 @@ const util_1 = require("@jbrowse/core/util");
 const CropFree_1 = __importDefault(require("@mui/icons-material/CropFree"));
 const Link_1 = __importDefault(require("@mui/icons-material/Link"));
 const PhotoCamera_1 = __importDefault(require("@mui/icons-material/PhotoCamera"));
+const Shuffle_1 = __importDefault(require("@mui/icons-material/Shuffle"));
 const Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
 const file_saver_1 = require("file-saver");
 const mobx_1 = require("mobx");
@@ -49,6 +50,7 @@ const mobx_state_tree_1 = require("mobx-state-tree");
 const Icons_1 = require("./components/Icons");
 const model_1 = __importDefault(require("../LinearComparativeView/model"));
 const ExportSvgDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ExportSvgDialog'))));
+const DiagonalizationProgressDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/DiagonalizationProgressDialog'))));
 function stateModelFactory(pluginManager) {
     return mobx_state_tree_1.types
         .compose('LinearSyntenyView', (0, model_1.default)(pluginManager), mobx_state_tree_1.types.model({
@@ -56,6 +58,7 @@ function stateModelFactory(pluginManager) {
         drawCIGAR: true,
         drawCIGARMatchesOnly: false,
         drawCurves: false,
+        drawLocationMarkers: false,
     }))
         .volatile(() => ({
         importFormSyntenyTrackSelections: mobx_1.observable.array(),
@@ -79,6 +82,9 @@ function stateModelFactory(pluginManager) {
         setDrawCIGARMatchesOnly(arg) {
             self.drawCIGARMatchesOnly = arg;
         },
+        setDrawLocationMarkers(arg) {
+            self.drawLocationMarkers = arg;
+        },
         showAllRegions() {
             (0, mobx_1.transaction)(() => {
                 for (const view of self.views) {
@@ -107,30 +113,83 @@ function stateModelFactory(pluginManager) {
                         onClick: self.squareView,
                         description: 'Makes both views use the same zoom level, adjusting to the average of each',
                         icon: CropFree_1.default,
+                        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: Visibility_1.default,
+                        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);
+                            (0, util_1.getSession)(self).queueDialog(handleClose => [
+                                DiagonalizationProgressDialog,
+                                {
+                                    handleClose,
+                                    model: self,
+                                },
+                            ]);
                         },
+                        icon: Shuffle_1.default,
+                        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: Icons_1.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',
@@ -140,15 +199,7 @@ function stateModelFactory(pluginManager) {
                         onClick: () => {
                             self.setLinkViews(!self.linkViews);
                         },
-                    },
-                    {
-                        label: 'Use curved lines',
-                        type: 'checkbox',
-                        checked: self.drawCurves,
-                        icon: Icons_1.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',
@@ -162,6 +213,7 @@ 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/dist/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/dist/LinearSyntenyView/util/diagonalize.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.diagonalizeRegions = diagonalizeRegions;
+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/esm/LGVSyntenyDisplay/configSchemaF.js

@@ -8,7 +8,7 @@ function configSchemaF(pluginManager) {
         const l2name = (mate === null || mate === void 0 ? void 0 : mate.name) || (mate === null || mate === void 0 ? void 0 : mate.id);
         return [
             l1name ? `Name1: ${l1name}` : '',
-            l2name ? `Name1: ${l2name}` : '',
+            l2name ? `Name2: ${l2name}` : '',
             `Loc1: ${assembleLocString({
                 refName: f.get('refName'),
                 start: f.get('start'),

package/esm/LGVSyntenyDisplay/model.d.ts

@@ -182,6 +182,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
+    mouseoverExtraInformation: string | undefined;
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | Feature;
 } & {
@@ -196,9 +197,22 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, Feature>;
     readonly featureUnderMouse: Feature | undefined;
+    readonly layoutFeatures: import("@jbrowse/core/util/compositeMap").default<string, [number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]>;
     getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
-    getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
-    searchFeatureByID(id: string): [number, number, number, number] | undefined;
+    getFeatureByID(blockKey: string, id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
+    searchFeatureByID(id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
 } & {
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     deleteBlock(key: string): void;
@@ -207,6 +221,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string): void;
     setContextMenuFeature(feature?: Feature): void;
+    setMouseoverExtraInformation(extra?: string): void;
 } & {
     reload(): Promise<void>;
 } & {

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

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

package/esm/LinearComparativeView/components/ColorBySelector.js

@@ -0,0 +1,49 @@
+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 ({ model, }) {
+    var _a, _b, _c;
+    const firstDisplay = (_b = (_a = model.levels[0]) === null || _a === void 0 ? void 0 : _a.tracks[0]) === null || _b === void 0 ? void 0 : _b.displays[0];
+    const colorBy = (_c = firstDisplay === null || firstDisplay === void 0 ? void 0 : firstDisplay.colorBy) !== null && _c !== void 0 ? _c : 'default';
+    const setColorBy = (value) => {
+        for (const level of model.levels) {
+            for (const track of level.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 with CIGAR operation coloring. Insertions, deletions, matches, and mismatches are shown in different colors with transparency.',
+            },
+            {
+                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/LinearComparativeView/components/Header.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
@@ -7,17 +7,22 @@ import SearchIcon from '@mui/icons-material/Search';
 import { FormGroup } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
+import ColorBySelector from './ColorBySelector';
 import HeaderSearchBoxes from './HeaderSearchBoxes';
+import MinLengthSlider from './MinLengthSlider';
+import OpacitySlider from './OpacitySlider';
 const useStyles = makeStyles()({
     inline: {
         display: 'inline-flex',
     },
 });
 const Header = observer(function ({ model, }) {
+    var _a, _b;
     const { classes } = useStyles();
-    const { views } = model;
+    const { views, levels, showDynamicControls } = model;
     const [showSearchBoxes, setShowSearchBoxes] = useState(views.length <= 3);
     const [sideBySide, setSideBySide] = useState(views.length <= 3);
+    const hasDisplays = (_b = (_a = levels[0]) === null || _a === void 0 ? void 0 : _a.tracks[0]) === null || _b === void 0 ? void 0 : _b.displays[0];
     return (_jsxs(FormGroup, { row: true, children: [_jsx(CascadingMenuButton, { menuItems: [
                     {
                         label: 'Synteny track selectors',
@@ -72,6 +77,6 @@ const Header = observer(function ({ model, }) {
                             setSideBySide(!sideBySide);
                         },
                     },
-                ], children: _jsx(SearchIcon, {}) }), showSearchBoxes ? (_jsx("span", { className: sideBySide ? classes.inline : undefined, children: views.map(view => (_jsx(HeaderSearchBoxes, { view: view }, view.id))) })) : null] }));
+                ], children: _jsx(SearchIcon, {}) }), hasDisplays && showDynamicControls ? (_jsxs(_Fragment, { children: [_jsx(ColorBySelector, { model: model }), _jsx(OpacitySlider, { model: model }), _jsx(MinLengthSlider, { model: model })] })) : null, showSearchBoxes ? (_jsx("span", { className: sideBySide ? classes.inline : undefined, children: views.map(view => (_jsx(HeaderSearchBoxes, { view: view }, view.id))) })) : null] }));
 });
 export default Header;

package/esm/LinearComparativeView/components/MinLengthSlider.d.ts

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

package/esm/LinearComparativeView/components/MinLengthSlider.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, Slider, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+import SliderTooltip from './SliderTooltip';
+const useStyles = makeStyles()({
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: 16,
+        marginRight: 16,
+        minWidth: 150,
+    },
+});
+const MinLengthSlider = observer(function ({ model, }) {
+    var _a, _b, _c;
+    const { classes } = useStyles();
+    const { levels } = model;
+    const firstDisplay = (_b = (_a = levels[0]) === null || _a === void 0 ? void 0 : _a.tracks[0]) === null || _b === void 0 ? void 0 : _b.displays[0];
+    const minAlignmentLength = (_c = firstDisplay === null || firstDisplay === void 0 ? void 0 : firstDisplay.minAlignmentLength) !== null && _c !== void 0 ? _c : 0;
+    const [minLengthValue, setMinLengthValue] = useState(Math.log2(Math.max(1, minAlignmentLength)) * 100);
+    useEffect(() => {
+        setMinLengthValue(Math.log2(Math.max(1, minAlignmentLength)) * 100);
+    }, [minAlignmentLength]);
+    return (_jsxs(Box, { className: classes.container, children: [_jsx(Typography, { variant: "body2", style: { marginRight: 8 }, children: "Min length:" }), _jsx(Slider, { value: minLengthValue, onChange: (_, val) => {
+                    setMinLengthValue(val);
+                }, onChangeCommitted: () => {
+                    const newMinLength = Math.round(2 ** (minLengthValue / 100));
+                    for (const level of levels) {
+                        for (const track of level.tracks) {
+                            for (const display of track.displays) {
+                                ;
+                                display.setMinAlignmentLength(newMinLength);
+                            }
+                        }
+                    }
+                }, min: 0, max: Math.log2(1000000) * 100, valueLabelDisplay: "auto", valueLabelFormat: newValue => Math.round(2 ** (newValue / 100)).toLocaleString(), size: "small", style: { minWidth: 100 }, slots: {
+                    valueLabel: SliderTooltip,
+                } })] }));
+});
+export default MinLengthSlider;

package/esm/LinearComparativeView/components/OpacitySlider.d.ts

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

package/esm/LinearComparativeView/components/OpacitySlider.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Slider, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+import SliderTooltip from './SliderTooltip';
+const useStyles = makeStyles()({
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: 16,
+        marginRight: 16,
+        minWidth: 150,
+    },
+});
+const OpacitySlider = observer(function ({ model, }) {
+    var _a, _b, _c;
+    const { classes } = useStyles();
+    const { levels } = model;
+    const firstDisplay = (_b = (_a = levels[0]) === null || _a === void 0 ? void 0 : _a.tracks[0]) === null || _b === void 0 ? void 0 : _b.displays[0];
+    const alpha = (_c = firstDisplay === null || firstDisplay === void 0 ? void 0 : firstDisplay.alpha) !== null && _c !== void 0 ? _c : 1;
+    const exponent = 3;
+    const alphaToSlider = (a) => Math.pow(a, 1 / exponent);
+    const sliderToAlpha = (s) => Math.pow(s, exponent);
+    const sliderValue = alphaToSlider(alpha);
+    const handleAlphaChange = (_event, value) => {
+        const sliderVal = typeof value === 'number' ? value : value[0];
+        const newAlpha = sliderToAlpha(sliderVal);
+        for (const level of levels) {
+            for (const track of level.tracks) {
+                for (const display of track.displays) {
+                    ;
+                    display.setAlpha(newAlpha);
+                }
+            }
+        }
+    };
+    return (_jsxs(Box, { className: classes.container, children: [_jsx(Typography, { variant: "body2", style: { marginRight: 8 }, children: "Opacity:" }), _jsx(Slider, { value: sliderValue, onChange: handleAlphaChange, min: 0, max: 1, step: 0.01, valueLabelDisplay: "auto", size: "small", style: { minWidth: 100 }, slots: {
+                    valueLabel: SliderTooltip,
+                }, valueLabelFormat: (value) => sliderToAlpha(value).toFixed(3) })] }));
+});
+export default OpacitySlider;