@jbrowse/plugin-linear-comparative-view 2.11.2 → 2.12.1

package/dist/LinearComparativeView/model.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Instance, SnapshotIn } from 'mobx-state-tree';
 import { MenuItem } from '@jbrowse/core/ui';
 import PluginManager from '@jbrowse/core/PluginManager';
@@ -17,7 +16,6 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
     type: import("mobx-state-tree").ISimpleType<"LinearComparativeView">;
     trackSelectorType: import("mobx-state-tree").IType<string | undefined, string, string>;
     showIntraviewLinks: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
-    linkViews: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     interactToggled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     middleComparativeHeight: import("mobx-state-tree").IType<number | undefined, number, number>;
     tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
@@ -30,16 +28,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         type: import("mobx-state-tree").IType<string | undefined, string, string>;
         offsetPx: import("mobx-state-tree").IType<number | undefined, number, number>;
         bpPerPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-        displayedRegions: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
-            refName: import("mobx-state-tree").ISimpleType<string>;
-            start: import("mobx-state-tree").ISimpleType<number>;
-            end: import("mobx-state-tree").ISimpleType<number>;
-            reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-        } & {
-            assemblyName: import("mobx-state-tree").ISimpleType<string>;
-        }, {
-            setRefName(newRefName: string): void;
-        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        displayedRegions: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>;
         tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
         hideHeader: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
@@ -62,15 +51,15 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
     } & {
         volatileWidth: number | undefined;
         minimumBlockWidth: number;
-        draggingTrackId: string | undefined;
+        draggingTrackId: undefined | string;
         volatileError: unknown;
         afterDisplayedRegionsSetCallbacks: Function[];
         scaleFactor: number;
         trackRefs: Record<string, HTMLDivElement>;
         coarseDynamicBlocks: import("@jbrowse/core/util/blockTypes").BaseBlock[];
         coarseTotalBp: number;
-        leftOffset: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined;
-        rightOffset: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined;
+        leftOffset: undefined | import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset;
+        rightOffset: undefined | import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset;
     } & {
         readonly trackLabelsSetting: any;
         readonly width: number;
@@ -119,8 +108,8 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         removeHighlight(highlight: Required<import("@jbrowse/core/util").ParsedLocString>): void;
         scrollTo(offsetPx: number): number;
         zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
-        setOffsets(left?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined, right?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined): void;
-        setSearchResults(searchResults: import("@jbrowse/core/TextSearch/BaseResults").default[], searchQuery: string, assemblyName?: string | undefined): void;
+        setOffsets(left?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset, right?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset): void;
+        setSearchResults(searchResults: import("@jbrowse/core/TextSearch/BaseResults").default[], searchQuery: string, assemblyName?: string): void;
         setNewView(bpPerPx: number, offsetPx: number): void;
         horizontallyFlip(): void;
         showTrack(trackId: string, initialSnapshot?: {}, displayInitialSnapshot?: {}): any;
@@ -133,30 +122,30 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         moveTrack(movingId: string, targetId: string): void;
         closeView(): void;
         toggleTrack(trackId: string): boolean;
-        setTrackLabels(setting: "offset" | "hidden" | "overlapping"): void;
+        setTrackLabels(setting: "overlapping" | "offset" | "hidden"): void;
         setShowCenterLine(b: boolean): void;
         setDisplayedRegions(regions: import("@jbrowse/core/util").Region[]): void;
         activateTrackSelector(): import("@jbrowse/core/util").Widget;
-        getSelectedRegions(leftOffset?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined, rightOffset?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined): {
+        getSelectedRegions(leftOffset?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset, rightOffset?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset): {
             start: number;
             end: number;
             type: string;
-            regionNumber?: number | undefined;
-            reversed?: boolean | undefined;
+            regionNumber?: number;
+            reversed?: boolean;
             refName: string;
             assemblyName: string;
             key: string;
             offsetPx: number;
             widthPx: number;
-            variant?: string | undefined;
-            isLeftEndOfDisplayedRegion?: boolean | undefined;
+            variant?: string;
+            isLeftEndOfDisplayedRegion?: boolean;
         }[];
         afterDisplayedRegionsSet(cb: Function): void;
         horizontalScroll(distance: number): number;
         center(): void;
         showAllRegions(): void;
-        showAllRegionsInAssembly(assemblyName?: string | undefined): void;
-        setDraggingTrackId(idx?: string | undefined): void;
+        showAllRegionsInAssembly(assemblyName?: string): void;
+        setDraggingTrackId(idx?: string): void;
         setScaleFactor(factor: number): void;
         clearView(): void;
         exportSvg(opts?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").ExportSvgOptions): Promise<void>;
@@ -181,143 +170,13 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         setCoarseDynamicBlocks(blocks: import("@jbrowse/core/util/blockTypes").BlockSet): void;
         afterAttach(): void;
     } & {
-        moveTo(start?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined, end?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined): void;
-        navToLocString(input: string, optAssemblyName?: string | undefined): Promise<void>;
+        moveTo(start?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset, end?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset): void;
+        navToLocString(input: string, optAssemblyName?: string): Promise<void>;
         navToSearchString({ input, assembly, }: {
             input: string;
-            assembly: {
-                configuration: any;
-            } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-                error: unknown;
-                loaded: boolean;
-                loadingP: Promise<void> | undefined;
-                volatileRegions: import("@jbrowse/core/assemblyManager/assembly").BasicRegion[] | undefined;
-                refNameAliases: {
-                    [x: string]: string | undefined;
-                } | undefined;
-                lowerCaseRefNameAliases: {
-                    [x: string]: string | undefined;
-                } | undefined;
-                cytobands: import("@jbrowse/core/util").Feature[] | undefined;
-            } & {
-                getConf(arg: string): any;
-            } & {
-                readonly initialized: boolean;
-                /**
-                 * #property
-                 */
-                readonly name: string;
-                readonly regions: import("@jbrowse/core/assemblyManager/assembly").BasicRegion[] | undefined;
-                readonly aliases: string[];
-                readonly displayName: string | undefined;
-                hasName(name: string): boolean;
-                readonly allAliases: string[];
-                readonly allRefNames: string[] | undefined;
-                readonly lowerCaseRefNames: string[] | undefined;
-                readonly allRefNamesWithLowerCase: string[] | undefined;
-                readonly rpcManager: import("@jbrowse/core/rpc/RpcManager").default;
-                readonly refNameColors: string[];
-            } & {
-                readonly refNames: string[] | undefined;
-            } & {
-                getCanonicalRefName(refName: string): string | undefined;
-                getRefNameColor(refName: string): string | undefined;
-                isValidRefName(refName: string): boolean;
-            } & {
-                setLoaded({ adapterRegionsWithAssembly, refNameAliases, lowerCaseRefNameAliases, cytobands, }: import("@jbrowse/core/assemblyManager/assembly").Loading): void;
-                setError(e: unknown): void;
-                setRegions(regions: import("@jbrowse/core/util").Region[]): void;
-                setRefNameAliases(aliases: {
-                    [x: string]: string | undefined;
-                }, lcAliases: {
-                    [x: string]: string | undefined;
-                }): void;
-                setCytobands(cytobands: import("@jbrowse/core/util").Feature[]): void;
-                setLoadingP(p?: Promise<void> | undefined): void;
-                load(): Promise<void>;
-                loadPre(): Promise<void>;
-            } & {
-                getAdapterMapEntry(adapterConf: {
-                    [x: string]: unknown;
-                }, options: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<import("@jbrowse/core/assemblyManager/assembly").RefNameMap>;
-                getRefNameMapForAdapter(adapterConf: {
-                    [x: string]: unknown;
-                }, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
-                    [x: string]: string | undefined;
-                }>;
-                getReverseRefNameMapForAdapter(adapterConf: {
-                    [x: string]: unknown;
-                }, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
-                    [x: string]: string | undefined;
-                }>;
-            } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
-                configuration: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IReferenceType<import("mobx-state-tree").IAnyType>>;
-            }, {
-                error: unknown;
-                loaded: boolean;
-                loadingP: Promise<void> | undefined;
-                volatileRegions: import("@jbrowse/core/assemblyManager/assembly").BasicRegion[] | undefined;
-                refNameAliases: {
-                    [x: string]: string | undefined;
-                } | undefined;
-                lowerCaseRefNameAliases: {
-                    [x: string]: string | undefined;
-                } | undefined;
-                cytobands: import("@jbrowse/core/util").Feature[] | undefined;
-            } & {
-                getConf(arg: string): any;
-            } & {
-                readonly initialized: boolean;
-                /**
-                 * #property
-                 */
-                readonly name: string;
-                readonly regions: import("@jbrowse/core/assemblyManager/assembly").BasicRegion[] | undefined;
-                readonly aliases: string[];
-                readonly displayName: string | undefined;
-                hasName(name: string): boolean;
-                readonly allAliases: string[];
-                readonly allRefNames: string[] | undefined;
-                readonly lowerCaseRefNames: string[] | undefined;
-                readonly allRefNamesWithLowerCase: string[] | undefined;
-                readonly rpcManager: import("@jbrowse/core/rpc/RpcManager").default;
-                readonly refNameColors: string[];
-            } & {
-                readonly refNames: string[] | undefined;
-            } & {
-                getCanonicalRefName(refName: string): string | undefined;
-                getRefNameColor(refName: string): string | undefined;
-                isValidRefName(refName: string): boolean;
-            } & {
-                setLoaded({ adapterRegionsWithAssembly, refNameAliases, lowerCaseRefNameAliases, cytobands, }: import("@jbrowse/core/assemblyManager/assembly").Loading): void;
-                setError(e: unknown): void;
-                setRegions(regions: import("@jbrowse/core/util").Region[]): void;
-                setRefNameAliases(aliases: {
-                    [x: string]: string | undefined;
-                }, lcAliases: {
-                    [x: string]: string | undefined;
-                }): void;
-                setCytobands(cytobands: import("@jbrowse/core/util").Feature[]): void;
-                setLoadingP(p?: Promise<void> | undefined): void;
-                load(): Promise<void>;
-                loadPre(): Promise<void>;
-            } & {
-                getAdapterMapEntry(adapterConf: {
-                    [x: string]: unknown;
-                }, options: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<import("@jbrowse/core/assemblyManager/assembly").RefNameMap>;
-                getRefNameMapForAdapter(adapterConf: {
-                    [x: string]: unknown;
-                }, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
-                    [x: string]: string | undefined;
-                }>;
-                getReverseRefNameMapForAdapter(adapterConf: {
-                    [x: string]: unknown;
-                }, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
-                    [x: string]: string | undefined;
-                }>;
-            }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+            assembly: import("@jbrowse/core/assemblyManager/assembly").Assembly;
         }): Promise<void>;
-        navToLocations(parsedLocStrings: import("@jbrowse/core/util").ParsedLocString[], assemblyName?: string | undefined): Promise<void>;
+        navToLocations(parsedLocStrings: import("@jbrowse/core/util").ParsedLocString[], assemblyName?: string): Promise<void>;
         navTo(query: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").NavLocation): void;
         navToMultiple(locations: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").NavLocation[]): void;
     } & {
@@ -325,12 +184,12 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         bpToPx({ refName, coord, regionNumber, }: {
             refName: string;
             coord: number;
-            regionNumber?: number | undefined;
+            regionNumber?: number;
         }): {
             index: number;
             offsetPx: number;
         } | undefined;
-        centerAt(coord: number, refName: string, regionNumber?: number | undefined): void;
+        centerAt(coord: number, refName: string, regionNumber?: number): void;
         pxToBp(px: number): {
             coord: number;
             index: number;
@@ -340,7 +199,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
             offset: number;
             start: number;
             end: number;
-            reversed: boolean;
+            reversed?: boolean;
         };
         readonly centerLineInfo: {
             coord: number;
@@ -351,7 +210,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
             offset: number;
             start: number;
             end: number;
-            reversed: boolean;
+            reversed?: boolean;
         } | undefined;
     } & {
         afterCreate(): void;
@@ -364,16 +223,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         type: import("mobx-state-tree").IType<string | undefined, string, string>;
         offsetPx: import("mobx-state-tree").IType<number | undefined, number, number>;
         bpPerPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-        displayedRegions: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
-            refName: import("mobx-state-tree").ISimpleType<string>;
-            start: import("mobx-state-tree").ISimpleType<number>;
-            end: import("mobx-state-tree").ISimpleType<number>;
-            reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-        } & {
-            assemblyName: import("mobx-state-tree").ISimpleType<string>;
-        }, {
-            setRefName(newRefName: string): void;
-        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        displayedRegions: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>;
         tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
         hideHeader: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
@@ -415,7 +265,6 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
      */
     readonly assemblyNames: string[];
 } & {
-    afterAttach(): void;
     beforeDestroy(): void;
     onSubviewAction(actionName: string, path: string, args?: unknown[]): void;
     /**
@@ -440,10 +289,6 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
      * #action
      */
     setMiddleComparativeHeight(n: number): number;
-    /**
-     * #action
-     */
-    toggleLinkViews(): void;
     /**
      * #action
      */

package/dist/LinearComparativeView/model.js

@@ -62,10 +62,6 @@ function stateModelFactory(pluginManager) {
          * #property
          */
         showIntraviewLinks: true,
-        /**
-         * #property
-         */
-        linkViews: false,
         /**
          * #property
          */
@@ -126,19 +122,6 @@ function stateModelFactory(pluginManager) {
         },
     }))
         .actions(self => ({
-        afterAttach() {
-            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_state_tree_1.onAction)(self, param => {
-                if (self.linkViews) {
-                    const { name, path, args } = param;
-                    // doesn't link showTrack/hideTrack, doesn't make sense in
-                    // synteny views most time
-                    const actions = ['horizontalScroll', 'zoomTo', 'setScaleFactor'];
-                    if (actions.includes(name) && path) {
-                        this.onSubviewAction(name, path, args);
-                    }
-                }
-            }));
-        },
         // automatically removes session assemblies associated with this view
         // e.g. read vs ref
         beforeDestroy() {
@@ -191,12 +174,6 @@ function stateModelFactory(pluginManager) {
             self.middleComparativeHeight = n;
             return self.middleComparativeHeight;
         },
-        /**
-         * #action
-         */
-        toggleLinkViews() {
-            self.linkViews = !self.linkViews;
-        },
         /**
          * #action
          */

package/dist/LinearReadVsRef/LinearReadVsRef.js

@@ -23,6 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ReadVsRefDialog;
 const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const ui_1 = require("@jbrowse/core/ui");
@@ -281,4 +282,3 @@ function ReadVsRefDialog({ track, feature: preFeature, handleClose, }) {
             react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: handleClose }, "Cancel"),
             react_1.default.createElement(material_1.Button, { disabled: !primaryFeature, variant: "contained", color: "primary", onClick: onSubmit }, "Submit"))));
 }
-exports.default = ReadVsRefDialog;

package/dist/LinearReadVsRef/index.js

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = LinearReadVsRefMenuItemF;
 const react_1 = require("react");
 const util_1 = require("@jbrowse/core/util");
 // icons
@@ -75,4 +76,3 @@ function LinearReadVsRefMenuItemF(pm) {
         return pluggableElement;
     });
 }
-exports.default = LinearReadVsRefMenuItemF;

package/dist/LinearSyntenyDisplay/afterAttach.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.doAfterAttach = void 0;
+exports.doAfterAttach = doAfterAttach;
 const mobx_state_tree_1 = require("mobx-state-tree");
 const util_1 = require("@jbrowse/core/util");
 const Base1DUtils_1 = require("@jbrowse/core/util/Base1DUtils");
@@ -103,4 +103,3 @@ function doAfterAttach(self) {
         self.setFeatPositions(map);
     }, { fireImmediately: true }));
 }
-exports.doAfterAttach = doAfterAttach;

package/dist/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -35,6 +35,7 @@ const mui_1 = require("tss-react/mui");
 const SyntenyTooltip_1 = __importDefault(require("./SyntenyTooltip"));
 const drawSynteny_1 = require("../drawSynteny");
 const SyntenyContextMenu_1 = __importDefault(require("./SyntenyContextMenu"));
+const util_2 = require("./util");
 const useStyles = (0, mui_1.makeStyles)()({
     pix: {
         imageRendering: 'pixelated',
@@ -59,30 +60,44 @@ const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, })
     const view = (0, util_1.getContainingView)(model);
     const height = view.middleComparativeHeight;
     const width = view.width;
+    const delta = (0, react_1.useRef)(0);
+    const timeout = (0, react_1.useRef)();
     const [anchorEl, setAnchorEl] = (0, react_1.useState)();
     const [tooltip, setTooltip] = (0, react_1.useState)('');
     const [currX, setCurrX] = (0, react_1.useState)();
     const [mouseCurrDownX, setMouseCurrDownX] = (0, react_1.useState)();
     const [mouseInitialDownX, setMouseInitialDownX] = (0, react_1.useState)();
     const [currY, setCurrY] = (0, react_1.useState)();
+    const { mouseoverId } = model;
     // these useCallbacks avoid new refs from being created on any mouseover, etc.
     const k1 = (0, react_1.useCallback)((ref) => model.setMouseoverCanvasRef(ref), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [model, height, width]);
-    const k2 = (0, react_1.useCallback)((ref) => model.setMainCanvasRef(ref), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
-    const k3 = (0, react_1.useCallback)((ref) => model.setClickMapCanvasRef(ref), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
-    const k4 = (0, react_1.useCallback)((ref) => model.setCigarClickMapCanvasRef(ref), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
-    return (react_1.default.createElement("div", { className: classes.rel },
-        react_1.default.createElement("canvas", { ref: k1, width: width, height: height, className: cx(classes.abs, classes.none) }),
-        react_1.default.createElement("canvas", { ref: k2, onWheel: event => {
+    const k2 = (0, react_1.useCallback)((ref) => {
+        model.setMainCanvasRef(ref);
+        function onWheel(event) {
+            event.preventDefault();
+            if (event.ctrlKey === true) {
+                delta.current += event.deltaY / 500;
+                for (const v of view.views) {
+                    v.setScaleFactor(delta.current < 0 ? 1 - delta.current : 1 / (1 + delta.current));
+                }
+                if (timeout.current) {
+                    clearTimeout(timeout.current);
+                }
+                timeout.current = setTimeout(() => {
+                    for (const v of view.views) {
+                        v.setScaleFactor(1);
+                        v.zoomTo(delta.current > 0
+                            ? v.bpPerPx * (1 + delta.current)
+                            : v.bpPerPx / (1 - delta.current), event.clientX - ((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().left) || 0));
+                    }
+                    delta.current = 0;
+                }, 300);
+            }
+            else {
                 if (Math.abs(event.deltaY) < Math.abs(event.deltaX)) {
-                    xOffset.current += event.deltaX;
+                    xOffset.current += event.deltaX / 2;
                 }
                 if (currScrollFrame.current === undefined) {
                     currScrollFrame.current = requestAnimationFrame(() => {
@@ -95,7 +110,28 @@ const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, })
                         });
                     });
                 }
-            }, onMouseMove: event => {
+            }
+        }
+        if (ref) {
+            ref.addEventListener('wheel', onWheel);
+            // this is a react 19-ism to have a cleanup in the ref callback
+            // https://react.dev/blog/2024/04/25/react-19#cleanup-functions-for-refs
+            // note: it warns in earlier versions of react
+            return () => ref.removeEventListener('wheel', onWheel);
+        }
+        return () => { };
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width]);
+    const k3 = (0, react_1.useCallback)((ref) => model.setClickMapCanvasRef(ref), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width]);
+    const k4 = (0, react_1.useCallback)((ref) => model.setCigarClickMapCanvasRef(ref), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width]);
+    return (react_1.default.createElement("div", { className: classes.rel },
+        react_1.default.createElement("canvas", { ref: k1, width: width, height: height, className: cx(classes.abs, classes.none) }),
+        react_1.default.createElement("canvas", { ref: k2, onMouseMove: event => {
                 var _a;
                 if (mouseCurrDownX !== undefined) {
                     xOffset.current += mouseCurrDownX - event.clientX;
@@ -141,7 +177,7 @@ 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(getTooltip(f, cigar[cigarIdx], cigar[cigarIdx + 1]));
+                        setTooltip((0, util_2.getTooltip)(f, cigar[cigarIdx], cigar[cigarIdx + 1]));
                     }
                 }
             }, onMouseLeave: () => {
@@ -155,95 +191,12 @@ const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, })
                 setMouseCurrDownX(undefined);
                 if (mouseInitialDownX !== undefined &&
                     Math.abs(evt.clientX - mouseInitialDownX) < 5) {
-                    onSyntenyClick(evt, model);
+                    (0, util_2.onSynClick)(evt, model);
                 }
-            }, onContextMenu: evt => {
-                onSyntenyContextClick(evt, model, setAnchorEl);
-            }, "data-testid": "synteny_canvas", className: classes.abs, width: width, height: height }),
+            }, onContextMenu: evt => (0, util_2.onSynContextClick)(evt, model, setAnchorEl), "data-testid": "synteny_canvas", className: classes.abs, width: width, height: height }),
         react_1.default.createElement("canvas", { ref: k3, className: classes.pix, width: width, height: height }),
         react_1.default.createElement("canvas", { ref: k4, className: classes.pix, width: width, height: height }),
-        model.mouseoverId && tooltip && currX && currY ? (react_1.default.createElement(SyntenyTooltip_1.default, { title: tooltip })) : null,
+        mouseoverId && tooltip && currX && currY ? (react_1.default.createElement(SyntenyTooltip_1.default, { title: tooltip })) : null,
         anchorEl ? (react_1.default.createElement(SyntenyContextMenu_1.default, { model: model, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined) })) : null));
 });
-function onSyntenyClick(event, model) {
-    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 x = event.clientX - rect.left;
-    const y = event.clientY - rect.top;
-    const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
-    const unitMultiplier = Math.floor(drawSynteny_1.MAX_COLOR_RANGE / model.numFeats);
-    const id = (0, drawSynteny_1.getId)(r1, g1, b1, unitMultiplier);
-    const feat = model.featPositions[id];
-    if (feat) {
-        const { f } = feat;
-        model.setClickId(f.id());
-        const session = (0, util_1.getSession)(model);
-        if ((0, util_1.isSessionModelWithWidgets)(session)) {
-            session.showWidget(session.addWidget('SyntenyFeatureWidget', 'syntenyFeature', {
-                featureData: {
-                    feature1: f.toJSON(),
-                    feature2: f.get('mate'),
-                },
-            }));
-        }
-    }
-    return feat;
-}
-function onSyntenyContextClick(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(drawSynteny_1.MAX_COLOR_RANGE / model.numFeats);
-    const id = (0, drawSynteny_1.getId)(r1, g1, b1, unitMultiplier);
-    const f = model.featPositions[id];
-    if (f) {
-        model.setClickId(f.f.id());
-        setAnchorEl({ clientX, clientY, feature: f });
-    }
-}
-function getTooltip(f, cigarOp, cigarOpLen) {
-    // @ts-expect-error
-    const f1 = f.toJSON();
-    const f2 = f1.mate;
-    const l1 = f1.end - f1.start;
-    const l2 = f2.end - f2.start;
-    const identity = f1.identity;
-    const n1 = f1.name;
-    const n2 = f2.name;
-    return [
-        `Loc1: ${(0, util_1.assembleLocString)(f1)}`,
-        `Loc2: ${(0, util_1.assembleLocString)(f2)}`,
-        `Inverted: ${f1.strand === -1}`,
-        `Query len: ${l1.toLocaleString('en-US')}`,
-        `Target len: ${l2.toLocaleString('en-US')}`,
-        identity ? `Identity: ${identity.toPrecision(2)}` : '',
-        cigarOp ? `CIGAR operator: ${cigarOp}${cigarOpLen}` : '',
-        n1 ? `Name 1: ${n1}` : '',
-        n2 ? `Name 1: ${n2}` : '',
-    ]
-        .filter(f => !!f)
-        .join('<br/>');
-}
 exports.default = LinearSyntenyRendering;

package/dist/LinearSyntenyDisplay/components/SyntenyContextMenu.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SyntenyContextMenu;
 const react_1 = __importDefault(require("react"));
 const util_1 = require("@jbrowse/core/util");
 const ui_1 = require("@jbrowse/core/ui");
@@ -54,4 +55,3 @@ function SyntenyContextMenu({ model, onClose, anchorEl, }) {
             },
         ] }));
 }
-exports.default = SyntenyContextMenu;

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

@@ -1,7 +1,14 @@
+import React from 'react';
 import { Feature } from '@jbrowse/core/util';
+import { LinearSyntenyDisplayModel } from '../model';
 interface Pos {
     offsetPx: number;
 }
+export interface ClickCoord {
+    clientX: number;
+    clientY: number;
+    feature: any;
+}
 interface FeatPos {
     p11: Pos;
     p12: Pos;
@@ -24,4 +31,7 @@ export declare function drawMatchSimple({ feature, ctx, offsets, cb, height, dra
 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 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(f: Feature, cigarOp?: string, cigarOpLen?: string): string;
 export {};