@jbrowse/plugin-linear-comparative-view 2.16.0 → 2.16.1

package/dist/LGVSyntenyDisplay/components/LaunchSyntenyViewDialog.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Feature } from '@jbrowse/core/util';
-export default function LaunchSyntenyViewDialog({ model, feature, handleClose, }: {
+export default function LaunchSyntenyViewDialog({ model, feature, trackId, handleClose, }: {
     model: unknown;
     feature: Feature;
+    trackId: string;
     handleClose: () => void;
 }): React.JSX.Element;

package/dist/LGVSyntenyDisplay/components/LaunchSyntenyViewDialog.js

@@ -28,15 +28,16 @@ const react_1 = __importStar(require("react"));
 const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
-const util_2 = require("./util");
 const mui_1 = require("tss-react/mui");
+// locals
+const util_2 = require("./util");
 const useStyles = (0, mui_1.makeStyles)()({
     padding: {
         margin: 10,
         border: '1px solid #ccc',
     },
 });
-function LaunchSyntenyViewDialog({ model, feature, handleClose, }) {
+function LaunchSyntenyViewDialog({ model, feature, trackId, handleClose, }) {
     const { classes } = useStyles();
     const inverted = feature.get('strand') === -1;
     const [horizontallyFlip, setHorizontallyFlip] = (0, react_1.useState)(inverted);
@@ -59,6 +60,7 @@ function LaunchSyntenyViewDialog({ model, feature, handleClose, }) {
                                 feature,
                                 windowSize: +windowSize,
                                 horizontallyFlip,
+                                trackId,
                                 model,
                             });
                         }

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

@@ -1,8 +1,11 @@
 import { Feature } from '@jbrowse/core/util';
 import { IAnyStateTreeNode } from 'mobx-state-tree';
-export declare function navToSynteny({ feature, windowSize: ws, model, horizontallyFlip, }: {
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
+export declare function navToSynteny({ feature, windowSize: ws, model, trackId, view, horizontallyFlip, }: {
     windowSize: number;
+    trackId: string;
     horizontallyFlip: boolean;
     feature: Feature;
+    view?: LinearGenomeViewModel;
     model: IAnyStateTreeNode;
 }): Promise<void>;

package/dist/LGVSyntenyDisplay/components/util.js

@@ -30,18 +30,13 @@ function findPosInCigar(cigar, startX) {
     }
     return [featX, mateX];
 }
-async function navToSynteny({ feature, windowSize: ws, model, horizontallyFlip, }) {
+async function navToSynteny({ feature, windowSize: ws, model, trackId, view, horizontallyFlip, }) {
     const session = (0, util_1.getSession)(model);
-    const track = (0, util_1.getContainingTrack)(model);
-    const view = (0, util_1.getContainingView)(model);
-    const reg = view.dynamicBlocks.contentBlocks[0];
-    if (!reg) {
-        throw new Error('no visible region');
-    }
+    const reg = view === null || view === void 0 ? void 0 : view.dynamicBlocks.contentBlocks[0];
     const cigar = feature.get('CIGAR');
     const strand = feature.get('strand');
-    const regStart = reg.start;
-    const regEnd = reg.end;
+    const featRef = feature.get('refName');
+    const featAsm = feature.get('assemblyName');
     const featStart = feature.get('start');
     const featEnd = feature.get('end');
     const mate = feature.get('mate');
@@ -49,13 +44,13 @@ async function navToSynteny({ feature, windowSize: ws, model, horizontallyFlip,
     const mateEnd = mate.end;
     const mateAsm = mate.assemblyName;
     const mateRef = mate.refName;
-    const featAsm = reg.assemblyName;
-    const featRef = reg.refName;
     let rMateStart;
     let rMateEnd;
     let rFeatStart;
     let rFeatEnd;
-    if (cigar) {
+    if (reg && cigar) {
+        const regStart = reg.start;
+        const regEnd = reg.end;
         const p = parseCigar(cigar);
         const [fStartX, mStartX] = findPosInCigar(p, regStart - featStart);
         const [fEndX, mEndX] = findPosInCigar(p, regEnd - featStart);
@@ -72,17 +67,14 @@ async function navToSynteny({ feature, windowSize: ws, model, horizontallyFlip,
         rMateStart = mateStart;
         rMateEnd = mateEnd;
     }
-    const trackId = track.configuration.trackId;
     const view2 = session.addView('LinearSyntenyView', {
         type: 'LinearSyntenyView',
         views: [
             {
-                id: `${Math.random()}`,
                 type: 'LinearGenomeView',
                 hideHeader: true,
             },
             {
-                id: `${Math.random()}`,
                 type: 'LinearGenomeView',
                 hideHeader: true,
             },

package/dist/LGVSyntenyDisplay/model.d.ts

@@ -1,4 +1,5 @@
 import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
+import { Feature } from '@jbrowse/core/util';
 /**
  * #stateModel LGVSyntenyDisplay
  * displays location of "synteny" feature in a plain LGV, allowing linking out
@@ -10,7 +11,14 @@ import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
 declare function stateModelFactory(schema: AnyConfigurationSchemaType): 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" /**
+     * #stateModel LGVSyntenyDisplay
+     * displays location of "synteny" feature in a plain LGV, allowing linking out
+     * to external synteny views
+     *
+     * extends
+     * - [SharedLinearPileupDisplayMixin](../sharedlinearpileupdisplaymixin)
+     */).IMaybe<import("mobx-state-tree").ISimpleType<string>>;
 } & {
     heightPreConfig: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
 } & {
@@ -38,7 +46,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
         renderInProgress: AbortController | undefined;
         filled: boolean;
         reactElement: React.ReactElement | undefined;
-        features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
+        features: Map<string, Feature> | undefined;
         layout: any;
         status: string;
         error: unknown;
@@ -63,7 +71,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
         setMessage(messageText: string): void;
         setRendered(props: {
             reactElement: React.ReactElement;
-            features: Map<string, import("@jbrowse/core/util").Feature>;
+            features: Map<string, Feature>;
             layout: any;
             maxHeightReached: boolean;
             renderProps: any;
@@ -223,7 +231,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
 } & {
     featureIdUnderMouse: undefined | string;
-    contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
+    contextMenuFeature: undefined | Feature;
 } & {
     readonly DisplayMessageComponent: import("react").FC<any> | undefined;
     readonly blockType: "dynamicBlocks" | "staticBlocks";
@@ -233,19 +241,19 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
     readonly TooltipComponent: import("@jbrowse/core/util").AnyReactComponentType;
     readonly selectedFeatureId: string | undefined;
 } & {
-    readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
-    readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
+    readonly features: import("@jbrowse/core/util/compositeMap").default<string, Feature>;
+    readonly featureUnderMouse: Feature | undefined;
     getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
     getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
     searchFeatureByID(id: string): [number, number, number, number] | undefined;
 } & {
     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;
+    selectFeature(feature: Feature): void;
+    navToFeature(feature: Feature): void;
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string): void;
-    setContextMenuFeature(feature?: import("@jbrowse/core/util").Feature): void;
+    setContextMenuFeature(feature?: Feature): void;
 } & {
     reload(): Promise<void>;
 } & {
@@ -257,7 +265,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
     afterAttach(): void;
 } & {
     colorTagMap: import("mobx").ObservableMap<string, string>;
-    featureUnderMouseVolatile: undefined | import("@jbrowse/core/util").Feature;
+    featureUnderMouseVolatile: undefined | Feature;
     tagsReady: boolean;
 } & {
     readonly autorunReady: boolean;
@@ -272,9 +280,9 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
         extra?: import("@jbrowse/plugin-alignments/src/shared/color").ExtraColorBy;
     }): void;
     updateColorTagMap(uniqueTag: string[]): void;
-    setFeatureUnderMouse(feat?: import("@jbrowse/core/util").Feature): void;
-    selectFeature(feature: import("@jbrowse/core/util").Feature): void;
-    copyFeatureToClipboard(feature: import("@jbrowse/core/util").Feature): void;
+    setFeatureUnderMouse(feat?: Feature): void;
+    selectFeature(feature: Feature): void;
+    copyFeatureToClipboard(feature: Feature): void;
     setConfig(conf: import("@jbrowse/core/configuration").AnyConfigurationModel): void;
     setFilterBy(filter: import("@jbrowse/plugin-alignments/src/shared").IFilter): void;
     setJexlFilters(filters: string[]): void;
@@ -293,7 +301,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
 } & {
     readonly maxHeight: any;
     readonly featureHeightSetting: any;
-    readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
+    readonly featureUnderMouse: Feature | undefined;
     renderReady(): boolean;
     readonly filters: import("@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain").default;
 } & {
@@ -352,6 +360,10 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
         }[];
     })[];
 } & {
+    /**
+     * #action
+     */
+    selectFeature(feature: Feature): void;
     afterCreate(): void;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export default stateModelFactory;

package/dist/LGVSyntenyDisplay/model.js

@@ -62,12 +62,13 @@ function stateModelFactory(schema) {
                     ...(feature
                         ? [
                             {
-                                label: 'Open synteny view for this position',
+                                label: 'Launch synteny view for this position',
                                 onClick: () => {
                                     (0, util_1.getSession)(self).queueDialog(handleClose => [
                                         LaunchSyntenyViewDialog,
                                         {
                                             model: self,
+                                            trackId: (0, configuration_1.getConf)((0, util_1.getContainingTrack)(self), 'trackId'),
                                             handleClose,
                                             feature,
                                         },
@@ -98,6 +99,27 @@ function stateModelFactory(schema) {
         };
     })
         .actions(self => ({
+        /**
+         * #action
+         */
+        selectFeature(feature) {
+            const session = (0, util_1.getSession)(self);
+            if ((0, util_1.isSessionModelWithWidgets)(session)) {
+                const r2 = (0, util_1.getContainingView)(self);
+                let r3 = r2;
+                try {
+                    r3 = (0, util_1.getContainingView)(r3);
+                }
+                catch (e) { }
+                const featureWidget = session.addWidget('SyntenyFeatureWidget', 'syntenyFeature', {
+                    featureData: feature.toJSON(),
+                    view: r3,
+                    track: (0, util_1.getContainingTrack)(self),
+                });
+                session.showWidget(featureWidget);
+            }
+            session.setSelection(feature);
+        },
         afterCreate() {
             // use color by stand to help indicate inversions better on first load,
             // otherwise use selected orientation

package/dist/LinearComparativeDisplay/stateModelFactory.d.ts

@@ -43,7 +43,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
         onHorizontalScroll?: () => void;
-        blockState?: Record<string, any>;
+        blockState? /**
+         * #action
+         * controlled by a reaction
+         */: Record<string, any>;
     }>;
     readonly DisplayBlurb: React.FC<{
         model: {
@@ -55,7 +58,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             error: unknown;
             message: string | undefined;
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
-            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree" /**
+             * #action
+             * controlled by a reaction
+             */).ISimpleType<string>, [undefined]>;
             type: import("mobx-state-tree").ISimpleType<string>;
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         }, {
@@ -82,6 +88,14 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     features: Feature[] | undefined;
     message: string | undefined;
 } & {
+    /**
+     * #getter
+     */
+    readonly level: number;
+    /**
+     * #getter
+     */
+    readonly height: number;
     /**
      * #getter
      */
@@ -126,7 +140,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     message: string | undefined;
                 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
                 onHorizontalScroll?: () => void;
-                blockState?: Record<string, any>;
+                blockState? /**
+                 * #action
+                 * controlled by a reaction
+                 */: Record<string, any>;
             }>;
             readonly DisplayBlurb: React.FC<{
                 model: {
@@ -138,7 +155,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     error: unknown;
                     message: string | undefined;
                 } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
-                    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+                    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree" /**
+                     * #action
+                     * controlled by a reaction
+                     */).ISimpleType<string>, [undefined]>;
                     type: import("mobx-state-tree").ISimpleType<string>;
                     rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
                 }, {
@@ -201,7 +221,10 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     message: string | undefined;
                 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
                 onHorizontalScroll?: () => void;
-                blockState?: Record<string, any>;
+                blockState? /**
+                 * #action
+                 * controlled by a reaction
+                 */: Record<string, any>;
             }>;
             readonly DisplayBlurb: React.FC<{
                 model: {

package/dist/LinearComparativeDisplay/stateModelFactory.js

@@ -28,6 +28,18 @@ function stateModelFactory(configSchema) {
         message: undefined,
     }))
         .views(self => ({
+        /**
+         * #getter
+         */
+        get level() {
+            return (0, mobx_state_tree_1.getParent)(self, 4).level;
+        },
+        /**
+         * #getter
+         */
+        get height() {
+            return (0, mobx_state_tree_1.getParent)(self, 4).height;
+        },
         /**
          * #getter
          */
@@ -133,7 +145,7 @@ function renderBlockData(self) {
     // renderProps is something under our control.  Compare to
     // serverSideRenderedBlock
     (0, configuration_1.readConfObject)(self.configuration);
-    const { adapterConfig } = self;
+    const { level, adapterConfig } = self;
     const parent = (0, util_1.getContainingView)(self);
     const sessionId = (0, tracks_1.getRpcSessionId)(self);
     (0, mobx_state_tree_1.getSnapshot)(parent);
@@ -142,8 +154,7 @@ function renderBlockData(self) {
             rpcManager,
             renderProps: {
                 ...display.renderProps(),
-                // @ts-expect-error
-                level: (0, mobx_state_tree_1.getParent)(self, 4).level,
+                level,
                 view: parent,
                 adapterConfig,
                 sessionId,

package/dist/LinearSyntenyDisplay/afterAttach.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.doAfterAttach = doAfterAttach;
+const mobx_1 = require("mobx");
 const mobx_state_tree_1 = require("mobx-state-tree");
 const util_1 = require("@jbrowse/core/util");
 const Base1DUtils_1 = require("@jbrowse/core/util/Base1DUtils");
 const plugin_alignments_1 = require("@jbrowse/plugin-alignments");
-const mobx_1 = require("mobx");
 const drawSynteny_1 = require("./drawSynteny");
 function doAfterAttach(self) {
     (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
@@ -51,10 +51,9 @@ function doAfterAttach(self) {
         if (!initialized) {
             return;
         }
+        const { level } = self;
         const { assemblyManager } = (0, util_1.getSession)(self);
         const view = (0, util_1.getContainingView)(self);
-        // @ts-expect-error
-        const level = (0, mobx_state_tree_1.getParent)(self, 4).level;
         const viewSnaps = view.views.map(view => ({
             ...(0, mobx_state_tree_1.getSnapshot)(view),
             width: view.width,

package/dist/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -46,6 +46,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         position: 'relative',
     },
     mouseoverCanvas: {
+        imageRendering: 'pixelated',
         position: 'absolute',
         pointEvents: 'none',
     },
@@ -55,6 +56,7 @@ const useStyles = (0, mui_1.makeStyles)()({
 });
 const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
+    const { mouseoverId, height } = model;
     const xOffset = (0, react_1.useRef)(0);
     const view = (0, util_1.getContainingView)(model);
     const width = view.width;
@@ -67,20 +69,19 @@ const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, })
     const [mouseCurrDownX, setMouseCurrDownX] = (0, react_1.useState)();
     const [mouseInitialDownX, setMouseInitialDownX] = (0, react_1.useState)();
     const [currY, setCurrY] = (0, react_1.useState)();
-    const { mouseoverId, height } = model;
-    const k2p = (0, react_1.useRef)();
+    const mainSyntenyCanvasRefp = (0, react_1.useRef)();
     // these useCallbacks avoid new refs from being created on any mouseover,
     // etc.
     // biome-ignore lint/correctness/useExhaustiveDependencies:
-    const k1 = (0, react_1.useCallback)((ref) => {
+    const mouseoverDetectionCanvasRef = (0, react_1.useCallback)((ref) => {
         model.setMouseoverCanvasRef(ref);
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [model, height, width]);
     // biome-ignore lint/correctness/useExhaustiveDependencies:
-    const k2 = (0, react_1.useCallback)((ref) => {
+    const mainSyntenyCanvasRef = (0, react_1.useCallback)((ref) => {
         model.setMainCanvasRef(ref);
-        k2p.current = ref; // this ref is additionally used in useEffect below
+        mainSyntenyCanvasRefp.current = ref; // this ref is additionally used in useEffect below
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [model, height, width]);
@@ -103,7 +104,9 @@ const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, })
                         v.setScaleFactor(1);
                         v.zoomTo(delta.current > 0
                             ? v.bpPerPx * (1 + delta.current)
-                            : v.bpPerPx / (1 - delta.current), event.clientX - (((_a = k2p.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0));
+                            : v.bpPerPx / (1 - delta.current), event.clientX -
+                            (((_a = mainSyntenyCanvasRefp.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) ||
+                                0));
                     }
                     delta.current = 0;
                 }, 300);
@@ -126,28 +129,28 @@ const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, })
                 }
             }
         }
-        (_a = k2p.current) === null || _a === void 0 ? void 0 : _a.addEventListener('wheel', onWheel);
+        (_a = mainSyntenyCanvasRefp.current) === null || _a === void 0 ? void 0 : _a.addEventListener('wheel', onWheel);
         return () => {
             var _a;
-            (_a = k2p.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', onWheel);
+            (_a = mainSyntenyCanvasRefp.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', onWheel);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [model, height, width]);
     // biome-ignore lint/correctness/useExhaustiveDependencies:
-    const k3 = (0, react_1.useCallback)((ref) => {
+    const clickMapCanvasRef = (0, react_1.useCallback)((ref) => {
         model.setClickMapCanvasRef(ref);
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [model, height, width]);
     // biome-ignore lint/correctness/useExhaustiveDependencies:
-    const k4 = (0, react_1.useCallback)((ref) => {
+    const cigarClickMapCanvasRef = (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: classes.mouseoverCanvas }),
-        react_1.default.createElement("canvas", { ref: k2, onMouseMove: event => {
+        react_1.default.createElement("canvas", { ref: mouseoverDetectionCanvasRef, width: width, height: height, className: classes.mouseoverCanvas }),
+        react_1.default.createElement("canvas", { ref: mainSyntenyCanvasRef, onMouseMove: event => {
                 var _a;
                 if (mouseCurrDownX !== undefined) {
                     xOffset.current += mouseCurrDownX - event.clientX;
@@ -194,7 +197,11 @@ 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((0, util_2.getTooltip)(f, cigar[cigarIdx], cigar[cigarIdx + 1]));
+                        setTooltip((0, util_2.getTooltip)({
+                            feature: f,
+                            cigarOp: cigar[cigarIdx],
+                            cigarOpLen: cigar[cigarIdx + 1],
+                        }));
                     }
                 }
             }, onMouseLeave: () => {
@@ -213,8 +220,8 @@ const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, })
             }, onContextMenu: evt => {
                 (0, util_2.onSynContextClick)(evt, model, setAnchorEl);
             }, "data-testid": "synteny_canvas", className: classes.mainCanvas, 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 }),
+        react_1.default.createElement("canvas", { ref: clickMapCanvasRef, className: classes.pix, width: width, height: height }),
+        react_1.default.createElement("canvas", { ref: cigarClickMapCanvasRef, className: classes.pix, width: width, height: height }),
         mouseoverId && tooltip && currX && currY ? (react_1.default.createElement(SyntenyTooltip, { title: tooltip })) : null,
         anchorEl ? (react_1.default.createElement(SyntenyContextMenu_1.default, { model: model, anchorEl: anchorEl, onClose: () => {
                 setAnchorEl(undefined);

package/dist/LinearSyntenyDisplay/components/SyntenyContextMenu.js

@@ -7,7 +7,6 @@ exports.default = SyntenyContextMenu;
 const react_1 = __importDefault(require("react"));
 const util_1 = require("@jbrowse/core/util");
 const ui_1 = require("@jbrowse/core/ui");
-const mobx_state_tree_1 = require("mobx-state-tree");
 function SyntenyContextMenu({ model, onClose, anchorEl, }) {
     const view = (0, util_1.getContainingView)(model);
     const { clientX, clientY, feature } = anchorEl;
@@ -36,13 +35,12 @@ function SyntenyContextMenu({ model, onClose, anchorEl, }) {
                 label: 'Center on feature',
                 onClick: () => {
                     const { f } = feature;
-                    const track = (0, mobx_state_tree_1.getParent)(model, 4);
                     const start = f.get('start');
                     const end = f.get('end');
                     const refName = f.get('refName');
                     const mate = f.get('mate');
-                    const l1 = view.views[track.level];
-                    const l2 = view.views[track.level + 1];
+                    const l1 = view.views[model.level];
+                    const l2 = view.views[model.level + 1];
                     l1.navToLocString(`${refName}:${start}-${end}`).catch((e) => {
                         const err = `${l1.assemblyNames[0]}:${e}`;
                         console.error(err);

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

@@ -36,5 +36,9 @@ export declare function drawBox(ctx: CanvasRenderingContext2D, x1: number, x2: n
 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 declare function getTooltip({ feature, cigarOp, cigarOpLen, }: {
+    feature: Feature;
+    cigarOp?: string;
+    cigarOpLen?: string;
+}): string;
 export {};

package/dist/LinearSyntenyDisplay/components/util.js

@@ -63,7 +63,6 @@ function drawBox(ctx, x1, x2, y1, x3, x4, y2) {
     ctx.lineTo(x3, y2);
     ctx.lineTo(x4, y2);
     ctx.closePath();
-    ctx.fill();
 }
 function drawBezierBox(ctx, x1, x2, y1, x3, x4, y2, mid) {
     const len1 = Math.abs(x1 - x2);
@@ -83,13 +82,11 @@ function drawBezierBox(ctx, x1, x2, y1, x3, x4, y2, mid) {
     ctx.lineTo(x4, y2);
     ctx.bezierCurveTo(x4, mid, x1, mid, x1, y1);
     ctx.closePath();
-    ctx.fill();
 }
 function onSynClick(event, model) {
     const view = (0, util_1.getContainingView)(model);
     const track = (0, util_1.getContainingTrack)(model);
-    const ref1 = model.clickMapCanvas;
-    const ref2 = model.cigarClickMapCanvas;
+    const { featPositions, numFeats, clickMapCanvas: ref1, cigarClickMapCanvas: ref2, level, } = model;
     if (!ref1 || !ref2) {
         return;
     }
@@ -102,18 +99,19 @@ function onSynClick(event, model) {
     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 unitMultiplier = Math.floor(drawSynteny_1.MAX_COLOR_RANGE / numFeats);
     const id = (0, drawSynteny_1.getId)(r1, g1, b1, unitMultiplier);
-    const feat = model.featPositions[id];
+    const feat = 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('BaseFeatureWidget', 'baseFeature', {
+            session.showWidget(session.addWidget('SyntenyFeatureWidget', 'syntenyFeature', {
                 view,
                 track,
                 featureData: f.toJSON(),
+                level,
             }));
         }
     }
@@ -144,9 +142,9 @@ function onSynContextClick(event, model, setAnchorEl) {
         setAnchorEl({ clientX, clientY, feature: f });
     }
 }
-function getTooltip(f, cigarOp, cigarOpLen) {
+function getTooltip({ feature, cigarOp, cigarOpLen, }) {
     // @ts-expect-error
-    const f1 = f.toJSON();
+    const f1 = feature.toJSON();
     const f2 = f1.mate;
     const l1 = f1.end - f1.start;
     const l2 = f2.end - f2.start;