@jbrowse/plugin-linear-comparative-view 2.18.0 → 3.0.0

package/dist/LinearSyntenyView/svgcomponents/SVGLinearSyntenyView.js

@@ -4,14 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderToSvg = renderToSvg;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
 const tracks_1 = require("@jbrowse/core/util/tracks");
 const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
 const material_1 = require("@mui/material");
 const mobx_1 = require("mobx");
-const mobx_state_tree_1 = require("mobx-state-tree");
 const SVGBackground_1 = __importDefault(require("./SVGBackground"));
 const SVGLinearGenomeView_1 = __importDefault(require("./SVGLinearGenomeView"));
 const drawSynteny_1 = require("../../LinearSyntenyDisplay/drawSynteny");
@@ -24,7 +23,6 @@ async function renderToSvg(model, opts) {
     const { width, views, levels } = model;
     const shift = 50;
     const offset = rulerHeight;
-    const { createRootFn } = (0, mobx_state_tree_1.getRoot)(model);
     const heights = views.map(v => (0, plugin_linear_genome_view_1.totalHeight)(v.tracks, textHeight, trackLabels) + offset);
     const totalHeightSvg = (0, util_1.sum)(heights) + (0, util_1.sum)(levels.map(l => l.height)) + 100;
     const displayResults = await Promise.all(views.map(async (view) => ({
@@ -66,7 +64,7 @@ async function renderToSvg(model, opts) {
     const w = width + trackLabelOffset;
     const theme = (0, ui_1.createJBrowseTheme)(themeVar);
     const RenderList = [
-        react_1.default.createElement(SVGLinearGenomeView_1.default, { rulerHeight: rulerHeight, trackLabelOffset: trackLabelOffset, shift: shift, textHeight: textHeight, trackLabels: trackLabels, displayResults: displayResults[0], key: views[0].id, view: views[0], fontSize: fontSize }),
+        (0, jsx_runtime_1.jsx)(SVGLinearGenomeView_1.default, { rulerHeight: rulerHeight, trackLabelOffset: trackLabelOffset, shift: shift, textHeight: textHeight, trackLabels: trackLabels, displayResults: displayResults[0], view: views[0], fontSize: fontSize }, views[0].id),
     ];
     let currOffset = heights[0] + fontSize + rulerHeight;
     for (let i = 1; i < views.length; i++) {
@@ -75,18 +73,8 @@ async function renderToSvg(model, opts) {
         const rendering = renderings[i - 1];
         const height = heights[i];
         const levelHeight = level.height || 0;
-        RenderList.push(react_1.default.createElement("g", { key: view.id, transform: `translate(0 ${currOffset})` },
-            levelHeight ? (react_1.default.createElement("defs", null,
-                react_1.default.createElement("clipPath", { id: `synclip-${i}` },
-                    react_1.default.createElement("rect", { x: 0, y: 0, width: width, height: levelHeight })))) : null,
-            react_1.default.createElement("g", { transform: `translate(${shift + trackLabelOffset} ${fontSize})`, clipPath: `url(#synclip-${i})` }, rendering === null || rendering === void 0 ? void 0 : rendering.map((r, i) => (react_1.default.createElement(util_1.ReactRendering, { key: i, rendering: r })))),
-            react_1.default.createElement("g", { transform: `translate(0 ${levelHeight})` },
-                react_1.default.createElement(SVGLinearGenomeView_1.default, { rulerHeight: rulerHeight, shift: shift, trackLabelOffset: trackLabelOffset, textHeight: textHeight, trackLabels: trackLabels, displayResults: displayResults[i], key: view.id, view: view, fontSize: fontSize }))));
+        RenderList.push((0, jsx_runtime_1.jsxs)("g", { transform: `translate(0 ${currOffset})`, children: [levelHeight ? ((0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: `synclip-${i}`, children: (0, jsx_runtime_1.jsx)("rect", { x: 0, y: 0, width: width, height: levelHeight }) }) })) : null, (0, jsx_runtime_1.jsx)("g", { transform: `translate(${shift + trackLabelOffset} ${fontSize})`, clipPath: `url(#synclip-${i})`, children: rendering === null || rendering === void 0 ? void 0 : rendering.map((r, i) => ((0, jsx_runtime_1.jsx)(util_1.ReactRendering, { rendering: r }, i))) }), (0, jsx_runtime_1.jsx)("g", { transform: `translate(0 ${levelHeight})`, children: (0, jsx_runtime_1.jsx)(SVGLinearGenomeView_1.default, { rulerHeight: rulerHeight, shift: shift, trackLabelOffset: trackLabelOffset, textHeight: textHeight, trackLabels: trackLabels, displayResults: displayResults[i], view: view, fontSize: fontSize }, view.id) })] }, view.id));
         currOffset += height + fontSize + rulerHeight + levelHeight;
     }
-    return (0, util_1.renderToStaticMarkup)(react_1.default.createElement(material_1.ThemeProvider, { theme: theme },
-        react_1.default.createElement(Wrapper, null,
-            react_1.default.createElement("svg", { width: width, height: totalHeightSvg, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w + shift * 2, totalHeightSvg].toString() },
-                react_1.default.createElement(SVGBackground_1.default, { width: w, height: totalHeightSvg, shift: shift }),
-                RenderList))), createRootFn);
+    return (0, util_1.renderToStaticMarkup)((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsxs)("svg", { width: width, height: totalHeightSvg, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w + shift * 2, totalHeightSvg].toString(), children: [(0, jsx_runtime_1.jsx)(SVGBackground_1.default, { width: w, height: totalHeightSvg, shift: shift }), RenderList] }) }) }));
 }

package/dist/LinearSyntenyView/types.d.ts

@@ -0,0 +1,12 @@
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { SnapshotIn } from 'mobx-state-tree';
+export type Conf = SnapshotIn<AnyConfigurationModel>;
+export type ImportFormSyntenyTrack = {
+    type: 'preConfigured';
+    value: string;
+} | {
+    type: 'userOpened';
+    value: Conf;
+} | {
+    type: 'none';
+};

package/dist/LinearSyntenyView/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/LinearSyntenyViewHelper/index.js

@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = LinearSyntenyViewF;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const ViewType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/ViewType"));
 const stateModelFactory_1 = require("./stateModelFactory");
 function UnusedComponent() {
-    return react_1.default.createElement("div", null);
+    return (0, jsx_runtime_1.jsx)("div", {});
 }
 function LinearSyntenyViewF(pluginManager) {
     pluginManager.addViewType(() => {

package/dist/SyntenyFeatureDetail/LinkToSyntenyView.d.ts

@@ -0,0 +1,5 @@
+import type { SyntenyFeatureDetailModel } from './types';
+declare const LinkToSyntenyView: ({ model, }: {
+    model: SyntenyFeatureDetailModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default LinkToSyntenyView;

package/dist/SyntenyFeatureDetail/LinkToSyntenyView.js

@@ -0,0 +1,87 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const LaunchSyntenyViewDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../LGVSyntenyDisplay/components/LaunchSyntenyViewDialog'))));
+const LinkToSyntenyView = (0, mobx_react_1.observer)(function ({ model, }) {
+    const { featureData, view, level, trackId } = model;
+    return ((0, jsx_runtime_1.jsxs)("ul", { children: [view.type === 'LinearSyntenyView' ? ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(material_1.Link, { href: "#", onClick: event => {
+                        var _a, _b;
+                        event.preventDefault();
+                        const { views } = view;
+                        if (level !== undefined) {
+                            (_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 {
+                            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);
+                        }
+                    }, children: "Center view on this feature" }) })) : null, (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(material_1.Link, { href: "#", onClick: event => {
+                        event.preventDefault();
+                        const feature = new util_1.SimpleFeature(featureData);
+                        const session = (0, util_1.getSession)(model);
+                        session.queueDialog(handleClose => [
+                            LaunchSyntenyViewDialog,
+                            {
+                                session,
+                                feature,
+                                trackId,
+                                handleClose,
+                            },
+                        ]);
+                    }, children: "Launch new linear synteny view on this feature" }) })] }));
+});
+exports.default = LinkToSyntenyView;

package/dist/SyntenyFeatureDetail/SyntenyFeatureDetail.d.ts

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

package/dist/SyntenyFeatureDetail/SyntenyFeatureDetail.js

@@ -1,91 +1,15 @@
 "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 jsx_runtime_1 = require("react/jsx-runtime");
 const BaseFeatureDetail_1 = __importDefault(require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail"));
 const BaseCard_1 = __importDefault(require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard"));
-const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
-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) {
-                        (_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 {
-                        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 LinkToSyntenyView_1 = __importDefault(require("./LinkToSyntenyView"));
 const SyntenyFeatureDetail = (0, mobx_react_1.observer)(function ({ model, }) {
-    return (react_1.default.createElement(material_1.Paper, null,
-        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 }))));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { children: [(0, jsx_runtime_1.jsx)(BaseFeatureDetail_1.default, { title: "Feature", model: model }), (0, jsx_runtime_1.jsx)(BaseCard_1.default, { title: "Link to view", children: (0, jsx_runtime_1.jsx)(LinkToSyntenyView_1.default, { model: model }) })] }));
 });
 exports.default = SyntenyFeatureDetail;

package/dist/SyntenyFeatureDetail/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/SyntenyFeatureDetail/types.d.ts

@@ -0,0 +1,9 @@
+import type { SimpleFeatureSerialized } from '@jbrowse/core/util';
+export interface SyntenyFeatureDetailModel {
+    trackId: string;
+    featureData: SimpleFeatureSerialized;
+    level?: number;
+    view: {
+        type: string;
+    };
+}

package/dist/SyntenyFeatureDetail/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,8 +1,9 @@
-import React from 'react';
-import type { Feature } from '@jbrowse/core/util';
-export default function LaunchSyntenyViewDialog({ model, feature, trackId, handleClose, }: {
-    model: unknown;
+import type { AbstractSessionModel, Feature } from '@jbrowse/core/util';
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
+export default function LaunchSyntenyViewDialog({ session, view, feature, trackId, handleClose, }: {
+    session: AbstractSessionModel;
+    view?: LinearGenomeViewModel;
     feature: Feature;
     trackId: string;
     handleClose: () => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/LGVSyntenyDisplay/components/LaunchSyntenyViewDialog.js

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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 { makeStyles } from 'tss-react/mui';
 import { navToSynteny } from './util';
@@ -10,40 +10,41 @@ const useStyles = makeStyles()({
         border: '1px solid #ccc',
     },
 });
-export default function LaunchSyntenyViewDialog({ model, feature, trackId, handleClose, }) {
+export default function LaunchSyntenyViewDialog({ session, view, feature, trackId, handleClose, }) {
     const { classes } = useStyles();
     const inverted = feature.get('strand') === -1;
+    const hasCIGAR = !!feature.get('CIGAR');
     const [horizontallyFlip, setHorizontallyFlip] = useState(inverted);
     const [windowSize, setWindowSize] = useState('1000');
-    return (React.createElement(Dialog, { open: true, title: "Launch synteny view", onClose: handleClose },
-        React.createElement(DialogContent, null,
-            inverted ? (React.createElement(FormControlLabel, { className: classes.padding, control: React.createElement(Checkbox, { checked: horizontallyFlip, onChange: event => {
-                        setHorizontallyFlip(event.target.checked);
-                    } }), label: "Note: The feature is inverted in orientation on the target\n            sequence. This will result in the lower panel having genomic\n            coordinates decreasing left to right. Horizontally flip?" })) : null,
-            React.createElement(TextField, { label: "Add window size in bp", value: windowSize, onChange: event => {
-                    setWindowSize(event.target.value);
-                } })),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { variant: "contained", onClick: () => {
-                    ;
-                    (async () => {
-                        try {
-                            await navToSynteny({
-                                feature,
-                                windowSize: +windowSize,
-                                horizontallyFlip,
-                                trackId,
-                                model,
-                            });
-                        }
-                        catch (e) {
-                            console.error(e);
-                            getSession(model).notifyError(`${e}`, e);
-                        }
-                    })();
-                    handleClose();
-                } }, "Submit"),
-            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
-                    handleClose();
-                } }, "Cancel"))));
+    const [useRegionOfInterest, setUseRegionOfInterest] = useState(true);
+    return (_jsxs(Dialog, { open: true, title: "Launch synteny view", onClose: handleClose, children: [_jsxs(DialogContent, { children: [view && hasCIGAR ? (_jsx(FormControlLabel, { className: classes.padding, control: _jsx(Checkbox, { checked: useRegionOfInterest, onChange: event => {
+                                setUseRegionOfInterest(event.target.checked);
+                            } }), label: "Use CIGAR string to navigate the current visible to the target" })) : null, inverted ? (_jsx(FormControlLabel, { className: classes.padding, control: _jsx(Checkbox, { checked: horizontallyFlip, onChange: event => {
+                                setHorizontallyFlip(event.target.checked);
+                            } }), label: "Note: The feature is inverted in orientation on the target\n            sequence. This will result in the lower panel having genomic\n            coordinates decreasing left to right. Horizontally flip?" })) : null, _jsx(TextField, { label: "Add window size in bp", value: windowSize, onChange: event => {
+                            setWindowSize(event.target.value);
+                        } })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", onClick: () => {
+                            ;
+                            (async () => {
+                                try {
+                                    await navToSynteny({
+                                        feature,
+                                        windowSize: +windowSize,
+                                        horizontallyFlip,
+                                        trackId,
+                                        session,
+                                        region: useRegionOfInterest
+                                            ? view === null || view === void 0 ? void 0 : view.dynamicBlocks.contentBlocks[0]
+                                            : undefined,
+                                    });
+                                }
+                                catch (e) {
+                                    console.error(e);
+                                    session.notifyError(`${e}`, e);
+                                }
+                            })();
+                            handleClose();
+                        }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" })] })] }));
 }

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

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

package/esm/LGVSyntenyDisplay/components/util.js

@@ -1,9 +1,5 @@
-import { getSession } from '@jbrowse/core/util';
 import { MismatchParser } from '@jbrowse/plugin-alignments';
 const { parseCigar } = MismatchParser;
-function f(n) {
-    return Math.floor(n);
-}
 function findPosInCigar(cigar, startX) {
     let featX = 0;
     let mateX = 0;
@@ -27,9 +23,7 @@ function findPosInCigar(cigar, startX) {
     }
     return [featX, mateX];
 }
-export async function navToSynteny({ feature, windowSize: ws, model, trackId, view, horizontallyFlip, }) {
-    const session = getSession(model);
-    const reg = view === null || view === void 0 ? void 0 : view.dynamicBlocks.contentBlocks[0];
+export async function navToSynteny({ feature, windowSize: ws, session, trackId, region, horizontallyFlip, }) {
     const cigar = feature.get('CIGAR');
     const strand = feature.get('strand');
     const featRef = feature.get('refName');
@@ -45,9 +39,9 @@ export async function navToSynteny({ feature, windowSize: ws, model, trackId, vi
     let rMateEnd;
     let rFeatStart;
     let rFeatEnd;
-    if (reg && cigar) {
-        const regStart = reg.start;
-        const regEnd = reg.end;
+    if (region && cigar) {
+        const regStart = region.start;
+        const regEnd = region.end;
         const p = parseCigar(cigar);
         const [fStartX, mStartX] = findPosInCigar(p, regStart - featStart);
         const [fEndX, mEndX] = findPosInCigar(p, regEnd - featStart);
@@ -88,10 +82,10 @@ export async function navToSynteny({ feature, windowSize: ws, model, trackId, vi
             },
         ],
     });
-    const l1 = `${featRef}:${f(rFeatStart - ws)}-${f(rFeatEnd + ws)}`;
+    const l1 = `${featRef}:${Math.floor(rFeatStart - ws)}-${Math.floor(rFeatEnd + ws)}`;
     const m1 = Math.min(rMateStart, rMateEnd);
     const m2 = Math.max(rMateStart, rMateEnd);
-    const l2 = `${mateRef}:${f(m1 - ws)}-${f(m2 + ws)}${horizontallyFlip ? '[rev]' : ''}`;
+    const l2 = `${mateRef}:${Math.floor(m1 - ws)}-${Math.floor(m2 + ws)}${horizontallyFlip ? '[rev]' : ''}`;
     await Promise.all([
         view2.views[0].navToLocString(l1, featAsm),
         view2.views[1].navToLocString(l2, mateAsm),

package/esm/LGVSyntenyDisplay/model.d.ts

@@ -35,7 +35,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => import("react").JSX.Element | undefined;
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -85,6 +85,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
     colorBySetting: import("mobx-state-tree").IType<import("@jbrowse/plugin-alignments/src/shared/types").ColorBy | undefined, import("@jbrowse/plugin-alignments/src/shared/types").ColorBy | undefined, import("@jbrowse/plugin-alignments/src/shared/types").ColorBy | undefined>;
     filterBySetting: import("mobx-state-tree").IType<import("@jbrowse/plugin-alignments/src/shared/types").FilterBy | undefined, import("@jbrowse/plugin-alignments/src/shared/types").FilterBy | undefined, import("@jbrowse/plugin-alignments/src/shared/types").FilterBy | undefined>;
     jexlFilters: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>, [undefined]>;
+    hideSmallIndelsSetting: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
 } & {
     type: import("mobx-state-tree").ISimpleType<"LGVSyntenyDisplay">;
     configuration: AnyConfigurationSchemaType;
@@ -179,13 +180,13 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
 } & {
     readonly statsReadyAndRegionNotTooLarge: boolean;
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | Feature;
 } & {
-    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
-    readonly blockType: "dynamicBlocks" | "staticBlocks";
+    readonly DisplayMessageComponent: undefined | React.FC<any>;
+    readonly blockType: "staticBlocks" | "dynamicBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
@@ -212,7 +213,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
     contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     renderProps(): any;
 } & {
-    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
+    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react/jsx-runtime").JSX.Element>;
     afterAttach(): void;
 } & {
     colorTagMap: import("mobx").ObservableMap<string, string>;
@@ -223,6 +224,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
     readonly filterBy: any;
 } & {
     readonly autorunReady: boolean;
+    readonly hideSmallIndels: boolean | undefined;
 } & {
     setTagsReady(flag: boolean): void;
     setMaxHeight(n?: number): void;
@@ -236,6 +238,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
     setConfig(conf: import("@jbrowse/core/configuration").AnyConfigurationModel): void;
     setFilterBy(filter: import("@jbrowse/plugin-alignments/src/shared/types").FilterBy): void;
     setJexlFilters(filters: string[]): void;
+    setHideSmallIndels(arg: boolean): void;
 } & {
     readonly rendererConfig: {
         [x: string]: any;
@@ -271,18 +274,28 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
         model: {
             sortedBy?: import("@jbrowse/plugin-alignments/src/shared/types").SortedBy;
         };
-    }) => import("react").JSX.Element | null;
+    }) => import("react/jsx-runtime").JSX.Element | null;
     renderPropsPre(): any;
     colorSchemeSubMenuItems(): {
         label: string;
         onClick: () => void;
     }[];
     trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
+        label: string;
+        priority: number;
+        type: string;
+        checked: boolean | undefined;
+        onClick: () => void;
+        icon?: undefined;
+    } | {
         label: string;
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
         onClick: () => void;
+        priority?: undefined;
+        type?: undefined;
+        checked?: undefined;
     })[];
 } & {
     renderProps(): any;
@@ -338,7 +351,7 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => import("react").JSX.Element | undefined;
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -388,5 +401,6 @@ declare function stateModelFactory(schema: AnyConfigurationSchemaType): import("
     colorBySetting: import("mobx-state-tree").IType<import("@jbrowse/plugin-alignments/src/shared/types").ColorBy | undefined, import("@jbrowse/plugin-alignments/src/shared/types").ColorBy | undefined, import("@jbrowse/plugin-alignments/src/shared/types").ColorBy | undefined>;
     filterBySetting: import("mobx-state-tree").IType<import("@jbrowse/plugin-alignments/src/shared/types").FilterBy | undefined, import("@jbrowse/plugin-alignments/src/shared/types").FilterBy | undefined, import("@jbrowse/plugin-alignments/src/shared/types").FilterBy | undefined>;
     jexlFilters: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>, [undefined]>;
+    hideSmallIndelsSetting: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
 }>> & import("mobx-state-tree/dist/internal").NonEmptyObject & import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export default stateModelFactory;

package/esm/LGVSyntenyDisplay/model.js

@@ -25,9 +25,10 @@ function stateModelFactory(schema) {
                                     getSession(self).queueDialog(handleClose => [
                                         LaunchSyntenyViewDialog,
                                         {
-                                            model: self,
+                                            view: getContainingView(self),
                                             trackId: getConf(getContainingTrack(self), 'trackId'),
                                             handleClose,
+                                            session: getSession(self),
                                             feature,
                                         },
                                     ]);