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

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

@@ -1,6 +1,6 @@
 import { lazy } from 'react';
-import { ConfigurationReference, } from '@jbrowse/core/configuration';
-import { getSession } from '@jbrowse/core/util';
+import { ConfigurationReference, getConf, } from '@jbrowse/core/configuration';
+import { getContainingTrack, getContainingView, getSession, isSessionModelWithWidgets, } from '@jbrowse/core/util';
 import { SharedLinearPileupDisplayMixin } from '@jbrowse/plugin-alignments';
 import { types } from 'mobx-state-tree';
 const LaunchSyntenyViewDialog = lazy(() => import('./components/LaunchSyntenyViewDialog'));
@@ -37,12 +37,13 @@ function stateModelFactory(schema) {
                     ...(feature
                         ? [
                             {
-                                label: 'Open synteny view for this position',
+                                label: 'Launch synteny view for this position',
                                 onClick: () => {
                                     getSession(self).queueDialog(handleClose => [
                                         LaunchSyntenyViewDialog,
                                         {
                                             model: self,
+                                            trackId: getConf(getContainingTrack(self), 'trackId'),
                                             handleClose,
                                             feature,
                                         },
@@ -73,6 +74,27 @@ function stateModelFactory(schema) {
         };
     })
         .actions(self => ({
+        /**
+         * #action
+         */
+        selectFeature(feature) {
+            const session = getSession(self);
+            if (isSessionModelWithWidgets(session)) {
+                const r2 = getContainingView(self);
+                let r3 = r2;
+                try {
+                    r3 = getContainingView(r3);
+                }
+                catch (e) { }
+                const featureWidget = session.addWidget('SyntenyFeatureWidget', 'syntenyFeature', {
+                    featureData: feature.toJSON(),
+                    view: r3,
+                    track: 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/esm/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/esm/LinearComparativeDisplay/stateModelFactory.js

@@ -26,6 +26,18 @@ function stateModelFactory(configSchema) {
         message: undefined,
     }))
         .views(self => ({
+        /**
+         * #getter
+         */
+        get level() {
+            return getParent(self, 4).level;
+        },
+        /**
+         * #getter
+         */
+        get height() {
+            return getParent(self, 4).height;
+        },
         /**
          * #getter
          */
@@ -131,7 +143,7 @@ function renderBlockData(self) {
     // renderProps is something under our control.  Compare to
     // serverSideRenderedBlock
     readConfObject(self.configuration);
-    const { adapterConfig } = self;
+    const { level, adapterConfig } = self;
     const parent = getContainingView(self);
     const sessionId = getRpcSessionId(self);
     getSnapshot(parent);
@@ -140,8 +152,7 @@ function renderBlockData(self) {
             rpcManager,
             renderProps: {
                 ...display.renderProps(),
-                // @ts-expect-error
-                level: getParent(self, 4).level,
+                level,
                 view: parent,
                 adapterConfig,
                 sessionId,

package/esm/LinearSyntenyDisplay/afterAttach.js

@@ -1,8 +1,8 @@
-import { addDisposer, getParent, getSnapshot } from 'mobx-state-tree';
+import { reaction, autorun } from 'mobx';
+import { addDisposer, getSnapshot } from 'mobx-state-tree';
 import { getContainingView, getSession } from '@jbrowse/core/util';
 import { bpToPx } from '@jbrowse/core/util/Base1DUtils';
 import { MismatchParser } from '@jbrowse/plugin-alignments';
-import { reaction, autorun } from 'mobx';
 import { drawMouseoverSynteny, drawRef } from './drawSynteny';
 export function doAfterAttach(self) {
     addDisposer(self, autorun(() => {
@@ -48,10 +48,9 @@ export function doAfterAttach(self) {
         if (!initialized) {
             return;
         }
+        const { level } = self;
         const { assemblyManager } = getSession(self);
         const view = getContainingView(self);
-        // @ts-expect-error
-        const level = getParent(self, 4).level;
         const viewSnaps = view.views.map(view => ({
             ...getSnapshot(view),
             width: view.width,

package/esm/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -18,6 +18,7 @@ const useStyles = makeStyles()({
         position: 'relative',
     },
     mouseoverCanvas: {
+        imageRendering: 'pixelated',
         position: 'absolute',
         pointEvents: 'none',
     },
@@ -27,6 +28,7 @@ const useStyles = makeStyles()({
 });
 const LinearSyntenyRendering = observer(function ({ model, }) {
     const { classes } = useStyles();
+    const { mouseoverId, height } = model;
     const xOffset = useRef(0);
     const view = getContainingView(model);
     const width = view.width;
@@ -39,20 +41,19 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
     const [mouseCurrDownX, setMouseCurrDownX] = useState();
     const [mouseInitialDownX, setMouseInitialDownX] = useState();
     const [currY, setCurrY] = useState();
-    const { mouseoverId, height } = model;
-    const k2p = useRef();
+    const mainSyntenyCanvasRefp = useRef();
     // these useCallbacks avoid new refs from being created on any mouseover,
     // etc.
     // biome-ignore lint/correctness/useExhaustiveDependencies:
-    const k1 = useCallback((ref) => {
+    const mouseoverDetectionCanvasRef = useCallback((ref) => {
         model.setMouseoverCanvasRef(ref);
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [model, height, width]);
     // biome-ignore lint/correctness/useExhaustiveDependencies:
-    const k2 = useCallback((ref) => {
+    const mainSyntenyCanvasRef = 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]);
@@ -75,7 +76,9 @@ const LinearSyntenyRendering = 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);
@@ -98,28 +101,28 @@ const LinearSyntenyRendering = 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 = useCallback((ref) => {
+    const clickMapCanvasRef = useCallback((ref) => {
         model.setClickMapCanvasRef(ref);
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [model, height, width]);
     // biome-ignore lint/correctness/useExhaustiveDependencies:
-    const k4 = useCallback((ref) => {
+    const cigarClickMapCanvasRef = 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: classes.mouseoverCanvas }),
-        React.createElement("canvas", { ref: k2, onMouseMove: event => {
+        React.createElement("canvas", { ref: mouseoverDetectionCanvasRef, width: width, height: height, className: classes.mouseoverCanvas }),
+        React.createElement("canvas", { ref: mainSyntenyCanvasRef, onMouseMove: event => {
                 var _a;
                 if (mouseCurrDownX !== undefined) {
                     xOffset.current += mouseCurrDownX - event.clientX;
@@ -166,7 +169,11 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
                         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(getTooltip({
+                            feature: f,
+                            cigarOp: cigar[cigarIdx],
+                            cigarOpLen: cigar[cigarIdx + 1],
+                        }));
                     }
                 }
             }, onMouseLeave: () => {
@@ -185,8 +192,8 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
             }, onContextMenu: evt => {
                 onSynContextClick(evt, model, setAnchorEl);
             }, "data-testid": "synteny_canvas", className: classes.mainCanvas, 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 }),
+        React.createElement("canvas", { ref: clickMapCanvasRef, className: classes.pix, width: width, height: height }),
+        React.createElement("canvas", { ref: cigarClickMapCanvasRef, className: classes.pix, width: width, height: height }),
         mouseoverId && tooltip && currX && currY ? (React.createElement(SyntenyTooltip, { title: tooltip })) : null,
         anchorEl ? (React.createElement(SyntenyContextMenu, { model: model, anchorEl: anchorEl, onClose: () => {
                 setAnchorEl(undefined);

package/esm/LinearSyntenyDisplay/components/SyntenyContextMenu.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { getContainingView, getSession } from '@jbrowse/core/util';
 import { Menu } from '@jbrowse/core/ui';
-import { getParent } from 'mobx-state-tree';
 export default function SyntenyContextMenu({ model, onClose, anchorEl, }) {
     const view = getContainingView(model);
     const { clientX, clientY, feature } = anchorEl;
@@ -30,13 +29,12 @@ export default function SyntenyContextMenu({ model, onClose, anchorEl, }) {
                 label: 'Center on feature',
                 onClick: () => {
                     const { f } = feature;
-                    const track = 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/esm/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/esm/LinearSyntenyDisplay/components/util.js

@@ -54,7 +54,6 @@ export function drawBox(ctx, x1, x2, y1, x3, x4, y2) {
     ctx.lineTo(x3, y2);
     ctx.lineTo(x4, y2);
     ctx.closePath();
-    ctx.fill();
 }
 export function drawBezierBox(ctx, x1, x2, y1, x3, x4, y2, mid) {
     const len1 = Math.abs(x1 - x2);
@@ -74,13 +73,11 @@ export 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();
 }
 export function onSynClick(event, model) {
     const view = getContainingView(model);
     const track = getContainingTrack(model);
-    const ref1 = model.clickMapCanvas;
-    const ref2 = model.cigarClickMapCanvas;
+    const { featPositions, numFeats, clickMapCanvas: ref1, cigarClickMapCanvas: ref2, level, } = model;
     if (!ref1 || !ref2) {
         return;
     }
@@ -93,18 +90,19 @@ export 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(MAX_COLOR_RANGE / model.numFeats);
+    const unitMultiplier = Math.floor(MAX_COLOR_RANGE / numFeats);
     const id = 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 = getSession(model);
         if (isSessionModelWithWidgets(session)) {
-            session.showWidget(session.addWidget('BaseFeatureWidget', 'baseFeature', {
+            session.showWidget(session.addWidget('SyntenyFeatureWidget', 'syntenyFeature', {
                 view,
                 track,
                 featureData: f.toJSON(),
+                level,
             }));
         }
     }
@@ -135,9 +133,9 @@ export function onSynContextClick(event, model, setAnchorEl) {
         setAnchorEl({ clientX, clientY, feature: f });
     }
 }
-export function getTooltip(f, cigarOp, cigarOpLen) {
+export 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;

package/esm/LinearSyntenyDisplay/drawSynteny.js

@@ -1,6 +1,5 @@
 import { doesIntersect2, getContainingView } from '@jbrowse/core/util';
 import { draw, drawMatchSimple } from './components/util';
-import { getParent } from 'mobx-state-tree';
 export const MAX_COLOR_RANGE = 255 * 255 * 255; // max color range
 function makeColor(idx) {
     const r = Math.floor(idx / (255 * 255)) % 255;
@@ -24,11 +23,9 @@ export function getId(r, g, b, unitMultiplier) {
 export function drawRef(model, ctx1, ctx3) {
     var _a;
     const view = getContainingView(model);
-    // @ts-expect-error
-    const level = getParent(model, 4).level;
     const drawCurves = view.drawCurves;
     const drawCIGAR = view.drawCIGAR;
-    const { height, featPositions } = model;
+    const { level, height, featPositions } = model;
     const width = view.width;
     const bpPerPxs = view.views.map(v => v.bpPerPx);
     if (ctx3) {
@@ -144,9 +141,11 @@ export function drawRef(model, ctx1, ctx3) {
                                 colorMap[(continuingFlag && d1 > 1) || d2 > 1 ? op : 'M'];
                             continuingFlag = false;
                             draw(ctx1, px1, cx1, y1, cx2, px2, y2, mid, drawCurves);
+                            ctx1.fill();
                             if (ctx3) {
                                 ctx3.fillStyle = makeColor(idx);
                                 draw(ctx3, px1, cx1, y1, cx2, px2, y2, mid, drawCurves);
+                                ctx3.fill();
                             }
                         }
                     }
@@ -154,6 +153,7 @@ export function drawRef(model, ctx1, ctx3) {
             }
             else {
                 draw(ctx1, x11, x12, y1, x22, x21, y2, mid, drawCurves);
+                ctx1.fill();
             }
         }
     }
@@ -187,7 +187,7 @@ export function drawRef(model, ctx1, ctx3) {
 }
 export function drawMouseoverSynteny(model) {
     var _a;
-    const { clickId, mouseoverId } = model;
+    const { level, clickId, mouseoverId } = model;
     const highResolutionScaling = 1;
     const view = getContainingView(model);
     const drawCurves = view.drawCurves;
@@ -195,17 +195,16 @@ export function drawMouseoverSynteny(model) {
     const width = view.width;
     const ctx = (_a = model.mouseoverCanvas) === null || _a === void 0 ? void 0 : _a.getContext('2d');
     const offsets = view.views.map(v => v.offsetPx);
-    // @ts-expect-error
-    const level = getParent(model, 4).level;
     if (!ctx) {
         return;
     }
     ctx.resetTransform();
     ctx.scale(highResolutionScaling, highResolutionScaling);
     ctx.clearRect(0, 0, width, height);
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.9)';
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
     const feature1 = model.featMap[mouseoverId || ''];
     if (feature1) {
-        ctx.fillStyle = 'rgb(0,0,0,0.1)';
         drawMatchSimple({
             cb: ctx => {
                 ctx.fill();
@@ -222,7 +221,6 @@ export function drawMouseoverSynteny(model) {
     }
     const feature2 = model.featMap[clickId || ''];
     if (feature2) {
-        ctx.strokeStyle = 'rgb(0, 0, 0, 0.9)';
         drawMatchSimple({
             cb: ctx => {
                 ctx.stroke();