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

package/dist/LinearSyntenyDisplay/drawSynteny.js

@@ -6,7 +6,6 @@ exports.drawRef = drawRef;
 exports.drawMouseoverSynteny = drawMouseoverSynteny;
 const util_1 = require("@jbrowse/core/util");
 const util_2 = require("./components/util");
-const mobx_state_tree_1 = require("mobx-state-tree");
 exports.MAX_COLOR_RANGE = 255 * 255 * 255; // max color range
 function makeColor(idx) {
     const r = Math.floor(idx / (255 * 255)) % 255;
@@ -30,11 +29,9 @@ function getId(r, g, b, unitMultiplier) {
 function drawRef(model, ctx1, ctx3) {
     var _a;
     const view = (0, util_1.getContainingView)(model);
-    // @ts-expect-error
-    const level = (0, mobx_state_tree_1.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) {
@@ -150,9 +147,11 @@ function drawRef(model, ctx1, ctx3) {
                                 colorMap[(continuingFlag && d1 > 1) || d2 > 1 ? op : 'M'];
                             continuingFlag = false;
                             (0, util_2.draw)(ctx1, px1, cx1, y1, cx2, px2, y2, mid, drawCurves);
+                            ctx1.fill();
                             if (ctx3) {
                                 ctx3.fillStyle = makeColor(idx);
                                 (0, util_2.draw)(ctx3, px1, cx1, y1, cx2, px2, y2, mid, drawCurves);
+                                ctx3.fill();
                             }
                         }
                     }
@@ -160,6 +159,7 @@ function drawRef(model, ctx1, ctx3) {
             }
             else {
                 (0, util_2.draw)(ctx1, x11, x12, y1, x22, x21, y2, mid, drawCurves);
+                ctx1.fill();
             }
         }
     }
@@ -193,7 +193,7 @@ function drawRef(model, ctx1, ctx3) {
 }
 function drawMouseoverSynteny(model) {
     var _a;
-    const { clickId, mouseoverId } = model;
+    const { level, clickId, mouseoverId } = model;
     const highResolutionScaling = 1;
     const view = (0, util_1.getContainingView)(model);
     const drawCurves = view.drawCurves;
@@ -201,17 +201,16 @@ 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 = (0, mobx_state_tree_1.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)';
         (0, util_2.drawMatchSimple)({
             cb: ctx => {
                 ctx.fill();
@@ -228,7 +227,6 @@ function drawMouseoverSynteny(model) {
     }
     const feature2 = model.featMap[clickId || ''];
     if (feature2) {
-        ctx.strokeStyle = 'rgb(0, 0, 0, 0.9)';
         (0, util_2.drawMatchSimple)({
             cb: ctx => {
                 ctx.stroke();

package/dist/LinearSyntenyDisplay/model.d.ts

@@ -68,9 +68,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             rendererTypeName: string;
             error: unknown;
             message: string | undefined;
-        } & import("mobx-state-tree" /**
-         * #action
-         */).IStateTreeNode<import("mobx-state-tree").IModelType<{
+        } & 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>>;
@@ -98,6 +96,8 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     features: Feature[] | undefined;
     message: string | undefined;
 } & {
+    readonly level: number;
+    readonly height: number;
     renderProps(): {
         rpcDriverName: string | undefined;
         displayModel: {
@@ -113,7 +113,12 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
                         [x: string]: any;
                     } & import("mobx-state-tree/dist/internal").NonEmptyObject & any & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
-                } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
+                } & import("mobx-state-tree" /**
+                 * #volatile
+                 * canvas for drawing mouseover shading this is separate from the other
+                 * code for speed: don't have to redraw entire canvas to do a feature's
+                 * mouseover shading
+                 */).IStateTreeNode<AnyConfigurationSchemaType>);
             } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
@@ -150,9 +155,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     rendererTypeName: string;
                     error: unknown;
                     message: string | undefined;
-                } & import("mobx-state-tree" /**
-                 * #action
-                 */).IStateTreeNode<import("mobx-state-tree").IModelType<{
+                } & 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>>;
@@ -261,13 +264,51 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     afterAttach(): void;
 } & {
+    /**
+     * #volatile
+     * canvas used for drawing visible screen
+     */
     mainCanvas: HTMLCanvasElement | null;
+    /**
+     * #volatile
+     * canvas used for drawing click map with feature ids this renders a
+     * unique color per alignment, so that it can be re-traced after a
+     * feature click with getImageData at that pixel
+     */
     clickMapCanvas: HTMLCanvasElement | null;
+    /**
+     * #volatile
+     * canvas used for drawing click map with cigar data this can show if you
+     * are mousing over a insertion/deletion. it is similar in purpose to the
+     * clickMapRef but was not feasible to pack this into the clickMapRef
+     */
     cigarClickMapCanvas: HTMLCanvasElement | null;
+    /**
+     * #volatile
+     * canvas for drawing mouseover shading this is separate from the other
+     * code for speed: don't have to redraw entire canvas to do a feature's
+     * mouseover shading
+     */
     mouseoverCanvas: HTMLCanvasElement | null;
+    /**
+     * #volatile
+     * assigned by reaction
+     */
     featPositions: FeatPos[];
+    /**
+     * #volatile
+     * currently mouse'd over feature
+     */
     mouseoverId: string | undefined;
+    /**
+     * #volatile
+     * currently click'd over feature
+     */
     clickId: string | undefined;
+    /**
+     * #volatile
+     * currently mouseover'd CIGAR subfeature
+     */
     cigarMouseoverId: number;
 } & {
     /**
@@ -311,10 +352,6 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
      * #getter
      */
     readonly trackIds: string[];
-    /**
-     * #getter
-     */
-    readonly height: number;
     /**
      * #getter
      */

package/dist/LinearSyntenyDisplay/model.js

@@ -48,28 +48,51 @@ function stateModelFactory(configSchema) {
         configuration: (0, configuration_1.ConfigurationReference)(configSchema),
     }))
         .volatile(() => ({
-        // canvas used for drawing visible screen
+        /**
+         * #volatile
+         * canvas used for drawing visible screen
+         */
         mainCanvas: null,
-        // canvas used for drawing click map with feature ids
-        // this renders a unique color per alignment, so that it can be re-traced
-        // after a feature click with getImageData at that pixel
+        /**
+         * #volatile
+         * canvas used for drawing click map with feature ids this renders a
+         * unique color per alignment, so that it can be re-traced after a
+         * feature click with getImageData at that pixel
+         */
         clickMapCanvas: null,
-        // canvas used for drawing click map with cigar data
-        // this can show if you are mousing over a insertion/deletion. it is similar
-        // in purpose to the clickMapRef but was not feasible to pack this into the
-        // clickMapRef
+        /**
+         * #volatile
+         * canvas used for drawing click map with cigar data this can show if you
+         * are mousing over a insertion/deletion. it is similar in purpose to the
+         * clickMapRef but was not feasible to pack this into the clickMapRef
+         */
         cigarClickMapCanvas: null,
-        // canvas for drawing mouseover shading
-        // this is separate from the other code for speed: don't have to redraw
-        // entire canvas to do a feature's mouseover shading
+        /**
+         * #volatile
+         * canvas for drawing mouseover shading this is separate from the other
+         * code for speed: don't have to redraw entire canvas to do a feature's
+         * mouseover shading
+         */
         mouseoverCanvas: null,
-        // assigned by reaction
+        /**
+         * #volatile
+         * assigned by reaction
+         */
         featPositions: [],
-        // currently mouse'd over feature
+        /**
+         * #volatile
+         * currently mouse'd over feature
+         */
         mouseoverId: undefined,
-        // currently click'd over feature
+        /**
+         * #volatile
+         * currently click'd over feature
+         */
         clickId: undefined,
-        // currently mouseover'd CIGAR subfeature
+        /**
+         * #volatile
+         * currently mouseover'd CIGAR subfeature
+         */
         cigarMouseoverId: -1,
     }))
         .actions(self => ({
@@ -139,13 +162,6 @@ function stateModelFactory(configSchema) {
         get trackIds() {
             return (0, configuration_1.getConf)(self, 'trackIds');
         },
-        /**
-         * #getter
-         */
-        get height() {
-            // @ts-expect-error
-            return (0, mobx_state_tree_1.getParent)(self, 4).height;
-        },
         /**
          * #getter
          */

package/dist/SyntenyFeatureDetail/SyntenyFeatureDetail.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SimpleFeatureSerialized } from '@jbrowse/core/util';
+interface SyntenyFeatureDetailModel {
+    trackId: string;
+    featureData: SimpleFeatureSerialized;
+    level?: number;
+    view: {
+        type: string;
+    };
+}
+declare const SyntenyFeatureDetail: ({ model, }: {
+    model: SyntenyFeatureDetailModel;
+}) => React.JSX.Element;
+export default SyntenyFeatureDetail;

package/dist/SyntenyFeatureDetail/SyntenyFeatureDetail.js

@@ -0,0 +1,100 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+// locals
+const BaseCard_1 = __importDefault(require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard"));
+const BaseFeatureDetail_1 = __importDefault(require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail"));
+const util_1 = require("@jbrowse/core/util");
+// lazies
+const LaunchSyntenyViewDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../LGVSyntenyDisplay/components/LaunchSyntenyViewDialog'))));
+const CustomLinker = (0, mobx_react_1.observer)(function ({ model, }) {
+    const { featureData, view, level, trackId } = model;
+    return (react_1.default.createElement("ul", null,
+        view.type === 'LinearSyntenyView' ? (react_1.default.createElement("li", null,
+            react_1.default.createElement(material_1.Link, { href: "#", onClick: event => {
+                    var _a, _b;
+                    event.preventDefault();
+                    const { views } = view;
+                    if (level !== undefined) {
+                        // level is "pre-known", and stored in the SyntenyFeatureWidget
+                        // model state e.g. when clicking on a feature from a
+                        // LinearSyntenyRendering
+                        (_a = views[level]) === null || _a === void 0 ? void 0 : _a.navTo(featureData);
+                        (_b = views[level + 1]) === null || _b === void 0 ? void 0 : _b.navTo(featureData.mate);
+                    }
+                    else {
+                        // best effort to find the right level. this is triggered for
+                        // example if a user clicks on a feature in a LGVSyntenyDisplay
+                        // in an existing LinearSyntenyView, there is no real proper
+                        // level "pre-known" to this situation
+                        const f1 = featureData;
+                        const f2 = featureData.mate;
+                        const r1 = f1.assemblyName;
+                        const r2 = f2.assemblyName;
+                        const v1 = views.find(view => view.assemblyNames[0] === r1);
+                        const v2 = views.find(view => view.assemblyNames[0] === r2);
+                        if (!v1 || !v2) {
+                            (0, util_1.getSession)(model).notify([
+                                v1
+                                    ? `Unable to find ${(0, util_1.assembleLocString)(f1)} in synteny view`
+                                    : '',
+                                v2
+                                    ? `Unable to find ${(0, util_1.assembleLocString)(f2)} in synteny view`
+                                    : '',
+                            ].join(' ... '));
+                        }
+                        v1 === null || v1 === void 0 ? void 0 : v1.navTo(f1);
+                        v2 === null || v2 === void 0 ? void 0 : v2.navTo(f2);
+                    }
+                } }, "Center view on this feature"))) : null,
+        react_1.default.createElement("li", null,
+            react_1.default.createElement(material_1.Link, { href: "#", onClick: event => {
+                    event.preventDefault();
+                    const session = (0, util_1.getSession)(model);
+                    const feature = new util_1.SimpleFeature(featureData);
+                    session.queueDialog(handleClose => [
+                        LaunchSyntenyViewDialog,
+                        {
+                            model,
+                            feature,
+                            trackId,
+                            handleClose,
+                        },
+                    ]);
+                } }, "Launch new linear synteny view on this feature"))));
+});
+const SyntenyFeatureDetail = (0, mobx_react_1.observer)(function ({ model, }) {
+    return (react_1.default.createElement(material_1.Paper, { "data-testid": "alignment-side-drawer" },
+        react_1.default.createElement(BaseFeatureDetail_1.default, { title: "Feature", model: model }),
+        react_1.default.createElement(BaseCard_1.default, { title: "Link to view" },
+            react_1.default.createElement(CustomLinker, { model: model }))));
+});
+exports.default = SyntenyFeatureDetail;

package/dist/SyntenyFeatureDetail/index.d.ts

@@ -0,0 +1,2 @@
+import PluginManager from '@jbrowse/core/PluginManager';
+export default function SyntenyFeatureWidgetF(pluginManager: PluginManager): void;

package/dist/SyntenyFeatureDetail/index.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SyntenyFeatureWidgetF;
+const react_1 = require("react");
+const configuration_1 = require("@jbrowse/core/configuration");
+const WidgetType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/WidgetType"));
+const mobx_state_tree_1 = require("mobx-state-tree");
+const BaseFeatureWidget_1 = require("@jbrowse/core/BaseFeatureWidget");
+const configSchema = (0, configuration_1.ConfigurationSchema)('SyntenyFeatureWidget', {});
+function stateModelF(pluginManager) {
+    return mobx_state_tree_1.types.compose((0, BaseFeatureWidget_1.stateModelFactory)(pluginManager), mobx_state_tree_1.types.model('SyntenyFeatureWidget', {
+        /**
+         * #property
+         */
+        type: mobx_state_tree_1.types.literal('SyntenyFeatureWidget'),
+        /**
+         * #property
+         */
+        level: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.number),
+    }));
+}
+function SyntenyFeatureWidgetF(pluginManager) {
+    pluginManager.addWidgetType(() => new WidgetType_1.default({
+        name: 'SyntenyFeatureWidget',
+        heading: 'Synteny feature details',
+        configSchema,
+        stateModel: stateModelF(pluginManager),
+        ReactComponent: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SyntenyFeatureDetail')))),
+    }));
+}

package/dist/index.js

@@ -15,6 +15,7 @@ const LinearSyntenyViewHelper_1 = __importDefault(require("./LinearSyntenyViewHe
 const LaunchLinearSyntenyView_1 = __importDefault(require("./LaunchLinearSyntenyView"));
 const SyntenyTrack_1 = __importDefault(require("./SyntenyTrack"));
 const LinearReadVsRef_1 = __importDefault(require("./LinearReadVsRef"));
+const SyntenyFeatureDetail_1 = __importDefault(require("./SyntenyFeatureDetail"));
 class LinearComparativeViewPlugin extends Plugin_1.default {
     constructor() {
         super(...arguments);
@@ -26,6 +27,7 @@ class LinearComparativeViewPlugin extends Plugin_1.default {
         (0, LinearSyntenyView_1.default)(pluginManager);
         (0, LinearComparativeDisplay_1.default)(pluginManager);
         (0, LinearSyntenyDisplay_1.default)(pluginManager);
+        (0, SyntenyFeatureDetail_1.default)(pluginManager);
         (0, LGVSyntenyDisplay_1.default)(pluginManager);
         (0, LaunchLinearSyntenyView_1.default)(pluginManager);
         (0, SyntenyTrack_1.default)(pluginManager);

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

@@ -2,15 +2,16 @@ import React, { useState } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
 import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, TextField, } from '@mui/material';
-import { navToSynteny } from './util';
 import { makeStyles } from 'tss-react/mui';
+// locals
+import { navToSynteny } from './util';
 const useStyles = makeStyles()({
     padding: {
         margin: 10,
         border: '1px solid #ccc',
     },
 });
-export default function LaunchSyntenyViewDialog({ model, feature, handleClose, }) {
+export default function LaunchSyntenyViewDialog({ model, feature, trackId, handleClose, }) {
     const { classes } = useStyles();
     const inverted = feature.get('strand') === -1;
     const [horizontallyFlip, setHorizontallyFlip] = useState(inverted);
@@ -33,6 +34,7 @@ export default function LaunchSyntenyViewDialog({ model, feature, handleClose, }
                                 feature,
                                 windowSize: +windowSize,
                                 horizontallyFlip,
+                                trackId,
                                 model,
                             });
                         }

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

@@ -1,4 +1,4 @@
-import { getSession, getContainingTrack, getContainingView, } from '@jbrowse/core/util';
+import { getSession } from '@jbrowse/core/util';
 import { MismatchParser } from '@jbrowse/plugin-alignments';
 const { parseCigar } = MismatchParser;
 function f(n) {
@@ -27,18 +27,13 @@ function findPosInCigar(cigar, startX) {
     }
     return [featX, mateX];
 }
-export async function navToSynteny({ feature, windowSize: ws, model, horizontallyFlip, }) {
+export async function navToSynteny({ feature, windowSize: ws, model, trackId, view, horizontallyFlip, }) {
     const session = getSession(model);
-    const track = getContainingTrack(model);
-    const view = 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');
@@ -46,13 +41,13 @@ export async function navToSynteny({ feature, windowSize: ws, model, horizontall
     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);
@@ -69,17 +64,14 @@ export async function navToSynteny({ feature, windowSize: ws, model, horizontall
         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,
             },