@jbrowse/plugin-linear-comparative-view 2.9.0 → 2.10.0

package/esm/LinearComparativeDisplay/stateModelFactory.d.ts

@@ -4,6 +4,8 @@ import { Instance } from 'mobx-state-tree';
 import { Feature } from '@jbrowse/core/util';
 /**
  * #stateModel LinearComparativeDisplay
+ * extends
+ * - [BaseDisplay](../basedisplay)
  */
 declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
@@ -21,7 +23,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     readonly RenderingComponent: import("react").FC<{
         model: {
             id: string;
-            type: string;
+            type: string; /**
+             * #property
+             */
             rpcDriverName: string | undefined;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
@@ -30,12 +34,12 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
             id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
             type: import("mobx-state-tree").ISimpleType<string>;
-            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>; /**
+            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+        }, {
+            rendererTypeName: string; /**
              * #action
              * controlled by a reaction
              */
-        }, {
-            rendererTypeName: string;
             error: unknown;
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
@@ -48,10 +52,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             type: string;
             rpcDriverName: string | undefined;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-            rendererTypeName: string; /**
-             * #action
-             * controlled by a reaction
-             */
+            rendererTypeName: string;
             error: unknown;
             message: string | undefined;
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
@@ -67,7 +68,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     readonly adapterConfig: any;
     readonly parentTrack: any;
     renderProps(): any;
-    readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
+    readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType; /**
+     * #action
+     * controlled by a reaction
+     */
     readonly DisplayMessageComponent: import("react").FC<any> | undefined;
     trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
@@ -105,7 +109,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             readonly RenderingComponent: import("react").FC<{
                 model: {
                     id: string;
-                    type: string;
+                    type: string; /**
+                     * #property
+                     */
                     rpcDriverName: string | undefined;
                 } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
                     rendererTypeName: string;
@@ -114,12 +120,12 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                 } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
                     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
                     type: import("mobx-state-tree").ISimpleType<string>;
-                    rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>; /**
+                    rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+                }, {
+                    rendererTypeName: string; /**
                      * #action
                      * controlled by a reaction
                      */
-                }, {
-                    rendererTypeName: string;
                     error: unknown;
                     message: string | undefined;
                 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
@@ -132,10 +138,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     type: string;
                     rpcDriverName: string | undefined;
                 } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-                    rendererTypeName: string; /**
-                     * #action
-                     * controlled by a reaction
-                     */
+                    rendererTypeName: string;
                     error: unknown;
                     message: string | undefined;
                 } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
@@ -151,7 +154,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             readonly adapterConfig: any;
             readonly parentTrack: any;
             renderProps(): any;
-            readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
+            readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType; /**
+             * #action
+             * controlled by a reaction
+             */
             readonly DisplayMessageComponent: import("react").FC<any> | undefined;
             trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
             readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
@@ -181,7 +187,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             readonly RenderingComponent: import("react").FC<{
                 model: {
                     id: string;
-                    type: string;
+                    type: string; /**
+                     * #property
+                     */
                     rpcDriverName: string | undefined;
                 } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
                     rendererTypeName: string;
@@ -190,12 +198,12 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                 } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
                     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
                     type: import("mobx-state-tree").ISimpleType<string>;
-                    rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>; /**
+                    rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+                }, {
+                    rendererTypeName: string; /**
                      * #action
                      * controlled by a reaction
                      */
-                }, {
-                    rendererTypeName: string;
                     error: unknown;
                     message: string | undefined;
                 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
@@ -208,10 +216,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     type: string;
                     rpcDriverName: string | undefined;
                 } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-                    rendererTypeName: string; /**
-                     * #action
-                     * controlled by a reaction
-                     */
+                    rendererTypeName: string;
                     error: unknown;
                     message: string | undefined;
                 } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
@@ -227,7 +232,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             readonly adapterConfig: any;
             readonly parentTrack: any;
             renderProps(): any;
-            readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
+            readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType; /**
+             * #action
+             * controlled by a reaction
+             */
             readonly DisplayMessageComponent: import("react").FC<any> | undefined;
             trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
             readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];

package/esm/LinearComparativeDisplay/stateModelFactory.js

@@ -5,6 +5,8 @@ import { getRpcSessionId } from '@jbrowse/core/util/tracks';
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models';
 /**
  * #stateModel LinearComparativeDisplay
+ * extends
+ * - [BaseDisplay](../basedisplay)
  */
 function stateModelFactory(configSchema) {
     return types

package/esm/LinearComparativeView/model.d.ts

@@ -5,6 +5,8 @@ import PluginManager from '@jbrowse/core/PluginManager';
 import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
 /**
  * #stateModel LinearComparativeView
+ * extends
+ * - [BaseViewModel](../baseviewmodel)
  */
 declare function stateModelFactory(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
@@ -34,9 +36,6 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
             end: import("mobx-state-tree").ISimpleType<number>;
             reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
         } & {
-            /**
-             * #property
-             */
             assemblyName: import("mobx-state-tree").ISimpleType<string>;
         }, {
             setRefName(newRefName: string): void;
@@ -64,7 +63,9 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         draggingTrackId: string | undefined;
         volatileError: unknown;
         afterDisplayedRegionsSetCallbacks: Function[];
-        scaleFactor: number;
+        scaleFactor: number; /**
+         * #action
+         */
         trackRefs: Record<string, HTMLDivElement>;
         coarseDynamicBlocks: import("@jbrowse/core/util/blockTypes").BaseBlock[];
         coarseTotalBp: number;
@@ -192,7 +193,8 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
             } & {
                 getConf(arg: string): any;
             } & {
-                readonly initialized: boolean; /**
+                readonly initialized: boolean;
+                /**
                  * #property
                  */
                 readonly name: string;
@@ -226,11 +228,17 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
                 load(): Promise<void>;
                 loadPre(): Promise<void>;
             } & {
-                getAdapterMapEntry(adapterConf: unknown, options: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<import("@jbrowse/core/assemblyManager/assembly").RefNameMap>;
-                getRefNameMapForAdapter(adapterConf: unknown, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
+                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: unknown, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
+                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<{
@@ -250,7 +258,8 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
             } & {
                 getConf(arg: string): any;
             } & {
-                readonly initialized: boolean; /**
+                readonly initialized: boolean;
+                /**
                  * #property
                  */
                 readonly name: string;
@@ -284,11 +293,17 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
                 load(): Promise<void>;
                 loadPre(): Promise<void>;
             } & {
-                getAdapterMapEntry(adapterConf: unknown, options: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<import("@jbrowse/core/assemblyManager/assembly").RefNameMap>;
-                getRefNameMapForAdapter(adapterConf: unknown, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
+                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: unknown, opts: import("@jbrowse/core/data_adapters/BaseAdapter").BaseOptions): Promise<{
+                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>>;

package/esm/LinearComparativeView/model.js

@@ -12,6 +12,8 @@ import FolderOpenIcon from '@mui/icons-material/FolderOpen';
 const ReturnToImportFormDialog = lazy(() => import('@jbrowse/core/ui/ReturnToImportFormDialog'));
 /**
  * #stateModel LinearComparativeView
+ * extends
+ * - [BaseViewModel](../baseviewmodel)
  */
 function stateModelFactory(pluginManager) {
     return types

package/esm/LinearReadVsRef/index.js

@@ -1,8 +1,9 @@
+import { lazy } from 'react';
 import { getSession, getContainingTrack } from '@jbrowse/core/util';
 // icons
 import AddIcon from '@mui/icons-material/Add';
 // locals
-import ReadVsRefDialog from './LinearReadVsRef';
+const ReadVsRefDialog = lazy(() => import('./LinearReadVsRef'));
 function isDisplay(elt) {
     return elt.name === 'LinearPileupDisplay';
 }

package/esm/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -1,16 +1,41 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import { observer } from 'mobx-react';
 import { assembleLocString, getContainingView, getSession, isSessionModelWithWidgets, } 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';
+const useStyles = makeStyles()({
+    pix: {
+        imageRendering: 'pixelated',
+        pointerEvents: 'none',
+        visibility: 'hidden',
+        position: 'absolute',
+    },
+    rel: {
+        position: 'relative',
+    },
+    abs: {
+        position: 'absolute',
+    },
+    none: {
+        pointEvents: 'none',
+    },
+});
 const LinearSyntenyRendering = observer(function ({ model, }) {
-    const highResolutionScaling = 1;
+    const { classes, cx } = useStyles();
+    const xOffset = useRef(0);
+    const currScrollFrame = useRef();
     const view = getContainingView(model);
     const height = view.middleComparativeHeight;
     const width = view.width;
+    const [anchorEl, setAnchorEl] = useState();
     const [tooltip, setTooltip] = useState('');
     const [currX, setCurrX] = useState();
+    const [mouseCurrDownX, setMouseCurrDownX] = useState();
+    const [mouseInitialDownX, setMouseInitialDownX] = useState();
     const [currY, setCurrY] = useState();
     // these useCallbacks avoid new refs from being created on any mouseover, etc.
     const k1 = useCallback((ref) => model.setMouseoverCanvasRef(ref), 
@@ -25,108 +50,172 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
     const k4 = useCallback((ref) => model.setCigarClickMapCanvasRef(ref), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [model, height, width]);
-    return (React.createElement("div", { style: { position: 'relative' } },
-        React.createElement("canvas", { ref: k1, width: width, height: height, style: { width, height, position: 'absolute', pointerEvents: 'none' } }),
-        React.createElement("canvas", { ref: k2, onMouseMove: event => {
-                var _a;
-                const ref1 = model.clickMapCanvas;
-                const ref2 = model.cigarClickMapCanvas;
-                if (!ref1 || !ref2) {
-                    return;
+    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 => {
+                if (Math.abs(event.deltaY) < Math.abs(event.deltaX)) {
+                    xOffset.current += event.deltaX;
                 }
-                const rect = ref1.getBoundingClientRect();
-                const ctx1 = ref1.getContext('2d');
-                const ctx2 = ref2.getContext('2d');
-                if (!ctx1 || !ctx2) {
-                    return;
+                if (currScrollFrame.current === undefined) {
+                    currScrollFrame.current = requestAnimationFrame(() => {
+                        transaction(() => {
+                            for (const v of view.views) {
+                                v.horizontalScroll(xOffset.current);
+                            }
+                            xOffset.current = 0;
+                            currScrollFrame.current = undefined;
+                        });
+                    });
                 }
-                const { clientX, clientY } = event;
-                const x = clientX - rect.left;
-                const y = clientY - rect.top;
-                setCurrX(clientX);
-                setCurrY(clientY);
-                const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
-                const [r2, g2, b2] = ctx2.getImageData(x, y, 1, 1).data;
-                const unitMultiplier = Math.floor(MAX_COLOR_RANGE / model.numFeats);
-                const id = getId(r1, g1, b1, unitMultiplier);
-                model.setMouseoverId((_a = model.featPositions[id]) === null || _a === void 0 ? void 0 : _a.f.id());
-                if (id === -1) {
-                    setTooltip('');
+            }, onMouseMove: event => {
+                var _a;
+                if (mouseCurrDownX !== undefined) {
+                    xOffset.current += mouseCurrDownX - event.clientX;
+                    setMouseCurrDownX(event.clientX);
+                    if (currScrollFrame.current === undefined) {
+                        currScrollFrame.current = requestAnimationFrame(() => {
+                            transaction(() => {
+                                for (const v of view.views) {
+                                    v.horizontalScroll(xOffset.current);
+                                }
+                                xOffset.current = 0;
+                                currScrollFrame.current = undefined;
+                            });
+                        });
+                    }
                 }
-                else if (model.featPositions[id]) {
-                    const { f, cigar } = model.featPositions[id];
-                    // @ts-expect-error
-                    const f1 = f.toJSON();
-                    const f2 = f1.mate;
-                    const unitMultiplier2 = Math.floor(MAX_COLOR_RANGE / cigar.length);
-                    const cigarIdx = getId(r2, g2, b2, unitMultiplier2);
-                    const l1 = f1.end - f1.start;
-                    const l2 = f2.end - f2.start;
-                    const identity = f1.identity;
-                    const n1 = f1.name;
-                    const n2 = f2.name;
-                    const tooltip = [
-                        `Loc1: ${assembleLocString(f1)}`,
-                        `Loc2: ${assembleLocString(f2)}`,
-                        `Inverted: ${f1.strand === -1}`,
-                        `Query len: ${l1}`,
-                        `Target len: ${l2}`,
-                    ];
-                    if (identity) {
-                        tooltip.push(`Identity: ${identity}`);
+                else {
+                    const ref1 = model.clickMapCanvas;
+                    const ref2 = model.cigarClickMapCanvas;
+                    if (!ref1 || !ref2) {
+                        return;
                     }
-                    if (cigar[cigarIdx]) {
-                        tooltip.push(`CIGAR operator: ${cigar[cigarIdx]}${cigar[cigarIdx + 1]}`);
+                    const rect = ref1.getBoundingClientRect();
+                    const ctx1 = ref1.getContext('2d');
+                    const ctx2 = ref2.getContext('2d');
+                    if (!ctx1 || !ctx2) {
+                        return;
                     }
-                    if (n1 && n2) {
-                        tooltip.push(`Name 1: ${n1}`, `Name 2: ${n2}`);
+                    const { clientX, clientY } = event;
+                    const x = clientX - rect.left;
+                    const y = clientY - rect.top;
+                    setCurrX(clientX);
+                    setCurrY(clientY);
+                    const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
+                    const [r2, g2, b2] = ctx2.getImageData(x, y, 1, 1).data;
+                    const unitMultiplier = Math.floor(MAX_COLOR_RANGE / model.numFeats);
+                    const id = getId(r1, g1, b1, unitMultiplier);
+                    model.setMouseoverId((_a = model.featPositions[id]) === null || _a === void 0 ? void 0 : _a.f.id());
+                    if (id === -1) {
+                        setTooltip('');
+                    }
+                    else if (model.featPositions[id]) {
+                        const { f, cigar } = model.featPositions[id];
+                        const unitMultiplier2 = Math.floor(MAX_COLOR_RANGE / cigar.length);
+                        const cigarIdx = getId(r2, g2, b2, unitMultiplier2);
+                        setTooltip(getTooltip(f, cigar[cigarIdx], cigar[cigarIdx + 1]));
                     }
-                    setTooltip(tooltip.join('<br/>'));
-                }
-            }, onMouseLeave: () => model.setMouseoverId(undefined), onClick: event => {
-                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 f = model.featPositions[id];
-                if (!f) {
-                    return;
                 }
-                model.setClickId(f.f.id());
-                const session = getSession(model);
-                if (isSessionModelWithWidgets(session)) {
-                    session.showWidget(session.addWidget('SyntenyFeatureWidget', 'syntenyFeature', {
-                        featureData: {
-                            feature1: f.f.toJSON(),
-                            feature2: f.f.get('mate'),
-                        },
-                    }));
+            }, onMouseLeave: () => {
+                model.setMouseoverId(undefined);
+                setMouseInitialDownX(undefined);
+                setMouseCurrDownX(undefined);
+            }, onMouseDown: evt => {
+                setMouseCurrDownX(evt.clientX);
+                setMouseInitialDownX(evt.clientX);
+            }, onMouseUp: evt => {
+                setMouseCurrDownX(undefined);
+                if (mouseInitialDownX !== undefined &&
+                    Math.abs(evt.clientX - mouseInitialDownX) < 5) {
+                    onSyntenyClick(evt, model);
                 }
-            }, "data-testid": "synteny_canvas", style: { width, height, position: 'absolute' }, width: width * highResolutionScaling, height: height * highResolutionScaling }),
-        React.createElement("canvas", { ref: k3, style: {
-                imageRendering: 'pixelated',
-                pointerEvents: 'none',
-                visibility: 'hidden',
-                position: 'absolute',
-            }, width: width, height: height }),
-        React.createElement("canvas", { ref: k4, style: {
-                imageRendering: 'pixelated',
-                pointerEvents: 'none',
-                visibility: 'hidden',
-                position: 'absolute',
-            }, width: width, height: height }),
-        model.mouseoverId && tooltip && currX && currY ? (React.createElement(SyntenyTooltip, { x: currX, y: currY, title: tooltip })) : null));
+            }, onContextMenu: evt => {
+                onSyntenyContextClick(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,
+        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/SyntenyContextMenu.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { LinearSyntenyDisplayModel } from '../model';
+interface ClickCoord {
+    clientX: number;
+    clientY: number;
+    feature: any;
+}
+export default function SyntenyContextMenu({ model, onClose, anchorEl, }: {
+    onClose: () => void;
+    model: LinearSyntenyDisplayModel;
+    anchorEl: ClickCoord;
+}): React.JSX.Element;
+export {};