@jbrowse/plugin-breakpoint-split-view 2.18.0 → 3.0.1

package/dist/BreakpointSplitView/components/ExportSvgDialog.js

@@ -1,41 +1,16 @@
 "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 = ExportSvgDialog;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 function LoadingMessage() {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(material_1.CircularProgress, { size: 20, style: { marginRight: 20 } }),
-        react_1.default.createElement(material_1.Typography, { display: "inline" }, "Creating SVG")));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20, style: { marginRight: 20 } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { display: "inline", children: "Creating SVG" })] }));
 }
 function TextField2({ children, ...rest }) {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(material_1.TextField, { ...rest }, children)));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { ...rest, children: children }) }));
 }
 function useSvgLocal(key, val) {
     return (0, util_1.useLocalStorage)(`svg-${key}`, val);
@@ -49,48 +24,34 @@ function ExportSvgDialog({ model, handleClose, }) {
     const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg');
     const [trackLabels, setTrackLabels] = useSvgLocal('tracklabels', 'offset');
     const [themeName, setThemeName] = useSvgLocal('theme', session.themeName || 'default');
-    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Export SVG" },
-        react_1.default.createElement(material_1.DialogContent, null,
-            error ? (react_1.default.createElement(ui_1.ErrorMessage, { error: error })) : loading ? (react_1.default.createElement(LoadingMessage, null)) : null,
-            react_1.default.createElement(TextField2, { helperText: "filename", value: filename, onChange: event => {
-                    setFilename(event.target.value);
-                } }),
-            react_1.default.createElement(TextField2, { select: true, label: "Track label positioning", variant: "outlined", style: { width: 150 }, value: trackLabels, onChange: event => {
-                    setTrackLabels(event.target.value);
-                } },
-                react_1.default.createElement(material_1.MenuItem, { value: "offset" }, "Offset"),
-                react_1.default.createElement(material_1.MenuItem, { value: "overlay" }, "Overlay"),
-                react_1.default.createElement(material_1.MenuItem, { value: "left" }, "Left"),
-                react_1.default.createElement(material_1.MenuItem, { value: "none" }, "None")),
-            react_1.default.createElement("br", null),
-            session.allThemes ? (react_1.default.createElement(TextField2, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => {
-                    setThemeName(event.target.value);
-                } }, Object.entries(session.allThemes()).map(([key, val]) => (react_1.default.createElement(material_1.MenuItem, { key: key, value: key }, val.name || '(Unknown name)'))))) : null,
-            offscreenCanvas ? (react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: rasterizeLayers, onChange: () => {
-                        setRasterizeLayers(val => !val);
-                    } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (react_1.default.createElement(material_1.Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),
-        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, { variant: "contained", color: "primary", type: "submit", onClick: async () => {
-                    setLoading(true);
-                    setError(undefined);
-                    try {
-                        await model.exportSvg({
-                            rasterizeLayers,
-                            filename,
-                            trackLabels,
-                            themeName,
-                        });
-                        handleClose();
-                    }
-                    catch (e) {
-                        console.error(e);
-                        setError(e);
-                    }
-                    finally {
-                        setLoading(false);
-                    }
-                } }, "Submit"))));
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { open: true, onClose: handleClose, title: "Export SVG", children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [error ? ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error })) : loading ? ((0, jsx_runtime_1.jsx)(LoadingMessage, {})) : null, (0, jsx_runtime_1.jsx)(TextField2, { helperText: "filename", value: filename, onChange: event => {
+                            setFilename(event.target.value);
+                        } }), (0, jsx_runtime_1.jsxs)(TextField2, { select: true, label: "Track label positioning", variant: "outlined", style: { width: 150 }, value: trackLabels, onChange: event => {
+                            setTrackLabels(event.target.value);
+                        }, children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "offset", children: "Offset" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "overlay", children: "Overlay" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "left", children: "Left" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "none", children: "None" })] }), (0, jsx_runtime_1.jsx)("br", {}), session.allThemes ? ((0, jsx_runtime_1.jsx)(TextField2, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => {
+                            setThemeName(event.target.value);
+                        }, children: Object.entries(session.allThemes()).map(([key, val]) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: key, children: val.name || '(Unknown name)' }, key))) })) : null, offscreenCanvas ? ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: rasterizeLayers, onChange: () => {
+                                setRasterizeLayers(val => !val);
+                            } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Note: rasterizing layers not yet supported in this browser, so SVG size may be large" }))] }), (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, { variant: "contained", color: "primary", type: "submit", onClick: async () => {
+                            setLoading(true);
+                            setError(undefined);
+                            try {
+                                await model.exportSvg({
+                                    rasterizeLayers,
+                                    filename,
+                                    trackLabels,
+                                    themeName,
+                                });
+                                handleClose();
+                            }
+                            catch (e) {
+                                console.error(e);
+                                setError(e);
+                            }
+                            finally {
+                                setLoading(false);
+                            }
+                        }, children: "Submit" })] })] }));
 }

package/dist/BreakpointSplitView/components/Overlay.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
 import type { BreakpointViewModel } from '../model';
 declare const Overlay: (props: {
-    parentRef: React.RefObject<SVGSVGElement>;
+    parentRef: React.RefObject<SVGSVGElement | null>;
     model: BreakpointViewModel;
     trackId: string;
     getTrackYPosOverride?: (trackId: string, level: number) => number;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default Overlay;

package/dist/BreakpointSplitView/components/Overlay.js

@@ -3,21 +3,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const AlignmentConnections_1 = __importDefault(require("./AlignmentConnections"));
 const Breakends_1 = __importDefault(require("./Breakends"));
 const PairedFeatures_1 = __importDefault(require("./PairedFeatures"));
 const Translocations_1 = __importDefault(require("./Translocations"));
 const Overlay = (0, mobx_react_1.observer)(function (props) {
-    var _a, _b;
+    var _a;
     const { model, trackId } = props;
     const tracks = model.getMatchedTracks(trackId);
-    if (((_a = tracks[0]) === null || _a === void 0 ? void 0 : _a.type) === 'AlignmentsTrack') {
-        return react_1.default.createElement(AlignmentConnections_1.default, { ...props });
+    const type = (_a = tracks[0]) === null || _a === void 0 ? void 0 : _a.type;
+    if (type === 'AlignmentsTrack') {
+        return (0, jsx_runtime_1.jsx)(AlignmentConnections_1.default, { ...props });
     }
-    else if (((_b = tracks[0]) === null || _b === void 0 ? void 0 : _b.type) === 'VariantTrack') {
-        return model.hasTranslocations(trackId) ? (react_1.default.createElement(Translocations_1.default, { ...props })) : model.hasPairedFeatures(trackId) ? (react_1.default.createElement(PairedFeatures_1.default, { ...props })) : (react_1.default.createElement(Breakends_1.default, { ...props }));
+    else if (type === 'VariantTrack') {
+        return model.hasTranslocations(trackId) ? ((0, jsx_runtime_1.jsx)(Translocations_1.default, { ...props })) : model.hasPairedFeatures(trackId) ? ((0, jsx_runtime_1.jsx)(PairedFeatures_1.default, { ...props })) : ((0, jsx_runtime_1.jsx)(Breakends_1.default, { ...props }));
     }
     else {
         return null;

package/dist/BreakpointSplitView/components/PairedFeatures.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
 import type { BreakpointViewModel } from '../model';
 declare const PairedFeatures: ({ model, trackId, parentRef: ref, getTrackYPosOverride, }: {
     model: BreakpointViewModel;
     trackId: string;
-    parentRef: React.RefObject<SVGSVGElement>;
+    parentRef: React.RefObject<SVGSVGElement | null>;
     getTrackYPosOverride?: (trackId: string, level: number) => number;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default PairedFeatures;

package/dist/BreakpointSplitView/components/PairedFeatures.js

@@ -1,29 +1,7 @@
 "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 });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
 const mobx_state_tree_1 = require("mobx-state-tree");
@@ -31,7 +9,7 @@ const util_2 = require("./util");
 const util_3 = require("../util");
 const [LEFT] = [0, 1, 2, 3];
 const PairedFeatures = (0, mobx_react_1.observer)(function ({ model, trackId, parentRef: ref, getTrackYPosOverride, }) {
-    const { views } = model;
+    const { interactiveOverlay, views } = model;
     const session = (0, util_1.getSession)(model);
     const { assemblyManager } = session;
     const totalFeatures = model.getTrackFeatures(trackId);
@@ -48,50 +26,50 @@ const PairedFeatures = (0, mobx_react_1.observer)(function ({ model, trackId, pa
         const rect = ref.current.getBoundingClientRect();
         yoff = rect.top;
     }
-    return (react_1.default.createElement("g", { stroke: "green", strokeWidth: 5, fill: "none", "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId }, layoutMatches.map(chunk => {
-        const ret = [];
-        for (let i = 0; i < chunk.length - 1; i += 1) {
-            const { layout: c1, feature: f1, level: level1 } = chunk[i];
-            const { layout: c2, feature: f2, level: level2 } = chunk[i + 1];
-            const id = f1.id();
-            if (!c1 || !c2) {
-                return null;
-            }
-            const f1origref = f1.get('refName');
-            const f2origref = f2.get('refName');
-            const f1ref = assembly.getCanonicalRefName(f1origref);
-            const f2ref = assembly.getCanonicalRefName(f2origref);
-            if (!f1ref || !f2ref) {
-                throw new Error(`unable to find ref for ${f1ref || f2ref}`);
+    return ((0, jsx_runtime_1.jsx)("g", { stroke: "green", strokeWidth: 5, fill: "none", "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId, children: layoutMatches.map(chunk => {
+            const ret = [];
+            for (let i = 0; i < chunk.length - 1; i += 1) {
+                const { layout: c1, feature: f1, level: level1 } = chunk[i];
+                const { layout: c2, feature: f2, level: level2 } = chunk[i + 1];
+                const id = f1.id();
+                if (!c1 || !c2) {
+                    return null;
+                }
+                const f1origref = f1.get('refName');
+                const f2origref = f2.get('refName');
+                const f1ref = assembly.getCanonicalRefName(f1origref);
+                const f2ref = assembly.getCanonicalRefName(f2origref);
+                if (!f1ref || !f2ref) {
+                    throw new Error(`unable to find ref for ${f1ref || f2ref}`);
+                }
+                const x1 = (0, util_3.getPxFromCoordinate)(views[level1], f1ref, c1[LEFT]);
+                const x2 = (0, util_3.getPxFromCoordinate)(views[level2], f2ref, c2[LEFT]);
+                const tracks = views.map(v => v.getTrack(trackId));
+                const y1 = (0, util_3.yPos)(trackId, level1, views, tracks, c1, getTrackYPosOverride) -
+                    yoff;
+                const y2 = (0, util_3.yPos)(trackId, level2, views, tracks, c2, getTrackYPosOverride) -
+                    yoff;
+                const path = [
+                    'M',
+                    x1,
+                    y1,
+                    'L',
+                    x2,
+                    y2,
+                ].join(' ');
+                ret.push((0, jsx_runtime_1.jsx)("path", { d: path, "data-testid": "r2", pointerEvents: interactiveOverlay ? 'auto' : undefined, strokeWidth: id === mouseoverElt ? 10 : 5, onClick: () => {
+                        var _a, _b, _c;
+                        const featureWidget = (_a = session.addWidget) === null || _a === void 0 ? void 0 : _a.call(session, 'VariantFeatureWidget', 'variantFeature', {
+                            featureData: (_b = totalFeatures.get(id)) === null || _b === void 0 ? void 0 : _b.toJSON(),
+                        });
+                        (_c = session.showWidget) === null || _c === void 0 ? void 0 : _c.call(session, featureWidget);
+                    }, onMouseOver: () => {
+                        setMouseoverElt(id);
+                    }, onMouseOut: () => {
+                        setMouseoverElt(undefined);
+                    } }, JSON.stringify(path)));
             }
-            const x1 = (0, util_3.getPxFromCoordinate)(views[level1], f1ref, c1[LEFT]);
-            const x2 = (0, util_3.getPxFromCoordinate)(views[level2], f2ref, c2[LEFT]);
-            const tracks = views.map(v => v.getTrack(trackId));
-            const y1 = (0, util_3.yPos)(trackId, level1, views, tracks, c1, getTrackYPosOverride) -
-                yoff;
-            const y2 = (0, util_3.yPos)(trackId, level2, views, tracks, c2, getTrackYPosOverride) -
-                yoff;
-            const path = [
-                'M',
-                x1,
-                y1,
-                'L',
-                x2,
-                y2,
-            ].join(' ');
-            ret.push(react_1.default.createElement("path", { d: path, "data-testid": "r2", key: JSON.stringify(path), strokeWidth: id === mouseoverElt ? 10 : 5, onClick: () => {
-                    var _a, _b, _c;
-                    const featureWidget = (_a = session.addWidget) === null || _a === void 0 ? void 0 : _a.call(session, 'VariantFeatureWidget', 'variantFeature', {
-                        featureData: (_b = totalFeatures.get(id)) === null || _b === void 0 ? void 0 : _b.toJSON(),
-                    });
-                    (_c = session.showWidget) === null || _c === void 0 ? void 0 : _c.call(session, featureWidget);
-                }, onMouseOver: () => {
-                    setMouseoverElt(id);
-                }, onMouseOut: () => {
-                    setMouseoverElt(undefined);
-                } }));
-        }
-        return ret;
-    })));
+            return ret;
+        }) }));
 });
 exports.default = PairedFeatures;

package/dist/BreakpointSplitView/components/Translocations.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
 import type { BreakpointViewModel } from '../model';
 declare const Translocations: ({ model, trackId, parentRef: ref, getTrackYPosOverride, }: {
     model: BreakpointViewModel;
     trackId: string;
-    parentRef: React.RefObject<SVGSVGElement>;
+    parentRef: React.RefObject<SVGSVGElement | null>;
     getTrackYPosOverride?: (trackId: string, level: number) => number;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default Translocations;

package/dist/BreakpointSplitView/components/Translocations.js

@@ -1,29 +1,7 @@
 "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 });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
 const mobx_state_tree_1 = require("mobx-state-tree");
@@ -42,7 +20,7 @@ function str(s) {
     }
 }
 const Translocations = (0, mobx_react_1.observer)(function ({ model, trackId, parentRef: ref, getTrackYPosOverride, }) {
-    const { views } = model;
+    const { interactiveOverlay, views } = model;
     const session = (0, util_1.getSession)(model);
     const { assemblyManager } = session;
     const totalFeatures = model.getTrackFeatures(trackId);
@@ -62,60 +40,60 @@ const Translocations = (0, mobx_react_1.observer)(function ({ model, trackId, pa
     if (views.length < 2) {
         return null;
     }
-    return (react_1.default.createElement("g", { fill: "none", stroke: "green", strokeWidth: 5, "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId }, layoutMatches.map(chunk => {
-        var _a, _b;
-        const ret = [];
-        for (const { layout: c1, feature: f1, level: level1 } of chunk) {
-            const level2 = level1 === 0 ? 1 : 0;
-            const id = f1.id();
-            if (!c1) {
-                return null;
-            }
-            const info = f1.get('INFO');
-            const chr2 = info.CHR2[0];
-            const end2 = info.END[0];
-            const res = (_b = (_a = info.STRANDS) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.split('');
-            const [myDirection, mateDirection] = res !== null && res !== void 0 ? res : ['.', '.'];
-            const r = (0, util_3.getPxFromCoordinate)(views[level2], chr2, end2);
-            if (r) {
-                const c2 = [r, 0, r + 1, 0];
-                const x1 = (0, util_3.getPxFromCoordinate)(views[level1], f1.get('refName'), c1[LEFT]);
-                const x2 = r;
-                const reversed1 = views[level1].pxToBp(x1).reversed;
-                const reversed2 = views[level2].pxToBp(x2).reversed;
-                const tracks = views.map(v => v.getTrack(trackId));
-                const y1 = (0, util_3.yPos)(trackId, level1, views, tracks, c1, getTrackYPosOverride) -
-                    yOffset;
-                const y2 = (0, util_3.yPos)(trackId, level2, views, tracks, c2, getTrackYPosOverride) -
-                    yOffset;
-                const path = [
-                    'M',
-                    x1 - 20 * str(myDirection) * (reversed1 ? -1 : 1),
-                    y1,
-                    'L',
-                    x1,
-                    y1,
-                    'L',
-                    x2,
-                    y2,
-                    'L',
-                    x2 - 20 * str(mateDirection) * (reversed2 ? -1 : 1),
-                    y2,
-                ].join(' ');
-                ret.push(react_1.default.createElement("path", { d: path, key: JSON.stringify(path), strokeWidth: id === mouseoverElt ? 10 : 5, onClick: () => {
-                        var _a, _b;
-                        const featureWidget = (_a = session.addWidget) === null || _a === void 0 ? void 0 : _a.call(session, 'VariantFeatureWidget', 'variantFeature', {
-                            featureData: (totalFeatures.get(id) || { toJSON: () => { } }).toJSON(),
-                        });
-                        (_b = session.showWidget) === null || _b === void 0 ? void 0 : _b.call(session, featureWidget);
-                    }, onMouseOver: () => {
-                        setMouseoverElt(id);
-                    }, onMouseOut: () => {
-                        setMouseoverElt(undefined);
-                    } }));
+    return ((0, jsx_runtime_1.jsx)("g", { fill: "none", stroke: "green", strokeWidth: 5, "data-testid": layoutMatches.length ? `${trackId}-loaded` : trackId, children: layoutMatches.map(chunk => {
+            var _a, _b;
+            const ret = [];
+            for (const { layout: c1, feature: f1, level: level1 } of chunk) {
+                const level2 = level1 === 0 ? 1 : 0;
+                const id = f1.id();
+                if (!c1) {
+                    return null;
+                }
+                const info = f1.get('INFO');
+                const chr2 = info.CHR2[0];
+                const end2 = info.END[0];
+                const res = (_b = (_a = info.STRANDS) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.split('');
+                const [myDirection, mateDirection] = res !== null && res !== void 0 ? res : ['.', '.'];
+                const r = (0, util_3.getPxFromCoordinate)(views[level2], chr2, end2);
+                if (r) {
+                    const c2 = [r, 0, r + 1, 0];
+                    const x1 = (0, util_3.getPxFromCoordinate)(views[level1], f1.get('refName'), c1[LEFT]);
+                    const x2 = r;
+                    const reversed1 = views[level1].pxToBp(x1).reversed;
+                    const reversed2 = views[level2].pxToBp(x2).reversed;
+                    const tracks = views.map(v => v.getTrack(trackId));
+                    const y1 = (0, util_3.yPos)(trackId, level1, views, tracks, c1, getTrackYPosOverride) -
+                        yOffset;
+                    const y2 = (0, util_3.yPos)(trackId, level2, views, tracks, c2, getTrackYPosOverride) -
+                        yOffset;
+                    const path = [
+                        'M',
+                        x1 - 20 * str(myDirection) * (reversed1 ? -1 : 1),
+                        y1,
+                        'L',
+                        x1,
+                        y1,
+                        'L',
+                        x2,
+                        y2,
+                        'L',
+                        x2 - 20 * str(mateDirection) * (reversed2 ? -1 : 1),
+                        y2,
+                    ].join(' ');
+                    ret.push((0, jsx_runtime_1.jsx)("path", { d: path, pointerEvents: interactiveOverlay ? 'auto' : undefined, strokeWidth: id === mouseoverElt ? 10 : 5, onClick: () => {
+                            var _a, _b;
+                            const featureWidget = (_a = session.addWidget) === null || _a === void 0 ? void 0 : _a.call(session, 'VariantFeatureWidget', 'variantFeature', {
+                                featureData: (totalFeatures.get(id) || { toJSON: () => { } }).toJSON(),
+                            });
+                            (_b = session.showWidget) === null || _b === void 0 ? void 0 : _b.call(session, featureWidget);
+                        }, onMouseOver: () => {
+                            setMouseoverElt(id);
+                        }, onMouseOut: () => {
+                            setMouseoverElt(undefined);
+                        } }, JSON.stringify(path)));
+                }
             }
-        }
-        return ret;
-    })));
+            return ret;
+        }) }));
 });
 exports.default = Translocations;

package/dist/BreakpointSplitView/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 };
 };