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

package/esm/LGVSyntenyDisplay/model.d.ts

@@ -147,6 +147,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
     }> | null;
     readonly adapterConfig: any;
     readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+    readonly isMinimized: boolean;
     readonly parentDisplay: any;
     readonly effectiveRpcDriverName: any;
 } & {
@@ -203,6 +204,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+            readonly isMinimized: boolean;
             readonly parentDisplay: any;
             readonly effectiveRpcDriverName: any;
         } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<{
@@ -256,6 +258,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+            readonly isMinimized: boolean;
             readonly parentDisplay: any;
             readonly effectiveRpcDriverName: any;
         }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;
@@ -537,6 +540,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+            readonly isMinimized: boolean;
             readonly parentDisplay: any;
             readonly effectiveRpcDriverName: any;
         } & {
@@ -593,6 +597,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
                     }> | null;
                     readonly adapterConfig: any;
                     readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+                    readonly isMinimized: boolean;
                     readonly parentDisplay: any;
                     readonly effectiveRpcDriverName: any;
                 } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<{
@@ -646,6 +651,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
                     }> | null;
                     readonly adapterConfig: any;
                     readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+                    readonly isMinimized: boolean;
                     readonly parentDisplay: any;
                     readonly effectiveRpcDriverName: any;
                 }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;
@@ -872,6 +878,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+            readonly isMinimized: boolean;
             readonly parentDisplay: any;
             readonly effectiveRpcDriverName: any;
         } & {
@@ -928,6 +935,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
                     }> | null;
                     readonly adapterConfig: any;
                     readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+                    readonly isMinimized: boolean;
                     readonly parentDisplay: any;
                     readonly effectiveRpcDriverName: any;
                 } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<{
@@ -981,6 +989,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
                     }> | null;
                     readonly adapterConfig: any;
                     readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+                    readonly isMinimized: boolean;
                     readonly parentDisplay: any;
                     readonly effectiveRpcDriverName: any;
                 }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;
@@ -1113,10 +1122,18 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
     setHideLargeIndels(arg: boolean): void;
 } & {
     copyFeatureToClipboard(feature: Feature): Promise<void>;
-    readonly rendererConfig: any;
+    readonly rendererConfig: {
+        height: any;
+        noSpacing: any;
+        maxHeight: any;
+        hideSmallIndels: any;
+        hideMismatches: any;
+        hideLargeIndels: any;
+    };
 } & {
     readonly maxHeight: any;
     readonly featureHeightSetting: any;
+    readonly noSpacingSetting: any;
     readonly featureUnderMouse: Feature | undefined;
     renderReady(): boolean;
     readonly filters: import("@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain").default;
@@ -1206,6 +1223,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+            readonly isMinimized: boolean;
             readonly parentDisplay: any;
             readonly effectiveRpcDriverName: any;
         } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<{
@@ -1259,6 +1277,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+            readonly isMinimized: boolean;
             readonly parentDisplay: any;
             readonly effectiveRpcDriverName: any;
         }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;

package/esm/LinearComparativeDisplay/stateModelFactory.d.ts

@@ -55,6 +55,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     }> | null;
     readonly adapterConfig: any;
     readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+    readonly isMinimized: boolean;
     readonly parentDisplay: any;
     readonly effectiveRpcDriverName: any;
 } & {
@@ -111,6 +112,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+            readonly isMinimized: boolean;
             readonly parentDisplay: any;
             readonly effectiveRpcDriverName: any;
         } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<{
@@ -164,6 +166,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: import("@jbrowse/core/util").AbstractTrackModel;
+            readonly isMinimized: boolean;
             readonly parentDisplay: any;
             readonly effectiveRpcDriverName: any;
         }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;

package/esm/LinearComparativeView/components/LinearComparativeRenderArea.js

@@ -16,6 +16,9 @@ const useStyles = makeStyles()({
     resizeHandle: {
         height: 4,
         background: '#ccc',
+        '&:hover': {
+            background: '#aaa',
+        },
     },
 });
 function View({ view }) {

package/esm/LinearComparativeView/components/OpacitySlider.js

@@ -3,7 +3,7 @@ import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Box, Slider, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
 import SliderTooltip from "./SliderTooltip.js";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
         alignItems: 'center',
@@ -11,7 +11,11 @@ const useStyles = makeStyles()({
         marginRight: 16,
         minWidth: 150,
     },
-});
+    slider: {
+        width: 100,
+        color: theme.palette.text.secondary,
+    },
+}));
 const OpacitySlider = observer(function OpacitySlider({ model, }) {
     const { classes } = useStyles();
     const { levels } = model;
@@ -33,7 +37,7 @@ const OpacitySlider = observer(function OpacitySlider({ model, }) {
             }
         }
     };
-    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: {
+    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", className: classes.slider, slots: {
                     valueLabel: SliderTooltip,
                 }, valueLabelFormat: (value) => sliderToAlpha(value).toFixed(3) })] }));
 });

package/esm/LinearComparativeView/components/useRangeSelect.js

@@ -72,6 +72,9 @@ export function useRangeSelect(ref, model) {
         setCurrentX(relativeX);
     }
     function mouseMove(event) {
+        if (anchorPosition) {
+            return;
+        }
         setGuideX(getRelativeX(event, ref.current));
     }
     function mouseOut() {

package/esm/LinearComparativeView/model.d.ts

@@ -53,11 +53,14 @@ declare function stateModelFactory(pluginManager: PluginManager): import("@jbrow
         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").BpOffset;
         rightOffset: undefined | import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").BpOffset;
+        isScalebarRefNameMenuOpen: boolean;
+        scalebarRefNameClickPending: boolean;
     } & {
         readonly pinnedTracks: any[];
         readonly unpinnedTracks: any[];
@@ -111,6 +114,8 @@ declare function stateModelFactory(pluginManager: PluginManager): import("@jbrow
         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 @@ declare function stateModelFactory(pluginManager: PluginManager): import("@jbrow
         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").InitState): void;
         exportSvg(opts?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").ExportSvgOptions): Promise<void>;
@@ -171,6 +177,9 @@ declare function stateModelFactory(pluginManager: PluginManager): import("@jbrow
         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 @@ declare function stateModelFactory(pluginManager: PluginManager): import("@jbrow
         }): 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").NavLocation): void;
-        navToMultiple(locations: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").NavLocation[]): void;
+        navTo(query: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").NavLocation, grow?: number): void;
+        navToMultiple(locations: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").NavLocation[], grow?: number): void;
     } & {
         rubberBandMenuItems(): MenuItem[];
         bpToPx({ refName, coord, regionNumber, }: {
@@ -365,11 +374,14 @@ declare function stateModelFactory(pluginManager: PluginManager): import("@jbrow
         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").BpOffset;
         rightOffset: undefined | import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").BpOffset;
+        isScalebarRefNameMenuOpen: boolean;
+        scalebarRefNameClickPending: boolean;
     } & {
         readonly pinnedTracks: any[];
         readonly unpinnedTracks: any[];
@@ -423,6 +435,8 @@ declare function stateModelFactory(pluginManager: PluginManager): import("@jbrow
         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;
@@ -462,6 +476,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("@jbrow
         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").InitState): void;
         exportSvg(opts?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").ExportSvgOptions): Promise<void>;
@@ -483,6 +498,9 @@ declare function stateModelFactory(pluginManager: PluginManager): import("@jbrow
         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;
     } & {
@@ -494,8 +512,8 @@ declare function stateModelFactory(pluginManager: PluginManager): import("@jbrow
         }): 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").NavLocation): void;
-        navToMultiple(locations: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").NavLocation[]): void;
+        navTo(query: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").NavLocation, grow?: number): void;
+        navToMultiple(locations: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").NavLocation[], grow?: number): void;
     } & {
         rubberBandMenuItems(): MenuItem[];
         bpToPx({ refName, coord, regionNumber, }: {
@@ -634,11 +652,14 @@ declare function stateModelFactory(pluginManager: PluginManager): import("@jbrow
         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").BpOffset;
         rightOffset: undefined | import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").BpOffset;
+        isScalebarRefNameMenuOpen: boolean;
+        scalebarRefNameClickPending: boolean;
     } & {
         readonly pinnedTracks: any[];
         readonly unpinnedTracks: any[];
@@ -692,6 +713,8 @@ declare function stateModelFactory(pluginManager: PluginManager): import("@jbrow
         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;
@@ -731,6 +754,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("@jbrow
         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").InitState): void;
         exportSvg(opts?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").ExportSvgOptions): Promise<void>;
@@ -752,6 +776,9 @@ declare function stateModelFactory(pluginManager: PluginManager): import("@jbrow
         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;
     } & {
@@ -763,8 +790,8 @@ declare function stateModelFactory(pluginManager: PluginManager): import("@jbrow
         }): 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").NavLocation): void;
-        navToMultiple(locations: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").NavLocation[]): void;
+        navTo(query: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").NavLocation, grow?: number): void;
+        navToMultiple(locations: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").NavLocation[], grow?: number): void;
     } & {
         rubberBandMenuItems(): MenuItem[];
         bpToPx({ refName, coord, regionNumber, }: {

package/esm/LinearSyntenyDisplay/afterAttach.js

@@ -6,6 +6,9 @@ import { autorun, reaction } from 'mobx';
 import { drawCigarClickMap, drawMouseoverClickMap, drawRef, } from "./drawSynteny.js";
 export function doAfterAttach(self) {
     addDisposer(self, autorun(function syntenyDrawAutorun() {
+        if (self.isMinimized) {
+            return;
+        }
         const view = getContainingView(self);
         if (!view.initialized ||
             !view.views.every(a => a.displayedRegions.length > 0 && a.initialized)) {
@@ -24,6 +27,9 @@ export function doAfterAttach(self) {
         drawCigarClickMap(self, ctx3);
     }, { name: 'SyntenyDraw' }));
     addDisposer(self, autorun(function syntenyMouseoverAutorun() {
+        if (self.isMinimized) {
+            return;
+        }
         const view = getContainingView(self);
         if (!view.initialized ||
             !view.views.every(a => a.displayedRegions.length > 0 && a.initialized)) {
@@ -33,6 +39,9 @@ export function doAfterAttach(self) {
         drawMouseoverClickMap(self);
     }, { name: 'SyntenyMouseover' }));
     addDisposer(self, reaction(() => {
+        if (self.isMinimized) {
+            return { initialized: false };
+        }
         const view = getContainingView(self);
         return {
             bpPerPx: view.views.map(v => v.bpPerPx),

package/esm/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -20,7 +20,7 @@ const useStyles = makeStyles()({
     },
     mouseoverCanvas: {
         position: 'absolute',
-        pointEvents: 'none',
+        pointerEvents: 'none',
     },
     mainCanvas: {
         position: 'absolute',
@@ -101,7 +101,7 @@ const LinearSyntenyRendering = observer(function LinearSyntenyRendering({ model,
     const cigarClickMapCanvasRef = useCallback((ref) => {
         model.setCigarClickMapCanvasRef(ref);
     }, [model, height, width]);
-    return (_jsxs("div", { className: classes.rel, children: [_jsx("canvas", { ref: mouseoverDetectionCanvasRef, width: width, height: height, className: classes.mouseoverCanvas }), _jsx("canvas", { ref: mainSyntenyCanvasRef, onMouseMove: event => {
+    return (_jsxs("div", { className: classes.rel, children: [_jsx("canvas", { ref: mainSyntenyCanvasRef, onMouseMove: event => {
                     if (mouseCurrDownX !== undefined) {
                         xOffset.current += mouseCurrDownX - event.clientX;
                         setMouseCurrDownX(event.clientX);
@@ -137,26 +137,26 @@ const LinearSyntenyRendering = observer(function LinearSyntenyRendering({ model,
                         setCurrY(clientY);
                         const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
                         const [r2, g2, b2] = ctx2.getImageData(x, y, 1, 1).data;
+                        if (model.numFeats === 0) {
+                            setTooltip('');
+                            return;
+                        }
                         const unitMultiplier = Math.floor(MAX_COLOR_RANGE / model.numFeats);
                         const id = getId(r1, g1, b1, unitMultiplier);
                         model.setMouseoverId(model.featPositions[id]?.f.id());
-                        if (id === -1) {
+                        if (id === -1 || !model.featPositions[id]) {
                             setTooltip('');
                         }
-                        else if (model.featPositions[id]) {
+                        else {
                             const { f, cigar } = model.featPositions[id];
                             const unitMultiplier2 = Math.floor(MAX_COLOR_RANGE / cigar.length);
                             const cigarIdx = getId(r2, g2, b2, unitMultiplier2);
-                            if (cigarIdx % 2 === 0 && (r2 !== 0 || g2 !== 0 || b2 !== 0)) {
-                                setTooltip(getTooltip({
-                                    feature: f,
-                                    cigarOp: cigar[cigarIdx + 1],
-                                    cigarOpLen: cigar[cigarIdx],
-                                }));
-                            }
-                            else {
-                                setTooltip('');
-                            }
+                            const hasCigarData = cigarIdx % 2 === 0 && (r2 !== 0 || g2 !== 0 || b2 !== 0);
+                            setTooltip(getTooltip({
+                                feature: f,
+                                cigarOp: hasCigarData ? cigar[cigarIdx + 1] : undefined,
+                                cigarOpLen: hasCigarData ? cigar[cigarIdx] : undefined,
+                            }));
                         }
                     }
                 }, onMouseLeave: () => {
@@ -174,7 +174,7 @@ const LinearSyntenyRendering = observer(function LinearSyntenyRendering({ model,
                     }
                 }, onContextMenu: evt => {
                     onSynContextClick(evt, model, setAnchorEl);
-                }, "data-testid": "synteny_canvas", className: classes.mainCanvas, width: width, height: height }), _jsx("canvas", { ref: clickMapCanvasRef, className: classes.pix, width: width, height: height }), _jsx("canvas", { ref: cigarClickMapCanvasRef, className: classes.pix, width: width, height: height }), mouseoverId && tooltip && currX && currY ? (_jsx(SyntenyTooltip, { title: tooltip })) : null, anchorEl ? (_jsx(SyntenyContextMenu, { model: model, anchorEl: anchorEl, onClose: () => {
+                }, "data-testid": "synteny_canvas", className: classes.mainCanvas, width: width, height: height }), _jsx("canvas", { ref: mouseoverDetectionCanvasRef, width: width, height: height, className: classes.mouseoverCanvas }), _jsx("canvas", { ref: clickMapCanvasRef, className: classes.pix, width: width, height: height }), _jsx("canvas", { ref: cigarClickMapCanvasRef, className: classes.pix, width: width, height: height }), mouseoverId && tooltip && currX && currY ? (_jsx(SyntenyTooltip, { title: tooltip })) : null, anchorEl ? (_jsx(SyntenyContextMenu, { model: model, anchorEl: anchorEl, onClose: () => {
                     setAnchorEl(undefined);
                 } })) : null] }));
 });

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

@@ -35,6 +35,7 @@ export declare function draw(ctx: CanvasRenderingContext2D, x1: number, x2: numb
 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 getFeatureAtClick(event: React.MouseEvent, model: LinearSyntenyDisplayModel): import("../model.ts").FeatPos | undefined;
 export declare function onSynClick(event: React.MouseEvent, model: LinearSyntenyDisplayModel): import("../model.ts").FeatPos | undefined;
 export declare function onSynContextClick(event: React.MouseEvent, model: LinearSyntenyDisplayModel, setAnchorEl: (arg: ClickCoord) => void): void;
 export declare function getTooltip({ feature, cigarOp, cigarOpLen, }: {

package/esm/LinearSyntenyDisplay/components/util.js

@@ -102,35 +102,37 @@ export function drawBezierBox(ctx, x1, x2, y1, x3, x4, y2, mid) {
     ctx.bezierCurveTo(x4, mid, x1, mid, x1, y1);
     ctx.closePath();
 }
-export function onSynClick(event, model) {
-    const view = getContainingView(model);
-    const track = getContainingTrack(model);
-    const { featPositions, numFeats, clickMapCanvas: ref1, cigarClickMapCanvas: ref2, level, } = model;
-    if (!ref1 || !ref2) {
-        return;
+export function getFeatureAtClick(event, model) {
+    const { clickMapCanvas, numFeats, featPositions } = model;
+    if (!clickMapCanvas) {
+        return undefined;
     }
-    const rect = ref1.getBoundingClientRect();
-    const ctx1 = ref1.getContext('2d');
-    const ctx2 = ref2.getContext('2d');
-    if (!ctx1 || !ctx2) {
-        return;
+    const ctx = clickMapCanvas.getContext('2d');
+    if (!ctx) {
+        return undefined;
     }
+    const rect = clickMapCanvas.getBoundingClientRect();
     const x = event.clientX - rect.left;
     const y = event.clientY - rect.top;
-    const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
+    const [r, g, b] = ctx.getImageData(x, y, 1, 1).data;
     const unitMultiplier = Math.floor(MAX_COLOR_RANGE / numFeats);
-    const id = getId(r1, g1, b1, unitMultiplier);
-    const feat = featPositions[id];
+    const id = getId(r, g, b, unitMultiplier);
+    return featPositions[id];
+}
+export function onSynClick(event, model) {
+    const feat = getFeatureAtClick(event, model);
     if (feat) {
         const { f } = feat;
         model.setClickId(f.id());
         const session = getSession(model);
         if (isSessionModelWithWidgets(session)) {
+            const view = getContainingView(model);
+            const track = getContainingTrack(model);
             session.showWidget(session.addWidget('SyntenyFeatureWidget', 'syntenyFeature', {
                 view,
                 track,
                 featureData: f.toJSON(),
-                level,
+                level: model.level,
             }));
         }
     }
@@ -138,30 +140,13 @@ export function onSynClick(event, model) {
 }
 export function onSynContextClick(event, model, setAnchorEl) {
     event.preventDefault();
-    const ref1 = model.clickMapCanvas;
-    const ref2 = model.cigarClickMapCanvas;
-    if (!ref1 || !ref2) {
-        return;
-    }
-    const rect = ref1.getBoundingClientRect();
-    const ctx1 = ref1.getContext('2d');
-    const ctx2 = ref2.getContext('2d');
-    if (!ctx1 || !ctx2) {
-        return;
-    }
-    const { clientX, clientY } = event;
-    const x = clientX - rect.left;
-    const y = clientY - rect.top;
-    const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
-    const unitMultiplier = Math.floor(MAX_COLOR_RANGE / model.numFeats);
-    const id = getId(r1, g1, b1, unitMultiplier);
-    const f = model.featPositions[id];
-    if (f) {
-        model.setClickId(f.f.id());
+    const feat = getFeatureAtClick(event, model);
+    if (feat) {
+        model.setClickId(feat.f.id());
         setAnchorEl({
-            clientX,
-            clientY,
-            feature: f,
+            clientX: event.clientX,
+            clientY: event.clientY,
+            feature: feat,
         });
     }
 }

package/esm/LinearSyntenyDisplay/drawCigarClickMap.d.ts

@@ -0,0 +1,2 @@
+import type { LinearSyntenyDisplayModel } from './model.ts';
+export declare function drawCigarClickMap(model: LinearSyntenyDisplayModel, cigarClickMapCanvas: CanvasRenderingContext2D): void;

package/esm/LinearSyntenyDisplay/drawCigarClickMap.js

@@ -0,0 +1,88 @@
+import { doesIntersect2, getContainingView } from '@jbrowse/core/util';
+import { draw } from "./components/util.js";
+import { MAX_COLOR_RANGE, lineLimit, makeColor, oobLimit, } from "./drawSyntenyUtils.js";
+export function drawCigarClickMap(model, cigarClickMapCanvas) {
+    const view = getContainingView(model);
+    const drawCurves = view.drawCurves;
+    const drawCIGAR = view.drawCIGAR;
+    const drawCIGARMatchesOnly = view.drawCIGARMatchesOnly;
+    const { level, height, featPositions } = model;
+    const width = view.width;
+    const bpPerPxs = view.views.map(v => v.bpPerPx);
+    cigarClickMapCanvas.imageSmoothingEnabled = false;
+    cigarClickMapCanvas.clearRect(0, 0, width, height);
+    const offsets = view.views.map(v => v.offsetPx);
+    const bpPerPxInv0 = 1 / bpPerPxs[level];
+    const bpPerPxInv1 = 1 / bpPerPxs[level + 1];
+    for (const { p11, p12, p21, p22, f, cigar } of featPositions) {
+        const x11 = p11.offsetPx - offsets[level];
+        const x12 = p12.offsetPx - offsets[level];
+        const x21 = p21.offsetPx - offsets[level + 1];
+        const x22 = p22.offsetPx - offsets[level + 1];
+        const l1 = Math.abs(x12 - x11);
+        const l2 = Math.abs(x22 - x21);
+        const minX = Math.min(x21, x22);
+        const maxX = Math.max(x21, x22);
+        const y1 = 0;
+        const y2 = height;
+        const mid = (y2 - y1) / 2;
+        if (!(l1 <= lineLimit && l2 <= lineLimit) &&
+            doesIntersect2(minX, maxX, -oobLimit, view.width + oobLimit)) {
+            const s1 = f.get('strand');
+            const k1 = s1 === -1 ? x12 : x11;
+            const k2 = s1 === -1 ? x11 : x12;
+            const rev1 = k1 < k2 ? 1 : -1;
+            const rev2 = (x21 < x22 ? 1 : -1) * s1;
+            let cx1 = k1;
+            let cx2 = s1 === -1 ? x22 : x21;
+            if (cigar.length && drawCIGAR) {
+                let continuingFlag = false;
+                let px1 = 0;
+                let px2 = 0;
+                const unitMultiplier2 = Math.floor(MAX_COLOR_RANGE / cigar.length);
+                for (let j = 0; j < cigar.length; j += 2) {
+                    const len = +cigar[j];
+                    const op = cigar[j + 1];
+                    if (!continuingFlag) {
+                        px1 = cx1;
+                        px2 = cx2;
+                    }
+                    const d1 = len * bpPerPxInv0;
+                    const d2 = len * bpPerPxInv1;
+                    if (op === 'M' || op === '=' || op === 'X') {
+                        cx1 += d1 * rev1;
+                        cx2 += d2 * rev2;
+                    }
+                    else if (op === 'D' || op === 'N') {
+                        cx1 += d1 * rev1;
+                    }
+                    else if (op === 'I') {
+                        cx2 += d2 * rev2;
+                    }
+                    if (!(Math.max(px1, px2, cx1, cx2) < 0 ||
+                        Math.min(px1, px2, cx1, cx2) > width)) {
+                        const isNotLast = j < cigar.length - 2;
+                        if (Math.abs(cx1 - px1) <= 1 &&
+                            Math.abs(cx2 - px2) <= 1 &&
+                            isNotLast) {
+                            continuingFlag = true;
+                        }
+                        else {
+                            continuingFlag = false;
+                            const shouldDraw = !drawCIGARMatchesOnly ||
+                                ((op === 'M' || op === '=' || op === 'X') &&
+                                    Math.abs(cx1 - px1) > 1 &&
+                                    Math.abs(cx2 - px2) > 1);
+                            if (shouldDraw) {
+                                const idx = j * unitMultiplier2 + 1;
+                                cigarClickMapCanvas.fillStyle = makeColor(idx);
+                                draw(cigarClickMapCanvas, px1, cx1, y1, cx2, px2, y2, mid, drawCurves);
+                                cigarClickMapCanvas.fill();
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}