@jbrowse/plugin-linear-comparative-view 2.11.1 → 2.12.0

package/dist/LGVSyntenyDisplay/components/util.js

@@ -24,7 +24,7 @@ function findPosInCigar(cigar, startX) {
         else if (op === 'D') {
             featX += min;
         }
-        else if (op === 'M') {
+        else if (op === 'M' || op === '=' || op === 'X') {
             mateX += min;
             featX += min;
         }

package/dist/LGVSyntenyDisplay/configSchemaF.d.ts

@@ -48,5 +48,10 @@ declare function configSchemaF(pluginManager: PluginManager): import("@jbrowse/c
         defaultValue: string;
         contextVariable: string[];
     };
+    jexlFilters: {
+        type: string;
+        description: string;
+        defaultValue: never[];
+    };
 }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>, undefined>>, undefined>>;
 export default configSchemaF;

package/dist/LGVSyntenyDisplay/model.d.ts

@@ -85,9 +85,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
         height: {
             type: string;
             defaultValue: number;
-            description: string; /**
-             * #method
-             */
+            description: string;
         };
         mouseover: {
             type: string;
@@ -95,6 +93,11 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
             defaultValue: string;
             contextVariable: string[];
         };
+        jexlFilters: {
+            type: string;
+            description: string;
+            defaultValue: never[];
+        };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
 } & {
     configuration: AnyConfigurationSchemaType;
@@ -240,6 +243,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     deleteBlock(key: string): void;
     selectFeature(feature: import("@jbrowse/core/util").Feature): void;
+    navToFeature(feature: import("@jbrowse/core/util").Feature): void;
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string | undefined): void;
     setContextMenuFeature(feature?: import("@jbrowse/core/util").Feature | undefined): void;

package/dist/LinearComparativeView/model.d.ts

@@ -17,7 +17,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 +29,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>;
@@ -140,6 +130,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         getSelectedRegions(leftOffset?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined, rightOffset?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").BpOffset | undefined): {
             start: number;
             end: number;
+            type: string;
             regionNumber?: number | undefined;
             reversed?: boolean | undefined;
             refName: string;
@@ -197,14 +188,13 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
                 lowerCaseRefNameAliases: {
                     [x: string]: string | undefined;
                 } | undefined;
-                cytobands: import("@jbrowse/core/util").Feature[] | undefined;
+                cytobands: import("@jbrowse/core/util").Feature[] | undefined; /**
+                 * #property
+                 */
             } & {
                 getConf(arg: string): any;
             } & {
                 readonly initialized: boolean;
-                /**
-                 * #property
-                 */
                 readonly name: string;
                 readonly regions: import("@jbrowse/core/assemblyManager/assembly").BasicRegion[] | undefined;
                 readonly aliases: string[];
@@ -262,14 +252,13 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
                 lowerCaseRefNameAliases: {
                     [x: string]: string | undefined;
                 } | undefined;
-                cytobands: import("@jbrowse/core/util").Feature[] | undefined;
+                cytobands: import("@jbrowse/core/util").Feature[] | undefined; /**
+                 * #property
+                 */
             } & {
                 getConf(arg: string): any;
             } & {
                 readonly initialized: boolean;
-                /**
-                 * #property
-                 */
                 readonly name: string;
                 readonly regions: import("@jbrowse/core/assemblyManager/assembly").BasicRegion[] | undefined;
                 readonly aliases: string[];
@@ -339,7 +328,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
             offset: number;
             start: number;
             end: number;
-            reversed: boolean;
+            reversed?: boolean | undefined;
         };
         readonly centerLineInfo: {
             coord: number;
@@ -350,7 +339,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
             offset: number;
             start: number;
             end: number;
-            reversed: boolean;
+            reversed?: boolean | undefined;
         } | undefined;
     } & {
         afterCreate(): void;
@@ -363,16 +352,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>;
@@ -414,7 +394,6 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
      */
     readonly assemblyNames: string[];
 } & {
-    afterAttach(): void;
     beforeDestroy(): void;
     onSubviewAction(actionName: string, path: string, args?: unknown[]): void;
     /**
@@ -439,10 +418,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/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/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 {};

package/dist/LinearSyntenyDisplay/components/util.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.drawBezierBox = exports.drawBox = exports.draw = exports.drawMatchSimple = void 0;
+exports.getTooltip = exports.onSynContextClick = exports.onSynClick = exports.drawBezierBox = exports.drawBox = exports.draw = exports.drawMatchSimple = void 0;
 const util_1 = require("@jbrowse/core/util");
+// locals
+const drawSynteny_1 = require("../drawSynteny");
 function drawMatchSimple({ feature, ctx, offsets, cb, height, drawCurves, oobLimit, viewWidth, hideTiny, }) {
     const { p11, p12, p21, p22 } = feature;
     const x11 = p11.offsetPx - offsets[0];
@@ -81,3 +83,87 @@ function drawBezierBox(ctx, x1, x2, y1, x3, x4, y2, mid) {
     ctx.fill();
 }
 exports.drawBezierBox = drawBezierBox;
+function onSynClick(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;
+}
+exports.onSynClick = onSynClick;
+function onSynContextClick(event, model, setAnchorEl) {
+    event.preventDefault();
+    const ref1 = model.clickMapCanvas;
+    const ref2 = model.cigarClickMapCanvas;
+    if (!ref1 || !ref2) {
+        return;
+    }
+    const rect = ref1.getBoundingClientRect();
+    const ctx1 = ref1.getContext('2d');
+    const ctx2 = ref2.getContext('2d');
+    if (!ctx1 || !ctx2) {
+        return;
+    }
+    const { clientX, clientY } = event;
+    const x = clientX - rect.left;
+    const y = clientY - rect.top;
+    const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
+    const unitMultiplier = Math.floor(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 });
+    }
+}
+exports.onSynContextClick = onSynContextClick;
+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.getTooltip = getTooltip;

package/dist/LinearSyntenyView/components/ImportForm/index.js

@@ -93,6 +93,7 @@ const LinearSyntenyViewImportForm = (0, mobx_react_1.observer)(function ({ model
                 };
             })));
             model.views.forEach(view => view.setWidth(model.width));
+            model.views.forEach(view => view.showAllRegions());
             if (sessionTrackData) {
                 session.addTrackConf(sessionTrackData);
                 model.toggleTrack(sessionTrackData.trackId);