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

package/esm/LinearComparativeView/model.js

@@ -4,7 +4,7 @@ import { avg, getSession, isSessionModelWithWidgets } from '@jbrowse/core/util';
 import { ElementId } from '@jbrowse/core/util/types/mst';
 import FolderOpenIcon from '@mui/icons-material/FolderOpen';
 import { autorun } from 'mobx';
-import { addDisposer, cast, getPath, types } from 'mobx-state-tree';
+import { addDisposer, cast, getPath, onAction, types } from 'mobx-state-tree';
 const ReturnToImportFormDialog = lazy(() => import('@jbrowse/core/ui/ReturnToImportFormDialog'));
 function stateModelFactory(pluginManager) {
     var _a;
@@ -15,7 +15,8 @@ function stateModelFactory(pluginManager) {
         type: types.literal('LinearComparativeView'),
         trackSelectorType: 'hierarchical',
         showIntraviewLinks: true,
-        interactToggled: false,
+        linkViews: false,
+        interactiveOverlay: false,
         levels: types.array(LinearSyntenyViewHelper),
         views: types.array(pluginManager.getViewType('LinearGenomeView')
             .stateModel),
@@ -40,6 +41,21 @@ function stateModelFactory(pluginManager) {
         },
     }))
         .actions(self => ({
+        afterAttach() {
+            const actions = new Set([
+                'horizontalScroll',
+                'zoomTo',
+                'setScaleFactor',
+            ]);
+            addDisposer(self, onAction(self, param => {
+                if (self.linkViews) {
+                    const { name, path, args } = param;
+                    if (actions.has(name) && path) {
+                        this.onSubviewAction(name, path, args);
+                    }
+                }
+            }));
+        },
         beforeDestroy() {
             var _a;
             const session = getSession(self);
@@ -69,6 +85,9 @@ function stateModelFactory(pluginManager) {
             l.setHeight(newHeight);
             return l.height;
         },
+        setLinkViews(arg) {
+            self.linkViews = arg;
+        },
         activateTrackSelector(level) {
             if (self.trackSelectorType === 'hierarchical') {
                 const session = getSession(self);

package/esm/LinearReadVsRef/LinearReadVsRef.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { Feature } from '@jbrowse/core/util';
 export default function ReadVsRefDialog({ track, feature: preFeature, handleClose, }: {
     feature: Feature;
     handleClose: () => void;
     track: any;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/LinearReadVsRef/LinearReadVsRef.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
 import { Dialog } from '@jbrowse/core/ui';
 import { gatherOverlaps, getContainingView, getSession, } from '@jbrowse/core/util';
@@ -231,16 +232,7 @@ export default function ReadVsRefDialog({ track, feature: preFeature, handleClos
             setError(e);
         }
     }
-    return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Set window size" },
-        React.createElement(DialogContent, null, error ? (React.createElement(Typography, { color: "error" }, `${error}`)) : !primaryFeature ? (React.createElement("div", null,
-            React.createElement(Typography, null, "To accurately perform comparison we are fetching the primary alignment. Loading primary feature..."),
-            React.createElement(CircularProgress, null))) : (React.createElement("div", { className: classes.root },
-            primaryFeature.get('flags') & 256 ? (React.createElement(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.createElement(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.createElement(TextField, { value: windowSize, onChange: event => {
-                    setWindowSize(event.target.value);
-                }, label: "Set window size" })))),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { variant: "contained", color: "secondary", onClick: handleClose }, "Cancel"),
-            React.createElement(Button, { disabled: !primaryFeature, variant: "contained", color: "primary", onClick: onSubmit }, "Submit"))));
+    return (_jsxs(Dialog, { open: true, onClose: handleClose, title: "Set window size", children: [_jsx(DialogContent, { children: error ? (_jsx(Typography, { color: "error", children: `${error}` })) : !primaryFeature ? (_jsxs("div", { children: [_jsx(Typography, { children: "To accurately perform comparison we are fetching the primary alignment. Loading primary feature..." }), _jsx(CircularProgress, {})] })) : (_jsxs("div", { className: classes.root, children: [primaryFeature.get('flags') & 256 ? (_jsx(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, _jsx(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." }), _jsx(TextField, { value: windowSize, onChange: event => {
+                                setWindowSize(event.target.value);
+                            }, label: "Set window size" })] })) }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: handleClose, children: "Cancel" }), _jsx(Button, { disabled: !primaryFeature, variant: "contained", color: "primary", onClick: onSubmit, children: "Submit" })] })] }));
 }

package/esm/LinearSyntenyDisplay/afterAttach.js

@@ -8,7 +8,8 @@ export function doAfterAttach(self) {
     addDisposer(self, autorun(() => {
         var _a, _b;
         const view = 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');
@@ -24,7 +25,8 @@ export function doAfterAttach(self) {
     }));
     addDisposer(self, autorun(() => {
         const view = getContainingView(self);
-        if (!view.initialized) {
+        if (!view.initialized ||
+            !view.views.every(a => a.displayedRegions.length > 0 && a.initialized)) {
             return;
         }
         drawMouseoverSynteny(self);
@@ -35,7 +37,8 @@ export function doAfterAttach(self) {
             bpPerPx: view.views.map(v => v.bpPerPx),
             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/esm/LinearSyntenyDisplay/components/Component.d.ts

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

package/esm/LinearSyntenyDisplay/components/Component.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { LoadingEllipses } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
@@ -34,27 +35,26 @@ function LoadingMessage() {
             clearTimeout(timeout);
         };
     });
-    return shown ? (React.createElement("div", { className: classes.loading },
-        React.createElement(LoadingEllipses, null))) : null;
+    return shown ? (_jsx("div", { className: classes.loading, children: _jsx(LoadingEllipses, {}) })) : null;
 }
 function BlockMessage({ messageText }) {
     const { classes } = useStyles();
-    return React.createElement("div", { className: classes.blockMessage }, messageText);
+    return _jsx("div", { className: classes.blockMessage, children: messageText });
 }
 function BlockError({ error }) {
     const { classes } = useStyles();
-    return React.createElement("div", { className: classes.blockError }, `${error}`);
+    return _jsx("div", { className: classes.blockError, children: `${error}` });
 }
 const ServerSideRenderedBlockContent = observer(function ({ model, }) {
     if (model.error) {
-        return React.createElement(BlockError, { error: model.error });
+        return _jsx(BlockError, { error: model.error });
     }
     if (model.message) {
-        return React.createElement(BlockMessage, { messageText: model.message });
+        return _jsx(BlockMessage, { messageText: model.message });
     }
     if (!model.features) {
-        return React.createElement(LoadingMessage, null);
+        return _jsx(LoadingMessage, {});
     }
-    return React.createElement(LinearSyntenyRendering, { model: model });
+    return _jsx(LinearSyntenyRendering, { model: model });
 });
 export default ServerSideRenderedBlockContent;

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

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

package/esm/LinearSyntenyDisplay/components/LinearSyntenyRendering.js

@@ -1,4 +1,5 @@
-import React, { lazy, useCallback, useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy, useCallback, useEffect, useRef, useState } from 'react';
 import { getContainingView } from '@jbrowse/core/util';
 import { transaction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -33,14 +34,14 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
     const width = view.width;
     const delta = useRef(0);
     const scheduled = useRef(false);
-    const timeout = useRef();
+    const timeout = useRef(null);
     const [anchorEl, setAnchorEl] = useState();
     const [tooltip, setTooltip] = useState('');
     const [currX, setCurrX] = useState();
     const [mouseCurrDownX, setMouseCurrDownX] = useState();
     const [mouseInitialDownX, setMouseInitialDownX] = useState();
     const [currY, setCurrY] = useState();
-    const mainSyntenyCanvasRefp = useRef();
+    const mainSyntenyCanvasRefp = useRef(null);
     const mouseoverDetectionCanvasRef = useCallback((ref) => {
         model.setMouseoverCanvasRef(ref);
     }, [model, height, width]);
@@ -103,83 +104,77 @@ const LinearSyntenyRendering = observer(function ({ model, }) {
     const cigarClickMapCanvasRef = useCallback((ref) => {
         model.setCigarClickMapCanvasRef(ref);
     }, [model, height, width]);
-    return (React.createElement("div", { className: classes.rel },
-        React.createElement("canvas", { ref: mouseoverDetectionCanvasRef, width: width, height: height, className: classes.mouseoverCanvas }),
-        React.createElement("canvas", { ref: mainSyntenyCanvasRef, onMouseMove: event => {
-                var _a;
-                if (mouseCurrDownX !== undefined) {
-                    xOffset.current += mouseCurrDownX - event.clientX;
-                    setMouseCurrDownX(event.clientX);
-                    if (!scheduled.current) {
-                        scheduled.current = true;
-                        window.requestAnimationFrame(() => {
-                            transaction(() => {
-                                for (const v of view.views) {
-                                    v.horizontalScroll(xOffset.current);
-                                }
-                                xOffset.current = 0;
-                                scheduled.current = false;
+    return (_jsxs("div", { className: classes.rel, children: [_jsx("canvas", { ref: mouseoverDetectionCanvasRef, width: width, height: height, className: classes.mouseoverCanvas }), _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(() => {
+                                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(MAX_COLOR_RANGE / model.numFeats);
+                        const id = 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(MAX_COLOR_RANGE / cigar.length);
+                            const cigarIdx = getId(r2, g2, b2, unitMultiplier2);
+                            setTooltip(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(MAX_COLOR_RANGE / model.numFeats);
-                    const id = 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) {
+                        onSynClick(evt, model);
                     }
-                    else if (model.featPositions[id]) {
-                        const { f, cigar } = model.featPositions[id];
-                        const unitMultiplier2 = Math.floor(MAX_COLOR_RANGE / cigar.length);
-                        const cigarIdx = getId(r2, g2, b2, unitMultiplier2);
-                        setTooltip(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) {
-                    onSynClick(evt, model);
-                }
-            }, onContextMenu: evt => {
-                onSynContextClick(evt, model, setAnchorEl);
-            }, "data-testid": "synteny_canvas", className: classes.mainCanvas, width: width, height: height }),
-        React.createElement("canvas", { ref: clickMapCanvasRef, className: classes.pix, width: width, height: height }),
-        React.createElement("canvas", { ref: cigarClickMapCanvasRef, className: classes.pix, width: width, height: height }),
-        mouseoverId && tooltip && currX && currY ? (React.createElement(SyntenyTooltip, { title: tooltip })) : null,
-        anchorEl ? (React.createElement(SyntenyContextMenu, { model: model, anchorEl: anchorEl, onClose: () => {
-                setAnchorEl(undefined);
-            } })) : null));
+                }, onContextMenu: evt => {
+                    onSynContextClick(evt, model, setAnchorEl);
+                }, "data-testid": "synteny_canvas", className: classes.mainCanvas, width: width, height: height }), _jsx("canvas", { ref: clickMapCanvasRef, className: classes.pix, width: width, height: height }), _jsx("canvas", { ref: cigarClickMapCanvasRef, className: classes.pix, width: width, height: height }), mouseoverId && tooltip && currX && currY ? (_jsx(SyntenyTooltip, { title: tooltip })) : null, anchorEl ? (_jsx(SyntenyContextMenu, { model: model, anchorEl: anchorEl, onClose: () => {
+                    setAnchorEl(undefined);
+                } })) : null] }));
 });
 export default LinearSyntenyRendering;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { LinearSyntenyDisplayModel } from '../model';
 import type { Feature } from '@jbrowse/core/util';
 interface ClickCoord {
@@ -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/esm/LinearSyntenyDisplay/components/SyntenyContextMenu.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Menu } from '@jbrowse/core/ui';
 import { getContainingView, getSession } from '@jbrowse/core/util';
 export default function SyntenyContextMenu({ model, onClose, anchorEl, }) {
     const view = getContainingView(model);
     const { clientX, clientY, feature } = anchorEl;
-    return (React.createElement(Menu, { onMenuItemClick: (event, callback) => {
+    return (_jsx(Menu, { onMenuItemClick: (event, callback) => {
             callback(event);
             onClose();
         }, anchorEl: {

package/esm/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;

package/esm/LinearSyntenyDisplay/components/SyntenyTooltip.js

@@ -1,9 +1,8 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { SanitizedHTML } from '@jbrowse/core/ui';
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
 import { observer } from 'mobx-react';
 const SyntenyTooltip = observer(function ({ title }) {
-    return title ? (React.createElement(BaseTooltip, null,
-        React.createElement(SanitizedHTML, { html: title }))) : null;
+    return title ? (_jsx(BaseTooltip, { children: _jsx(SanitizedHTML, { html: title }) })) : null;
 });
 export default SyntenyTooltip;

package/esm/LinearSyntenyView/components/ExportSvgDialog.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import type { ExportSvgOptions } from '../model';
 export default function ExportSvgDialog({ model, handleClose, }: {
     model: {
         exportSvg(opts: ExportSvgOptions): Promise<void>;
     };
     handleClose: () => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/LinearSyntenyView/components/ExportSvgDialog.js

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

package/esm/LinearSyntenyView/components/Icons.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { SvgIconProps } from '@mui/material';
-export declare function Curves(props: SvgIconProps): React.JSX.Element;
-export declare function StraightLines(props: SvgIconProps): React.JSX.Element;
+export declare function Curves(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function StraightLines(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;

package/esm/LinearSyntenyView/components/Icons.js

@@ -1,10 +1,8 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { SvgIcon } from '@mui/material';
 export function Curves(props) {
-    return (React.createElement(SvgIcon, { ...props },
-        React.createElement("path", { fill: "currentColor", d: "M16.5,21C13.5,21 12.31,16.76 11.05,12.28C10.14,9.04 9,5 7.5,5C4.11,5 4,11.93 4,12H2C2,11.63 2.06,3 7.5,3C10.5,3 11.71,7.25 12.97,11.74C13.83,14.8 15,19 16.5,19C19.94,19 20.03,12.07 20.03,12H22.03C22.03,12.37 21.97,21 16.5,21Z" })));
+    return (_jsx(SvgIcon, { ...props, children: _jsx("path", { fill: "currentColor", d: "M16.5,21C13.5,21 12.31,16.76 11.05,12.28C10.14,9.04 9,5 7.5,5C4.11,5 4,11.93 4,12H2C2,11.63 2.06,3 7.5,3C10.5,3 11.71,7.25 12.97,11.74C13.83,14.8 15,19 16.5,19C19.94,19 20.03,12.07 20.03,12H22.03C22.03,12.37 21.97,21 16.5,21Z" }) }));
 }
 export function StraightLines(props) {
-    return (React.createElement(SvgIcon, { ...props },
-        React.createElement("path", { fill: "currentColor", d: "M22 12L17 22L7.1 6.04L4.24 12H2L7 2L16.9 17.96L19.76 12H22Z" })));
+    return (_jsx(SvgIcon, { ...props, children: _jsx("path", { fill: "currentColor", d: "M22 12L17 22L7.1 6.04L4.24 12H2L7 2L16.9 17.96L19.76 12H22Z" }) }));
 }

package/esm/LinearSyntenyView/components/ImportForm/ImportSyntenyOpenCustomTrack.d.ts

@@ -0,0 +1,8 @@
+import type { LinearSyntenyViewModel } from '../../model';
+declare const ImportSyntenyOpenCustomTrack: ({ model, assembly1, assembly2, selectedRow, }: {
+    model: LinearSyntenyViewModel;
+    assembly1: string;
+    assembly2: string;
+    selectedRow: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ImportSyntenyOpenCustomTrack;