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

package/dist/LGVSyntenyDisplay/configSchemaF.js

@@ -10,7 +10,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: ${(0, util_1.assembleLocString)({
                 refName: f.get('refName'),
                 start: f.get('start'),

package/dist/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/dist/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/dist/LinearComparativeView/components/ColorBySelector.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
+const Palette_1 = __importDefault(require("@mui/icons-material/Palette"));
+const mobx_react_1 = require("mobx-react");
+const ColorBySelector = (0, mobx_react_1.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 ((0, jsx_runtime_1.jsx)(CascadingMenuButton_1.default, { 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: (0, jsx_runtime_1.jsx)(Palette_1.default, {}) }));
+});
+exports.default = ColorBySelector;

package/dist/LinearComparativeView/components/Header.js

@@ -12,17 +12,22 @@ const Search_1 = __importDefault(require("@mui/icons-material/Search"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
+const ColorBySelector_1 = __importDefault(require("./ColorBySelector"));
 const HeaderSearchBoxes_1 = __importDefault(require("./HeaderSearchBoxes"));
+const MinLengthSlider_1 = __importDefault(require("./MinLengthSlider"));
+const OpacitySlider_1 = __importDefault(require("./OpacitySlider"));
 const useStyles = (0, mui_1.makeStyles)()({
     inline: {
         display: 'inline-flex',
     },
 });
 const Header = (0, mobx_react_1.observer)(function ({ model, }) {
+    var _a, _b;
     const { classes } = useStyles();
-    const { views } = model;
+    const { views, levels, showDynamicControls } = model;
     const [showSearchBoxes, setShowSearchBoxes] = (0, react_1.useState)(views.length <= 3);
     const [sideBySide, setSideBySide] = (0, react_1.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 ((0, jsx_runtime_1.jsxs)(material_1.FormGroup, { row: true, children: [(0, jsx_runtime_1.jsx)(CascadingMenuButton_1.default, { menuItems: [
                     {
                         label: 'Synteny track selectors',
@@ -77,6 +82,6 @@ const Header = (0, mobx_react_1.observer)(function ({ model, }) {
                             setSideBySide(!sideBySide);
                         },
                     },
-                ], children: (0, jsx_runtime_1.jsx)(Search_1.default, {}) }), showSearchBoxes ? ((0, jsx_runtime_1.jsx)("span", { className: sideBySide ? classes.inline : undefined, children: views.map(view => ((0, jsx_runtime_1.jsx)(HeaderSearchBoxes_1.default, { view: view }, view.id))) })) : null] }));
+                ], children: (0, jsx_runtime_1.jsx)(Search_1.default, {}) }), hasDisplays && showDynamicControls ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorBySelector_1.default, { model: model }), (0, jsx_runtime_1.jsx)(OpacitySlider_1.default, { model: model }), (0, jsx_runtime_1.jsx)(MinLengthSlider_1.default, { model: model })] })) : null, showSearchBoxes ? ((0, jsx_runtime_1.jsx)("span", { className: sideBySide ? classes.inline : undefined, children: views.map(view => ((0, jsx_runtime_1.jsx)(HeaderSearchBoxes_1.default, { view: view }, view.id))) })) : null] }));
 });
 exports.default = Header;

package/dist/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/dist/LinearComparativeView/components/MinLengthSlider.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const SliderTooltip_1 = __importDefault(require("./SliderTooltip"));
+const useStyles = (0, mui_1.makeStyles)()({
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: 16,
+        marginRight: 16,
+        minWidth: 150,
+    },
+});
+const MinLengthSlider = (0, mobx_react_1.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] = (0, react_1.useState)(Math.log2(Math.max(1, minAlignmentLength)) * 100);
+    (0, react_1.useEffect)(() => {
+        setMinLengthValue(Math.log2(Math.max(1, minAlignmentLength)) * 100);
+    }, [minAlignmentLength]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { className: classes.container, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", style: { marginRight: 8 }, children: "Min length:" }), (0, jsx_runtime_1.jsx)(material_1.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_1.default,
+                } })] }));
+});
+exports.default = MinLengthSlider;

package/dist/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/dist/LinearComparativeView/components/OpacitySlider.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const SliderTooltip_1 = __importDefault(require("./SliderTooltip"));
+const useStyles = (0, mui_1.makeStyles)()({
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: 16,
+        marginRight: 16,
+        minWidth: 150,
+    },
+});
+const OpacitySlider = (0, mobx_react_1.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 ((0, jsx_runtime_1.jsxs)(material_1.Box, { className: classes.container, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", style: { marginRight: 8 }, children: "Opacity:" }), (0, jsx_runtime_1.jsx)(material_1.Slider, { value: sliderValue, onChange: handleAlphaChange, min: 0, max: 1, step: 0.01, valueLabelDisplay: "auto", size: "small", style: { minWidth: 100 }, slots: {
+                    valueLabel: SliderTooltip_1.default,
+                }, valueLabelFormat: (value) => sliderToAlpha(value).toFixed(3) })] }));
+});
+exports.default = OpacitySlider;

package/dist/LinearComparativeView/components/RubberbandSpan.js

@@ -29,10 +29,10 @@ const useStyles = (0, mui_1.makeStyles)()(theme => {
 function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, top = 0, sticky = false, }) {
     const { classes } = useStyles();
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [anchorEl ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RubberbandTooltip_1.default, { side: "left", anchorEl: anchorEl, text: leftBpOffset.map((l, idx) => ((0, jsx_runtime_1.jsx)("div", { children: (0, util_1.stringify)(l, true) }, `JSON.stringify(l)-${idx}`))) }), (0, jsx_runtime_1.jsx)(RubberbandTooltip_1.default, { side: "right", anchorEl: anchorEl, text: rightBpOffset.map((l, idx) => ((0, jsx_runtime_1.jsx)("div", { children: (0, util_1.stringify)(l, true) }, `JSON.stringify(l)-${idx}`))) })] })) : null, (0, jsx_runtime_1.jsx)("div", { className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { ref: el => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [anchorEl ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RubberbandTooltip_1.default, { side: "left", anchorEl: anchorEl, text: leftBpOffset.map((l, idx) => ((0, jsx_runtime_1.jsx)("div", { children: (0, util_1.stringify)(l, true) }, `${JSON.stringify(l)}-left-${idx}`))) }), (0, jsx_runtime_1.jsx)(RubberbandTooltip_1.default, { side: "right", anchorEl: anchorEl, text: rightBpOffset.map((l, idx) => ((0, jsx_runtime_1.jsx)("div", { children: (0, util_1.stringify)(l, true) }, `${JSON.stringify(l)}-right-${idx}`))) })] })) : null, (0, jsx_runtime_1.jsx)("div", { className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { ref: el => {
                         setAnchorEl(el);
                     }, variant: "h6", className: classes.rubberbandText, style: {
                         top,
                         position: sticky ? 'sticky' : undefined,
-                    }, children: numOfBpSelected.map((n, i) => ((0, jsx_runtime_1.jsx)("div", { children: (0, util_1.getBpDisplayStr)(n) }, i))) })) : null })] }));
+                    }, children: numOfBpSelected.map((n, i) => ((0, jsx_runtime_1.jsx)("div", { children: (0, util_1.getBpDisplayStr)(n) }, `bpSelectedRow-${i}`))) })) : null })] }));
 }

package/dist/LinearComparativeView/components/SliderTooltip.d.ts

@@ -0,0 +1,2 @@
+import type { SliderValueLabelProps } from '@mui/material';
+export default function SliderTooltip(props: SliderValueLabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/LinearComparativeView/components/SliderTooltip.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SliderTooltip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+function SliderTooltip(props) {
+    const { children, open, value } = props;
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { open: open, enterTouchDelay: 0, placement: "top", title: value, arrow: true, children: children }));
+}

package/dist/LinearComparativeView/components/useRangeSelect.js

@@ -10,6 +10,11 @@ function useRangeSelect(ref, model) {
     const [anchorPosition, setAnchorPosition] = (0, react_1.useState)();
     const [guideX, setGuideX] = (0, react_1.useState)();
     const mouseDragging = startX !== undefined && anchorPosition === undefined;
+    const handleClose = (0, react_1.useCallback)(() => {
+        setAnchorPosition(undefined);
+        setStartX(undefined);
+        setCurrentX(undefined);
+    }, []);
     (0, react_1.useEffect)(() => {
         function computeOffsets(offsetX) {
             if (startX === undefined) {
@@ -32,6 +37,10 @@ function useRangeSelect(ref, model) {
             if (startX !== undefined && ref.current) {
                 const { clientX, clientY } = event;
                 const offsetX = (0, util_1.getRelativeX)(event, ref.current);
+                if (Math.abs(offsetX - startX) <= 3) {
+                    handleClose();
+                    return;
+                }
                 setAnchorPosition({
                     offsetX,
                     clientX,
@@ -57,15 +66,7 @@ function useRangeSelect(ref, model) {
             };
         }
         return () => { };
-    }, [startX, mouseDragging, model, ref]);
-    (0, react_1.useEffect)(() => {
-        if (!mouseDragging &&
-            currentX !== undefined &&
-            startX !== undefined &&
-            Math.abs(currentX - startX) <= 3) {
-            handleClose();
-        }
-    }, [mouseDragging, currentX, startX]);
+    }, [startX, mouseDragging, model, ref, handleClose]);
     function mouseDown(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -84,11 +85,6 @@ function useRangeSelect(ref, model) {
             }
         });
     }
-    function handleClose() {
-        setAnchorPosition(undefined);
-        setStartX(undefined);
-        setCurrentX(undefined);
-    }
     function handleMenuItemClick(_, callback) {
         callback();
         handleClose();

package/dist/LinearComparativeView/model.d.ts

@@ -13,6 +13,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
     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 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         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;
     } & {
@@ -303,6 +304,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
     removeView(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;
@@ -330,6 +332,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
     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>;
@@ -395,8 +398,8 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         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/LinearComparativeView/model.js

@@ -55,6 +55,7 @@ function stateModelFactory(pluginManager) {
         showIntraviewLinks: true,
         linkViews: false,
         interactiveOverlay: false,
+        showDynamicControls: true,
         levels: mobx_state_tree_1.types.array(LinearSyntenyViewHelper),
         views: mobx_state_tree_1.types.array(pluginManager.getViewType('LinearGenomeView')
             .stateModel),
@@ -131,6 +132,9 @@ function stateModelFactory(pluginManager) {
         setLinkViews(arg) {
             self.linkViews = arg;
         },
+        setShowDynamicControls(arg) {
+            self.showDynamicControls = arg;
+        },
         activateTrackSelector(level) {
             if (self.trackSelectorType === 'hierarchical') {
                 const session = (0, util_1.getSession)(self);

package/dist/LinearSyntenyDisplay/afterAttach.js

@@ -20,11 +20,12 @@ function doAfterAttach(self) {
         if (!ctx1 || !ctx3) {
             return;
         }
+        const { alpha } = self;
         const height = self.height;
         const width = view.width;
         ctx1.clearRect(0, 0, width, height);
-        ctx3.clearRect(0, 0, width, height);
-        (0, drawSynteny_1.drawRef)(self, ctx1, ctx3);
+        (0, drawSynteny_1.drawRef)(self, ctx1);
+        (0, drawSynteny_1.drawCigarClickMap)(self, ctx3);
     }));
     (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
         const view = (0, util_1.getContainingView)(self);
@@ -32,7 +33,8 @@ function doAfterAttach(self) {
             !view.views.every(a => a.displayedRegions.length > 0 && a.initialized)) {
             return;
         }
-        (0, drawSynteny_1.drawMouseoverSynteny)(self);
+        const { clickId, mouseoverId } = self;
+        (0, drawSynteny_1.drawMouseoverClickMap)(self);
     }));
     (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.reaction)(() => {
         const view = (0, util_1.getContainingView)(self);

package/dist/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -189,11 +189,16 @@ const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, })
                             const { f, cigar } = model.featPositions[id];
                             const unitMultiplier2 = Math.floor(drawSynteny_1.MAX_COLOR_RANGE / cigar.length);
                             const cigarIdx = (0, drawSynteny_1.getId)(r2, g2, b2, unitMultiplier2);
-                            setTooltip((0, util_2.getTooltip)({
-                                feature: f,
-                                cigarOp: cigar[cigarIdx],
-                                cigarOpLen: cigar[cigarIdx + 1],
-                            }));
+                            if (cigarIdx % 2 === 0 && (r2 !== 0 || g2 !== 0 || b2 !== 0)) {
+                                setTooltip((0, util_2.getTooltip)({
+                                    feature: f,
+                                    cigarOp: cigar[cigarIdx + 1],
+                                    cigarOpLen: cigar[cigarIdx],
+                                }));
+                            }
+                            else {
+                                setTooltip('');
+                            }
                         }
                     }
                 }, onMouseLeave: () => {

package/dist/LinearSyntenyDisplay/components/util.d.ts

@@ -32,13 +32,14 @@ export declare function drawMatchSimple({ feature, ctx, offsets, level, cb, heig
     hideTiny?: boolean;
 }): void;
 export declare function draw(ctx: CanvasRenderingContext2D, x1: number, x2: number, y1: number, x3: number, x4: number, y2: number, mid: number, drawCurves?: boolean): void;
+export declare function drawLocationMarkers(ctx: CanvasRenderingContext2D, x1: number, x2: number, y1: number, x3: number, x4: number, y2: number, mid: number, bpPerPx1: number, bpPerPx2: number, drawCurves?: boolean): void;
 export declare function drawBox(ctx: CanvasRenderingContext2D, x1: number, x2: number, y1: number, x3: number, x4: number, y2: number): void;
 export declare function drawBezierBox(ctx: CanvasRenderingContext2D, x1: number, x2: number, y1: number, x3: number, x4: number, y2: number, mid: number): void;
 export declare function onSynClick(event: React.MouseEvent, model: LinearSyntenyDisplayModel): import("../model").FeatPos | undefined;
 export declare function onSynContextClick(event: React.MouseEvent, model: LinearSyntenyDisplayModel, setAnchorEl: (arg: ClickCoord) => void): void;
 export declare function getTooltip({ feature, cigarOp, cigarOpLen, }: {
     feature: Feature;
-    cigarOp?: string;
     cigarOpLen?: string;
+    cigarOp?: string;
 }): string;
 export {};

package/dist/LinearSyntenyDisplay/components/util.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.drawMatchSimple = drawMatchSimple;
 exports.draw = draw;
+exports.drawLocationMarkers = drawLocationMarkers;
 exports.drawBox = drawBox;
 exports.drawBezierBox = drawBezierBox;
 exports.onSynClick = onSynClick;
@@ -51,6 +52,42 @@ function draw(ctx, x1, x2, y1, x3, x4, y2, mid, drawCurves) {
         drawBox(ctx, x1, x2, y1, x3, x4, y2);
     }
 }
+function drawLocationMarkers(ctx, x1, x2, y1, x3, x4, y2, mid, bpPerPx1, bpPerPx2, drawCurves) {
+    const width1 = Math.abs(x2 - x1);
+    const width2 = Math.abs(x4 - x3);
+    const averageWidth = (width1 + width2) / 2;
+    if (averageWidth < 30) {
+        return;
+    }
+    const targetPixelSpacing = 20;
+    const numMarkers = Math.max(2, Math.floor(averageWidth / targetPixelSpacing) + 1);
+    const prevStrokeStyle = ctx.strokeStyle;
+    const prevLineWidth = ctx.lineWidth;
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.25)';
+    ctx.lineWidth = 0.5;
+    ctx.beginPath();
+    if (drawCurves) {
+        for (let step = 0; step < numMarkers; step++) {
+            const t = step / numMarkers;
+            const topX = x1 + (x2 - x1) * t;
+            const bottomX = x4 + (x3 - x4) * t;
+            ctx.moveTo(topX, y1);
+            ctx.bezierCurveTo(topX, mid, bottomX, mid, bottomX, y2);
+        }
+    }
+    else {
+        for (let step = 0; step < numMarkers; step++) {
+            const t = step / numMarkers;
+            const topX = x1 + (x2 - x1) * t;
+            const bottomX = x4 + (x3 - x4) * t;
+            ctx.moveTo(topX, y1);
+            ctx.lineTo(bottomX, y2);
+        }
+    }
+    ctx.stroke();
+    ctx.strokeStyle = prevStrokeStyle;
+    ctx.lineWidth = prevLineWidth;
+}
 function drawBox(ctx, x1, x2, y1, x3, x4, y2) {
     ctx.beginPath();
     ctx.moveTo(x1, y1);
@@ -131,7 +168,11 @@ function onSynContextClick(event, model, setAnchorEl) {
     const f = model.featPositions[id];
     if (f) {
         model.setClickId(f.f.id());
-        setAnchorEl({ clientX, clientY, feature: f });
+        setAnchorEl({
+            clientX,
+            clientY,
+            feature: f,
+        });
     }
 }
 function getTooltip({ feature, cigarOp, cigarOpLen, }) {
@@ -149,7 +190,7 @@ function getTooltip({ feature, cigarOp, cigarOpLen, }) {
         `Query len: ${l1.toLocaleString('en-US')}`,
         `Target len: ${l2.toLocaleString('en-US')}`,
         identity ? `Identity: ${identity.toPrecision(2)}` : '',
-        cigarOp ? `CIGAR operator: ${cigarOp}${cigarOpLen}` : '',
+        cigarOp ? `CIGAR operator: ${(0, util_1.toLocale)(+cigarOpLen)}${cigarOp}` : '',
         n1 ? `Name 1: ${n1}` : '',
         n2 ? `Name 2: ${n2}` : '',
     ]

package/dist/LinearSyntenyDisplay/drawSynteny.d.ts

@@ -1,5 +1,6 @@
 import type { LinearSyntenyDisplayModel } from './model';
 export declare const MAX_COLOR_RANGE: number;
 export declare function getId(r: number, g: number, b: number, unitMultiplier: number): number;
-export declare function drawRef(model: LinearSyntenyDisplayModel, ctx1: CanvasRenderingContext2D, ctx3?: CanvasRenderingContext2D): void;
-export declare function drawMouseoverSynteny(model: LinearSyntenyDisplayModel): void;
+export declare function drawCigarClickMap(model: LinearSyntenyDisplayModel, cigarClickMapCanvas: CanvasRenderingContext2D): void;
+export declare function drawRef(model: LinearSyntenyDisplayModel, mainCanvas: CanvasRenderingContext2D): void;
+export declare function drawMouseoverClickMap(model: LinearSyntenyDisplayModel): void;