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

package/esm/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/esm/LinearComparativeView/model.js

@@ -1,5 +1,5 @@
 import { lazy } from 'react';
-import { addDisposer, cast, getParent, getPath, getRoot, onAction, resolveIdentifier, types, } from 'mobx-state-tree';
+import { addDisposer, cast, getParent, getPath, getRoot, resolveIdentifier, types, } from 'mobx-state-tree';
 import { autorun, transaction } from 'mobx';
 // jbrowse
 import BaseViewModel from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
@@ -34,10 +34,6 @@ function stateModelFactory(pluginManager) {
          * #property
          */
         showIntraviewLinks: true,
-        /**
-         * #property
-         */
-        linkViews: false,
         /**
          * #property
          */
@@ -98,19 +94,6 @@ function stateModelFactory(pluginManager) {
         },
     }))
         .actions(self => ({
-        afterAttach() {
-            addDisposer(self, 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() {
@@ -163,12 +146,6 @@ function stateModelFactory(pluginManager) {
             self.middleComparativeHeight = n;
             return self.middleComparativeHeight;
         },
-        /**
-         * #action
-         */
-        toggleLinkViews() {
-            self.linkViews = !self.linkViews;
-        },
         /**
          * #action
          */

package/esm/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -1,12 +1,13 @@
 import React, { useState, useCallback, useRef } from 'react';
 import { observer } from 'mobx-react';
-import { assembleLocString, getContainingView, getSession, isSessionModelWithWidgets, } from '@jbrowse/core/util';
+import { getContainingView } from '@jbrowse/core/util';
 import { transaction } from 'mobx';
 import { makeStyles } from 'tss-react/mui';
 // locals
 import SyntenyTooltip from './SyntenyTooltip';
 import { getId, MAX_COLOR_RANGE } from '../drawSynteny';
 import SyntenyContextMenu from './SyntenyContextMenu';
+import { getTooltip, onSynClick, onSynContextClick } from './util';
 const useStyles = makeStyles()({
     pix: {
         imageRendering: 'pixelated',
@@ -31,30 +32,44 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
     const view = getContainingView(model);
     const height = view.middleComparativeHeight;
     const width = view.width;
+    const delta = useRef(0);
+    const timeout = useRef();
     const [anchorEl, setAnchorEl] = useState();
     const [tooltip, setTooltip] = useState('');
     const [currX, setCurrX] = useState();
     const [mouseCurrDownX, setMouseCurrDownX] = useState();
     const [mouseInitialDownX, setMouseInitialDownX] = useState();
     const [currY, setCurrY] = useState();
+    const { mouseoverId } = model;
     // these useCallbacks avoid new refs from being created on any mouseover, etc.
     const k1 = useCallback((ref) => model.setMouseoverCanvasRef(ref), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [model, height, width]);
-    const k2 = useCallback((ref) => model.setMainCanvasRef(ref), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
-    const k3 = useCallback((ref) => model.setClickMapCanvasRef(ref), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
-    const k4 = useCallback((ref) => model.setCigarClickMapCanvasRef(ref), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
-    return (React.createElement("div", { className: classes.rel },
-        React.createElement("canvas", { ref: k1, width: width, height: height, className: cx(classes.abs, classes.none) }),
-        React.createElement("canvas", { ref: k2, onWheel: event => {
+    const k2 = 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(() => {
@@ -67,7 +82,28 @@ const LinearSyntenyRendering = 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 = useCallback((ref) => model.setClickMapCanvasRef(ref), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width]);
+    const k4 = useCallback((ref) => model.setCigarClickMapCanvasRef(ref), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width]);
+    return (React.createElement("div", { className: classes.rel },
+        React.createElement("canvas", { ref: k1, width: width, height: height, className: cx(classes.abs, classes.none) }),
+        React.createElement("canvas", { ref: k2, onMouseMove: event => {
                 var _a;
                 if (mouseCurrDownX !== undefined) {
                     xOffset.current += mouseCurrDownX - event.clientX;
@@ -127,95 +163,12 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
                 setMouseCurrDownX(undefined);
                 if (mouseInitialDownX !== undefined &&
                     Math.abs(evt.clientX - mouseInitialDownX) < 5) {
-                    onSyntenyClick(evt, model);
+                    onSynClick(evt, model);
                 }
-            }, onContextMenu: evt => {
-                onSyntenyContextClick(evt, model, setAnchorEl);
-            }, "data-testid": "synteny_canvas", className: classes.abs, width: width, height: height }),
+            }, onContextMenu: evt => onSynContextClick(evt, model, setAnchorEl), "data-testid": "synteny_canvas", className: classes.abs, width: width, height: height }),
         React.createElement("canvas", { ref: k3, className: classes.pix, width: width, height: height }),
         React.createElement("canvas", { ref: k4, className: classes.pix, width: width, height: height }),
-        model.mouseoverId && tooltip && currX && currY ? (React.createElement(SyntenyTooltip, { title: tooltip })) : null,
+        mouseoverId && tooltip && currX && currY ? (React.createElement(SyntenyTooltip, { title: tooltip })) : null,
         anchorEl ? (React.createElement(SyntenyContextMenu, { 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(MAX_COLOR_RANGE / model.numFeats);
-    const id = getId(r1, g1, b1, unitMultiplier);
-    const feat = model.featPositions[id];
-    if (feat) {
-        const { f } = feat;
-        model.setClickId(f.id());
-        const session = getSession(model);
-        if (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(MAX_COLOR_RANGE / model.numFeats);
-    const id = 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: ${assembleLocString(f1)}`,
-        `Loc2: ${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/>');
-}
 export default LinearSyntenyRendering;

package/esm/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 {};