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

package/dist/LinearReadVsRef/LinearReadVsRef.js

@@ -1,38 +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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ReadVsRefDialog;
-const react_1 = __importStar(require("react"));
-const material_1 = require("@mui/material");
-const ui_1 = require("@jbrowse/core/ui");
-const mui_1 = require("tss-react/mui");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const configuration_1 = require("@jbrowse/core/configuration");
-const tracks_1 = require("@jbrowse/core/util/tracks");
+const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
-// locals
+const tracks_1 = require("@jbrowse/core/util/tracks");
 const plugin_alignments_1 = require("@jbrowse/plugin-alignments");
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
 const { featurizeSA, getClip, getLength, getLengthSansClipping, getTag } = plugin_alignments_1.MismatchParser;
 const useStyles = (0, mui_1.makeStyles)()({
     root: {
@@ -41,16 +18,11 @@ const useStyles = (0, mui_1.makeStyles)()({
 });
 function ReadVsRefDialog({ track, feature: preFeature, handleClose, }) {
     const { classes } = useStyles();
-    // window size stored as string, because it corresponds to a textfield which
-    // is parsed as number on submit
     const [windowSizeText, setWindowSize] = (0, react_1.useState)('0');
     const [error, setError] = (0, react_1.useState)();
     const [primaryFeature, setPrimaryFeature] = (0, react_1.useState)();
     const windowSize = +windowSizeText;
-    // we need to fetch the primary alignment if the selected feature is 2048.
-    // this should be the first in the list of the SA tag
     (0, react_1.useEffect)(() => {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         ;
         (async () => {
             setError(undefined);
@@ -113,9 +85,6 @@ function ReadVsRefDialog({ track, feature: preFeature, handleClose, }) {
             const assemblyNames = [trackAssembly, readAssembly];
             const trackId = `track-${Date.now()}`;
             const trackName = `${readName}_vs_${trackAssembly}`;
-            // get the canonical refname for the read because if the
-            // read.get('refName') is chr1 and the actual fasta refName is 1 then no
-            // tracks can be opened on the top panel of the linear read vs ref
             const { assemblyManager } = session;
             const assembly = assemblyManager.get(trackAssembly);
             if (!assembly) {
@@ -130,9 +99,6 @@ function ReadVsRefDialog({ track, feature: preFeature, handleClose, }) {
                 start: clipPos,
                 end: clipPos + getLengthSansClipping(cigar),
             };
-            // if secondary alignment or supplementary, calculate length from SA[0]'s
-            // CIGAR which is the primary alignments. otherwise it is the primary
-            // alignment just use seq.length if primary alignment
             const totalLength = flags & 2048 ? getLength(suppAlns[0].CIGAR) : getLength(cigar);
             const features = [feat, ...suppAlns];
             features.forEach((f, idx) => {
@@ -143,8 +109,6 @@ function ReadVsRefDialog({ track, feature: preFeature, handleClose, }) {
             });
             features.sort((a, b) => a.clipPos - b.clipPos);
             const featSeq = feature.get('seq');
-            // the config feature store includes synthetic mate features
-            // mapped to the read assembly
             const configFeatureStore = [...features, ...features.map(f => f.mate)];
             const expand = 2 * windowSize;
             const refLen = features.reduce((a, f) => a + f.end - f.start + expand, 0);
@@ -170,7 +134,7 @@ function ReadVsRefDialog({ track, feature: preFeature, handleClose, }) {
                             {
                                 start: 0,
                                 end: totalLength,
-                                seq: featSeq || '', // can be empty if user clicks secondary read
+                                seq: featSeq || '',
                                 refName: readName,
                                 uniqueId: `${Math.random()}`,
                             },
@@ -271,16 +235,7 @@ function ReadVsRefDialog({ track, feature: preFeature, handleClose, }) {
             setError(e);
         }
     }
-    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Set window size" },
-        react_1.default.createElement(material_1.DialogContent, null, error ? (react_1.default.createElement(material_1.Typography, { color: "error" }, `${error}`)) : !primaryFeature ? (react_1.default.createElement("div", null,
-            react_1.default.createElement(material_1.Typography, null, "To accurately perform comparison we are fetching the primary alignment. Loading primary feature..."),
-            react_1.default.createElement(material_1.CircularProgress, null))) : (react_1.default.createElement("div", { className: classes.root },
-            primaryFeature.get('flags') & 256 ? (react_1.default.createElement(material_1.Typography, { style: { color: 'orange' } }, "Note: You selected a secondary alignment (which generally does not have SA tags or SEQ fields) so do a full reconstruction of the alignment")) : null,
-            react_1.default.createElement(material_1.Typography, null, "Show an extra window size around each part of the split alignment. Using a larger value can allow you to see more genomic context."),
-            react_1.default.createElement(material_1.TextField, { value: windowSize, onChange: event => {
-                    setWindowSize(event.target.value);
-                }, label: "Set window size" })))),
-        react_1.default.createElement(material_1.DialogActions, null,
-            react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: handleClose }, "Cancel"),
-            react_1.default.createElement(material_1.Button, { disabled: !primaryFeature, variant: "contained", color: "primary", onClick: onSubmit }, "Submit"))));
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { open: true, onClose: handleClose, title: "Set window size", children: [(0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: error ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { color: "error", children: `${error}` })) : !primaryFeature ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "To accurately perform comparison we are fetching the primary alignment. Loading primary feature..." }), (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})] })) : ((0, jsx_runtime_1.jsxs)("div", { className: classes.root, children: [primaryFeature.get('flags') & 256 ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { style: { color: 'orange' }, children: "Note: You selected a secondary alignment (which generally does not have SA tags or SEQ fields) so do a full reconstruction of the alignment" })) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Show an extra window size around each part of the split alignment. Using a larger value can allow you to see more genomic context." }), (0, jsx_runtime_1.jsx)(material_1.TextField, { value: windowSize, onChange: event => {
+                                setWindowSize(event.target.value);
+                            }, label: "Set window size" })] })) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: handleClose, children: "Cancel" }), (0, jsx_runtime_1.jsx)(material_1.Button, { disabled: !primaryFeature, variant: "contained", color: "primary", onClick: onSubmit, children: "Submit" })] })] }));
 }

package/dist/LinearReadVsRef/index.d.ts

@@ -1,2 +1,2 @@
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default function LinearReadVsRefMenuItemF(pm: PluginManager): void;

package/dist/LinearReadVsRef/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 };
 };
@@ -29,9 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = LinearReadVsRefMenuItemF;
 const react_1 = require("react");
 const util_1 = require("@jbrowse/core/util");
-// icons
 const Add_1 = __importDefault(require("@mui/icons-material/Add"));
-// locals
 const ReadVsRefDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./LinearReadVsRef'))));
 function isDisplay(elt) {
     return elt.name === 'LinearPileupDisplay';

package/dist/LinearSyntenyDisplay/afterAttach.d.ts

@@ -1,2 +1,2 @@
-import { LinearSyntenyDisplayModel } from './model';
+import type { LinearSyntenyDisplayModel } from './model';
 export declare function doAfterAttach(self: LinearSyntenyDisplayModel): void;

package/dist/LinearSyntenyDisplay/afterAttach.js

@@ -1,17 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.doAfterAttach = doAfterAttach;
-const mobx_1 = require("mobx");
-const mobx_state_tree_1 = require("mobx-state-tree");
 const util_1 = require("@jbrowse/core/util");
 const Base1DUtils_1 = require("@jbrowse/core/util/Base1DUtils");
 const plugin_alignments_1 = require("@jbrowse/plugin-alignments");
+const mobx_1 = require("mobx");
+const mobx_state_tree_1 = require("mobx-state-tree");
 const drawSynteny_1 = require("./drawSynteny");
 function doAfterAttach(self) {
     (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
         var _a, _b;
         const view = (0, util_1.getContainingView)(self);
-        if (!view.initialized) {
+        if (!view.initialized ||
+            !view.views.every(a => a.displayedRegions.length > 0 && a.initialized)) {
             return;
         }
         const ctx1 = (_a = self.mainCanvas) === null || _a === void 0 ? void 0 : _a.getContext('2d');
@@ -27,25 +28,20 @@ function doAfterAttach(self) {
     }));
     (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
         const view = (0, util_1.getContainingView)(self);
-        if (!view.initialized) {
+        if (!view.initialized ||
+            !view.views.every(a => a.displayedRegions.length > 0 && a.initialized)) {
             return;
         }
         (0, drawSynteny_1.drawMouseoverSynteny)(self);
     }));
-    // this attempts to reduce recalculation of feature positions drawn by
-    // the synteny view
-    //
-    // uses a reaction to say "we know the positions don't change in any
-    // relevant way unless bpPerPx changes or displayedRegions changes"
     (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.reaction)(() => {
         const view = (0, util_1.getContainingView)(self);
         return {
             bpPerPx: view.views.map(v => v.bpPerPx),
-            // stringifying 'deeply' accesses the displayed regions, see
-            // issue #3456
             displayedRegions: JSON.stringify(view.views.map(v => v.displayedRegions)),
             features: self.features,
-            initialized: view.initialized,
+            initialized: view.initialized &&
+                view.views.every(a => a.displayedRegions.length > 0 && a.initialized),
         };
     }, ({ initialized }) => {
         if (!initialized) {

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

@@ -1,6 +1,5 @@
-import React from 'react';
-import { LinearSyntenyDisplayModel } from '../model';
+import type { LinearSyntenyDisplayModel } from '../model';
 declare const ServerSideRenderedBlockContent: ({ model, }: {
     model: LinearSyntenyDisplayModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ServerSideRenderedBlockContent;

package/dist/LinearSyntenyDisplay/components/Component.js

@@ -1,36 +1,13 @@
 "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 mui_1 = require("tss-react/mui");
-const mobx_react_1 = require("mobx-react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const ui_1 = require("@jbrowse/core/ui");
-// locals
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
 const LinearSyntenyRendering_1 = __importDefault(require("./LinearSyntenyRendering"));
 const useStyles = (0, mui_1.makeStyles)()(theme => {
     const bg = theme.palette.action.disabledBackground;
@@ -53,7 +30,6 @@ const useStyles = (0, mui_1.makeStyles)()(theme => {
     };
 });
 function LoadingMessage() {
-    // only show the loading message after 300ms to prevent excessive flickering
     const [shown, setShown] = (0, react_1.useState)(false);
     const { classes } = useStyles();
     (0, react_1.useEffect)(() => {
@@ -64,27 +40,26 @@ function LoadingMessage() {
             clearTimeout(timeout);
         };
     });
-    return shown ? (react_1.default.createElement("div", { className: classes.loading },
-        react_1.default.createElement(ui_1.LoadingEllipses, null))) : null;
+    return shown ? ((0, jsx_runtime_1.jsx)("div", { className: classes.loading, children: (0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, {}) })) : null;
 }
 function BlockMessage({ messageText }) {
     const { classes } = useStyles();
-    return react_1.default.createElement("div", { className: classes.blockMessage }, messageText);
+    return (0, jsx_runtime_1.jsx)("div", { className: classes.blockMessage, children: messageText });
 }
 function BlockError({ error }) {
     const { classes } = useStyles();
-    return react_1.default.createElement("div", { className: classes.blockError }, `${error}`);
+    return (0, jsx_runtime_1.jsx)("div", { className: classes.blockError, children: `${error}` });
 }
 const ServerSideRenderedBlockContent = (0, mobx_react_1.observer)(function ({ model, }) {
     if (model.error) {
-        return react_1.default.createElement(BlockError, { error: model.error });
+        return (0, jsx_runtime_1.jsx)(BlockError, { error: model.error });
     }
     if (model.message) {
-        return react_1.default.createElement(BlockMessage, { messageText: model.message });
+        return (0, jsx_runtime_1.jsx)(BlockMessage, { messageText: model.message });
     }
     if (!model.features) {
-        return react_1.default.createElement(LoadingMessage, null);
+        return (0, jsx_runtime_1.jsx)(LoadingMessage, {});
     }
-    return react_1.default.createElement(LinearSyntenyRendering_1.default, { model: model });
+    return (0, jsx_runtime_1.jsx)(LinearSyntenyRendering_1.default, { model: model });
 });
 exports.default = ServerSideRenderedBlockContent;

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

@@ -1,6 +1,5 @@
-import React from 'react';
-import { LinearSyntenyDisplayModel } from '../model';
+import type { LinearSyntenyDisplayModel } from '../model';
 declare const LinearSyntenyRendering: ({ model, }: {
     model: LinearSyntenyDisplayModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default LinearSyntenyRendering;

package/dist/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -15,21 +15,32 @@ 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 };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const mobx_react_1 = require("mobx-react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const util_1 = require("@jbrowse/core/util");
 const mobx_1 = require("mobx");
+const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
 const drawSynteny_1 = require("../drawSynteny");
 const SyntenyContextMenu_1 = __importDefault(require("./SyntenyContextMenu"));
@@ -61,30 +72,21 @@ const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, })
     const width = view.width;
     const delta = (0, react_1.useRef)(0);
     const scheduled = (0, react_1.useRef)(false);
-    const timeout = (0, react_1.useRef)();
+    const timeout = (0, react_1.useRef)(null);
     const [anchorEl, setAnchorEl] = (0, react_1.useState)();
     const [tooltip, setTooltip] = (0, react_1.useState)('');
     const [currX, setCurrX] = (0, react_1.useState)();
     const [mouseCurrDownX, setMouseCurrDownX] = (0, react_1.useState)();
     const [mouseInitialDownX, setMouseInitialDownX] = (0, react_1.useState)();
     const [currY, setCurrY] = (0, react_1.useState)();
-    const mainSyntenyCanvasRefp = (0, react_1.useRef)();
-    // these useCallbacks avoid new refs from being created on any mouseover,
-    // etc.
-    // biome-ignore lint/correctness/useExhaustiveDependencies:
+    const mainSyntenyCanvasRefp = (0, react_1.useRef)(null);
     const mouseoverDetectionCanvasRef = (0, react_1.useCallback)((ref) => {
         model.setMouseoverCanvasRef(ref);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
-    // biome-ignore lint/correctness/useExhaustiveDependencies:
+    }, [model, height, width]);
     const mainSyntenyCanvasRef = (0, react_1.useCallback)((ref) => {
         model.setMainCanvasRef(ref);
-        mainSyntenyCanvasRefp.current = ref; // this ref is additionally used in useEffect below
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
-    // biome-ignore lint/correctness/useExhaustiveDependencies:
+        mainSyntenyCanvasRefp.current = ref;
+    }, [model, height, width]);
     (0, react_1.useEffect)(() => {
         var _a;
         function onWheel(event) {
@@ -133,97 +135,84 @@ const LinearSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, })
             var _a;
             (_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 clickMapCanvasRef = (0, react_1.useCallback)((ref) => {
         model.setClickMapCanvasRef(ref);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
-    // biome-ignore lint/correctness/useExhaustiveDependencies:
+    }, [model, height, width]);
     const cigarClickMapCanvasRef = (0, react_1.useCallback)((ref) => {
         model.setCigarClickMapCanvasRef(ref);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width]);
-    return (react_1.default.createElement("div", { className: classes.rel },
-        react_1.default.createElement("canvas", { ref: mouseoverDetectionCanvasRef, width: width, height: height, className: classes.mouseoverCanvas }),
-        react_1.default.createElement("canvas", { ref: mainSyntenyCanvasRef, onMouseMove: event => {
-                var _a;
-                if (mouseCurrDownX !== undefined) {
-                    xOffset.current += mouseCurrDownX - event.clientX;
-                    setMouseCurrDownX(event.clientX);
-                    if (!scheduled.current) {
-                        scheduled.current = true;
-                        window.requestAnimationFrame(() => {
-                            (0, mobx_1.transaction)(() => {
-                                for (const v of view.views) {
-                                    v.horizontalScroll(xOffset.current);
-                                }
-                                xOffset.current = 0;
-                                scheduled.current = false;
+    }, [model, height, width]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes.rel, children: [(0, jsx_runtime_1.jsx)("canvas", { ref: mouseoverDetectionCanvasRef, width: width, height: height, className: classes.mouseoverCanvas }), (0, jsx_runtime_1.jsx)("canvas", { ref: mainSyntenyCanvasRef, onMouseMove: event => {
+                    var _a;
+                    if (mouseCurrDownX !== undefined) {
+                        xOffset.current += mouseCurrDownX - event.clientX;
+                        setMouseCurrDownX(event.clientX);
+                        if (!scheduled.current) {
+                            scheduled.current = true;
+                            window.requestAnimationFrame(() => {
+                                (0, mobx_1.transaction)(() => {
+                                    for (const v of view.views) {
+                                        v.horizontalScroll(xOffset.current);
+                                    }
+                                    xOffset.current = 0;
+                                    scheduled.current = false;
+                                });
                             });
-                        });
-                    }
-                }
-                else {
-                    const ref1 = model.clickMapCanvas;
-                    const ref2 = model.cigarClickMapCanvas;
-                    if (!ref1 || !ref2) {
-                        return;
+                        }
                     }
-                    const rect = ref1.getBoundingClientRect();
-                    const ctx1 = ref1.getContext('2d');
-                    const ctx2 = ref2.getContext('2d');
-                    if (!ctx1 || !ctx2) {
-                        return;
+                    else {
+                        const ref1 = model.clickMapCanvas;
+                        const ref2 = model.cigarClickMapCanvas;
+                        if (!ref1 || !ref2) {
+                            return;
+                        }
+                        const rect = ref1.getBoundingClientRect();
+                        const ctx1 = ref1.getContext('2d');
+                        const ctx2 = ref2.getContext('2d');
+                        if (!ctx1 || !ctx2) {
+                            return;
+                        }
+                        const { clientX, clientY } = event;
+                        const x = clientX - rect.left;
+                        const y = clientY - rect.top;
+                        setCurrX(clientX);
+                        setCurrY(clientY);
+                        const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
+                        const [r2, g2, b2] = ctx2.getImageData(x, y, 1, 1).data;
+                        const unitMultiplier = Math.floor(drawSynteny_1.MAX_COLOR_RANGE / model.numFeats);
+                        const id = (0, drawSynteny_1.getId)(r1, g1, b1, unitMultiplier);
+                        model.setMouseoverId((_a = model.featPositions[id]) === null || _a === void 0 ? void 0 : _a.f.id());
+                        if (id === -1) {
+                            setTooltip('');
+                        }
+                        else if (model.featPositions[id]) {
+                            const { f, cigar } = model.featPositions[id];
+                            const unitMultiplier2 = Math.floor(drawSynteny_1.MAX_COLOR_RANGE / cigar.length);
+                            const cigarIdx = (0, drawSynteny_1.getId)(r2, g2, b2, unitMultiplier2);
+                            setTooltip((0, util_2.getTooltip)({
+                                feature: f,
+                                cigarOp: cigar[cigarIdx],
+                                cigarOpLen: cigar[cigarIdx + 1],
+                            }));
+                        }
                     }
-                    const { clientX, clientY } = event;
-                    const x = clientX - rect.left;
-                    const y = clientY - rect.top;
-                    setCurrX(clientX);
-                    setCurrY(clientY);
-                    const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data;
-                    const [r2, g2, b2] = ctx2.getImageData(x, y, 1, 1).data;
-                    const unitMultiplier = Math.floor(drawSynteny_1.MAX_COLOR_RANGE / model.numFeats);
-                    const id = (0, drawSynteny_1.getId)(r1, g1, b1, unitMultiplier);
-                    model.setMouseoverId((_a = model.featPositions[id]) === null || _a === void 0 ? void 0 : _a.f.id());
-                    if (id === -1) {
-                        setTooltip('');
+                }, onMouseLeave: () => {
+                    model.setMouseoverId(undefined);
+                    setMouseInitialDownX(undefined);
+                    setMouseCurrDownX(undefined);
+                }, onMouseDown: evt => {
+                    setMouseCurrDownX(evt.clientX);
+                    setMouseInitialDownX(evt.clientX);
+                }, onMouseUp: evt => {
+                    setMouseCurrDownX(undefined);
+                    if (mouseInitialDownX !== undefined &&
+                        Math.abs(evt.clientX - mouseInitialDownX) < 5) {
+                        (0, util_2.onSynClick)(evt, model);
                     }
-                    else if (model.featPositions[id]) {
-                        const { f, cigar } = model.featPositions[id];
-                        const unitMultiplier2 = Math.floor(drawSynteny_1.MAX_COLOR_RANGE / cigar.length);
-                        const cigarIdx = (0, drawSynteny_1.getId)(r2, g2, b2, unitMultiplier2);
-                        setTooltip((0, util_2.getTooltip)({
-                            feature: f,
-                            cigarOp: cigar[cigarIdx],
-                            cigarOpLen: cigar[cigarIdx + 1],
-                        }));
-                    }
-                }
-            }, onMouseLeave: () => {
-                model.setMouseoverId(undefined);
-                setMouseInitialDownX(undefined);
-                setMouseCurrDownX(undefined);
-            }, onMouseDown: evt => {
-                setMouseCurrDownX(evt.clientX);
-                setMouseInitialDownX(evt.clientX);
-            }, onMouseUp: evt => {
-                setMouseCurrDownX(undefined);
-                if (mouseInitialDownX !== undefined &&
-                    Math.abs(evt.clientX - mouseInitialDownX) < 5) {
-                    (0, util_2.onSynClick)(evt, model);
-                }
-            }, onContextMenu: evt => {
-                (0, util_2.onSynContextClick)(evt, model, setAnchorEl);
-            }, "data-testid": "synteny_canvas", className: classes.mainCanvas, width: width, height: height }),
-        react_1.default.createElement("canvas", { ref: clickMapCanvasRef, className: classes.pix, width: width, height: height }),
-        react_1.default.createElement("canvas", { ref: cigarClickMapCanvasRef, className: classes.pix, width: width, height: height }),
-        mouseoverId && tooltip && currX && currY ? (react_1.default.createElement(SyntenyTooltip, { title: tooltip })) : null,
-        anchorEl ? (react_1.default.createElement(SyntenyContextMenu_1.default, { model: model, anchorEl: anchorEl, onClose: () => {
-                setAnchorEl(undefined);
-            } })) : null));
+                }, onContextMenu: evt => {
+                    (0, util_2.onSynContextClick)(evt, model, setAnchorEl);
+                }, "data-testid": "synteny_canvas", className: classes.mainCanvas, width: width, height: height }), (0, jsx_runtime_1.jsx)("canvas", { ref: clickMapCanvasRef, className: classes.pix, width: width, height: height }), (0, jsx_runtime_1.jsx)("canvas", { ref: cigarClickMapCanvasRef, className: classes.pix, width: width, height: height }), mouseoverId && tooltip && currX && currY ? ((0, jsx_runtime_1.jsx)(SyntenyTooltip, { title: tooltip })) : null, anchorEl ? ((0, jsx_runtime_1.jsx)(SyntenyContextMenu_1.default, { model: model, anchorEl: anchorEl, onClose: () => {
+                    setAnchorEl(undefined);
+                } })) : null] }));
 });
 exports.default = LinearSyntenyRendering;

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

@@ -1,6 +1,5 @@
-import React from 'react';
-import { Feature } from '@jbrowse/core/util';
-import { LinearSyntenyDisplayModel } from '../model';
+import type { LinearSyntenyDisplayModel } from '../model';
+import type { Feature } from '@jbrowse/core/util';
 interface ClickCoord {
     clientX: number;
     clientY: number;
@@ -12,5 +11,5 @@ export default function SyntenyContextMenu({ model, onClose, anchorEl, }: {
     onClose: () => void;
     model: LinearSyntenyDisplayModel;
     anchorEl: ClickCoord;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/LinearSyntenyDisplay/components/SyntenyContextMenu.js

@@ -1,16 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SyntenyContextMenu;
-const react_1 = __importDefault(require("react"));
-const util_1 = require("@jbrowse/core/util");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
 function SyntenyContextMenu({ model, onClose, anchorEl, }) {
     const view = (0, util_1.getContainingView)(model);
     const { clientX, clientY, feature } = anchorEl;
-    return (react_1.default.createElement(ui_1.Menu, { onMenuItemClick: (event, callback) => {
+    return ((0, jsx_runtime_1.jsx)(ui_1.Menu, { onMenuItemClick: (event, callback) => {
             callback(event);
             onClose();
         }, anchorEl: {

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

@@ -1,5 +1,4 @@
-import React from 'react';
 declare const SyntenyTooltip: ({ title }: {
     title: string;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default SyntenyTooltip;