@jbrowse/plugin-linear-comparative-view 3.1.0 → 3.2.0

package/esm/LinearComparativeView/components/Rubberband.js

@@ -13,7 +13,7 @@ const useStyles = makeStyles()(theme => {
             height: '100%',
             background: alpha(theme.palette.tertiary.main, 0.7),
             position: 'absolute',
-            zIndex: 10,
+            zIndex: 900,
             textAlign: 'center',
             overflow: 'hidden',
         },
@@ -76,13 +76,13 @@ const LinearComparativeRubberband = observer(function Rubberband({ model, Contro
                     clientY,
                 });
                 transaction(() => {
-                    model.views.forEach(view => {
+                    for (const view of model.views) {
                         const args = computeOffsets(offsetX, view);
                         if (args) {
                             const { leftOffset, rightOffset } = args;
                             view.setOffsets(leftOffset, rightOffset);
                         }
-                    });
+                    }
                 });
                 setGuideX(undefined);
             }
@@ -120,9 +120,9 @@ const LinearComparativeRubberband = observer(function Rubberband({ model, Contro
     function mouseOut() {
         setGuideX(undefined);
         transaction(() => {
-            model.views.forEach(view => {
+            for (const view of model.views) {
                 view.setOffsets(undefined, undefined);
-            });
+            }
         });
     }
     function handleClose() {

package/esm/LinearComparativeView/components/VerticalGuide.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { stringify } from '@jbrowse/core/util';
-import { Tooltip, Typography } from '@mui/material';
+import { Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
@@ -9,19 +9,16 @@ const useStyles = makeStyles()({
         height: '100%',
         width: 1,
         position: 'absolute',
-        zIndex: 10,
-    },
-    sm: {
-        fontSize: 10,
+        background: 'red',
+        zIndex: 1001,
     },
 });
 const VerticalGuide = observer(function ({ model, coordX, }) {
     const { classes } = useStyles();
     return (_jsx(Tooltip, { open: true, placement: "top", title: model.views
             .map(view => view.pxToBp(coordX))
-            .map((elt, idx) => (_jsx(Typography, { className: classes.sm, children: stringify(elt, true) }, [JSON.stringify(elt), idx].join('-')))), arrow: true, children: _jsx("div", { className: classes.guide, style: {
+            .map((elt, idx) => (_jsx("div", { children: stringify(elt, true) }, [JSON.stringify(elt), idx].join('-')))), arrow: true, children: _jsx("div", { className: classes.guide, style: {
                 left: coordX,
-                background: 'red',
             } }) }));
 });
 export default VerticalGuide;

package/esm/LinearComparativeView/model.d.ts

@@ -49,6 +49,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType>>, [undefined]>;
         colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
         showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+        init: import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined>;
     }, {
         width: number;
     } & {
@@ -77,6 +78,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         readonly interRegionPaddingWidth: number;
         readonly assemblyNames: string[];
         readonly stickyViewHeaders: boolean;
+        readonly rubberbandTop: number;
         readonly pinnedTracksTop: number;
     } & {
         scaleBarDisplayPrefix(): string | undefined;
@@ -163,6 +165,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         setDraggingTrackId(idx?: string): void;
         setScaleFactor(factor: number): void;
         clearView(): void;
+        setInit(arg?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState): void;
         exportSvg(opts?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").ExportSvgOptions): Promise<void>;
     } & {
         slide: (viewWidths: number) => void;
@@ -183,7 +186,6 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         readonly coarseVisibleLocStrings: string;
     } & {
         setCoarseDynamicBlocks(blocks: import("@jbrowse/core/util/blockTypes").BlockSet): void;
-        afterAttach(): void;
     } & {
         moveTo(start?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").BpOffset, end?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").BpOffset): void;
         navToLocString(input: string, optAssemblyName?: string): Promise<void>;
@@ -229,6 +231,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         } | undefined;
     } & {
         afterCreate(): void;
+        afterAttach(): void;
     }, import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
         id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
         displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -251,7 +254,28 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType>>, [undefined]>;
         colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
         showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-    }>>, import("mobx-state-tree")._NotCustomized>>;
+        init: import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined>;
+    }>>, {
+        id: string;
+        type: string;
+        displayName: string | undefined;
+        tracks: any[];
+        minimized: boolean;
+        displayedRegions: import("@jbrowse/core/util").Region[];
+        offsetPx: number;
+        bpPerPx: number;
+        hideHeader: boolean;
+        hideHeaderOverview: boolean;
+        hideNoTracksActive: boolean;
+        trackSelectorType: string;
+        showCenterLine: boolean;
+        showCytobandsSetting: boolean;
+        trackLabels: string;
+        showGridlines: boolean;
+        highlight: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType[];
+        colorByCDS: boolean;
+        showTrackOutlines: boolean;
+    }>>;
     viewTrackConfigs: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
 }, {
     width: number;
@@ -339,6 +363,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType>>, [undefined]>;
         colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
         showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+        init: import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined>;
     }, {
         width: number;
     } & {
@@ -367,6 +392,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         readonly interRegionPaddingWidth: number;
         readonly assemblyNames: string[];
         readonly stickyViewHeaders: boolean;
+        readonly rubberbandTop: number;
         readonly pinnedTracksTop: number;
     } & {
         scaleBarDisplayPrefix(): string | undefined;
@@ -453,6 +479,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         setDraggingTrackId(idx?: string): void;
         setScaleFactor(factor: number): void;
         clearView(): void;
+        setInit(arg?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState): void;
         exportSvg(opts?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").ExportSvgOptions): Promise<void>;
     } & {
         slide: (viewWidths: number) => void;
@@ -473,7 +500,6 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         readonly coarseVisibleLocStrings: string;
     } & {
         setCoarseDynamicBlocks(blocks: import("@jbrowse/core/util/blockTypes").BlockSet): void;
-        afterAttach(): void;
     } & {
         moveTo(start?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").BpOffset, end?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").BpOffset): void;
         navToLocString(input: string, optAssemblyName?: string): Promise<void>;
@@ -519,6 +545,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         } | undefined;
     } & {
         afterCreate(): void;
+        afterAttach(): void;
     }, import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
         id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
         displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -541,7 +568,28 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
         highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType>>, [undefined]>;
         colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
         showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-    }>>, import("mobx-state-tree")._NotCustomized>>;
+        init: import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined>;
+    }>>, {
+        id: string;
+        type: string;
+        displayName: string | undefined;
+        tracks: any[];
+        minimized: boolean;
+        displayedRegions: import("@jbrowse/core/util").Region[];
+        offsetPx: number;
+        bpPerPx: number;
+        hideHeader: boolean;
+        hideHeaderOverview: boolean;
+        hideNoTracksActive: boolean;
+        trackSelectorType: string;
+        showCenterLine: boolean;
+        showCytobandsSetting: boolean;
+        trackLabels: string;
+        showGridlines: boolean;
+        highlight: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType[];
+        colorByCDS: boolean;
+        showTrackOutlines: boolean;
+    }>>;
     viewTrackConfigs: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
 }>>, import("mobx-state-tree")._NotCustomized>;
 export type LinearComparativeViewStateModel = ReturnType<typeof stateModelFactory>;

package/esm/LinearComparativeView/model.js

@@ -64,18 +64,23 @@ function stateModelFactory(pluginManager) {
             }
         },
         onSubviewAction(actionName, path, args) {
-            self.views.forEach(view => {
+            for (const view of self.views) {
                 const ret = getPath(view);
                 if (!ret.endsWith(path)) {
                     view[actionName](args === null || args === void 0 ? void 0 : args[0]);
                 }
-            });
+            }
         },
         setWidth(newWidth) {
             self.width = newWidth;
         },
         setViews(views) {
             self.views = cast(views);
+            const levels = [];
+            for (let i = 0; i < views.length - 1; i++) {
+                levels.push({ level: i });
+            }
+            self.levels = cast(levels);
         },
         removeView(view) {
             self.views.remove(view);

package/esm/LinearReadVsRef/LinearReadVsRef.js

@@ -98,12 +98,12 @@ export default function ReadVsRefDialog({ track, feature: preFeature, handleClos
             };
             const totalLength = flags & 2048 ? getLength(suppAlns[0].CIGAR) : getLength(cigar);
             const features = [feat, ...suppAlns];
-            features.forEach((f, idx) => {
+            for (const [idx, f] of features.entries()) {
                 f.refName = assembly.getCanonicalRefName(f.refName) || f.refName;
                 f.syntenyId = idx;
                 f.mate.syntenyId = idx;
                 f.mate.uniqueId = `${f.uniqueId}_mate`;
-            });
+            }
             features.sort((a, b) => a.clipPos - b.clipPos);
             const featSeq = feature.get('seq');
             const configFeatureStore = [...features, ...features.map(f => f.mate)];

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

@@ -0,0 +1,11 @@
+import type { LinearSyntenyViewModel } from '../../model';
+declare const LeftPanel: ({ model, selectedAssemblyNames, setSelectedAssemblyNames, selectedRow, setSelectedRow, defaultAssemblyName, onLaunch, }: {
+    model: LinearSyntenyViewModel;
+    selectedAssemblyNames: string[];
+    setSelectedAssemblyNames: (names: string[]) => void;
+    selectedRow: number;
+    setSelectedRow: (row: number) => void;
+    defaultAssemblyName: string;
+    onLaunch: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default LeftPanel;

package/esm/LinearSyntenyView/components/ImportForm/LeftPanel.js

@@ -0,0 +1,53 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { AssemblySelector } from '@jbrowse/core/ui';
+import { getSession, notEmpty } from '@jbrowse/core/util';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import CloseIcon from '@mui/icons-material/Close';
+import { Button, IconButton } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()(theme => ({
+    mb: {
+        marginBottom: 10,
+    },
+    button: {
+        margin: theme.spacing(2),
+    },
+    rel: {
+        position: 'relative',
+    },
+    synbutton: {
+        position: 'absolute',
+        top: 30,
+    },
+    bg: {
+        background: theme.palette.divider,
+    },
+}));
+const AssemblyRows = observer(function ({ selectedRow, selectedAssemblyNames, setSelectedRow, setSelectedAssemblyNames, model, }) {
+    const { classes, cx } = useStyles();
+    const session = getSession(model);
+    return selectedAssemblyNames.map((assemblyName, idx) => (_jsxs("div", { className: classes.rel, children: [_jsxs("span", { children: ["Row ", idx + 1, ": "] }), _jsx(IconButton, { disabled: selectedAssemblyNames.length <= 2, onClick: () => {
+                    model.importFormRemoveRow(idx);
+                    setSelectedAssemblyNames(selectedAssemblyNames
+                        .map((asm, idx2) => (idx2 === idx ? undefined : asm))
+                        .filter(notEmpty));
+                    if (selectedRow >= selectedAssemblyNames.length - 2) {
+                        setSelectedRow(0);
+                    }
+                }, children: _jsx(CloseIcon, {}) }), _jsx(AssemblySelector, { helperText: "", selected: assemblyName, onChange: newAssembly => {
+                    setSelectedAssemblyNames(selectedAssemblyNames.map((asm, idx2) => idx2 === idx ? newAssembly : asm));
+                }, session: session }), idx !== selectedAssemblyNames.length - 1 ? (_jsx(IconButton, { "data-testid": "synbutton", className: cx(classes.synbutton, idx === selectedRow ? classes.bg : undefined), onClick: () => {
+                    setSelectedRow(idx);
+                }, children: _jsx(ArrowForwardIosIcon, {}) })) : null] }, `${assemblyName}-${idx}`)));
+});
+const LeftPanel = observer(function ({ model, selectedAssemblyNames, setSelectedAssemblyNames, selectedRow, setSelectedRow, defaultAssemblyName, onLaunch, }) {
+    const { classes } = useStyles();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: classes.mb, children: "Select assemblies for linear synteny view" }), _jsx(AssemblyRows, { model: model, selectedAssemblyNames: selectedAssemblyNames, setSelectedAssemblyNames: setSelectedAssemblyNames, selectedRow: selectedRow, setSelectedRow: setSelectedRow }), _jsxs("div", { children: [_jsx(Button, { className: classes.button, variant: "contained", color: "secondary", onClick: () => {
+                            setSelectedAssemblyNames([
+                                ...selectedAssemblyNames,
+                                defaultAssemblyName,
+                            ]);
+                        }, children: "Add row" }), _jsx(Button, { className: classes.button, onClick: onLaunch, variant: "contained", color: "primary", children: "Launch" })] })] }));
+});
+export default LeftPanel;

package/esm/LinearSyntenyView/components/ImportForm/LinearSyntenyImportForm.js

@@ -1,38 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { AssemblySelector, ErrorMessage } from '@jbrowse/core/ui';
-import { getSession, notEmpty } from '@jbrowse/core/util';
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-import CloseIcon from '@mui/icons-material/Close';
-import { Button, Container, IconButton } from '@mui/material';
+import { ErrorMessage } from '@jbrowse/core/ui';
+import { getSession } from '@jbrowse/core/util';
+import { Container } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import ImportSyntenyTrackSelector from './ImportSyntenyTrackSelectorArea';
+import LeftPanel from './LeftPanel';
 import { doSubmit } from './doSubmit';
 const useStyles = makeStyles()(theme => ({
     importFormContainer: {
         padding: theme.spacing(4),
     },
-    button: {
-        margin: theme.spacing(2),
-    },
-    rel: {
-        position: 'relative',
-    },
-    synbutton: {
-        position: 'absolute',
-        top: 30,
-    },
     flex: {
         display: 'flex',
         gap: 90,
     },
-    mb: {
-        marginBottom: 10,
-    },
-    bg: {
-        background: theme.palette.divider,
-    },
     rightPanel: {
         flexGrow: 11,
     },
@@ -42,7 +25,7 @@ const useStyles = makeStyles()(theme => ({
     },
 }));
 const LinearSyntenyViewImportForm = observer(function ({ model, }) {
-    const { classes, cx } = useStyles();
+    const { classes } = useStyles();
     const session = getSession(model);
     const { assemblyNames } = session;
     const defaultAssemblyName = assemblyNames[0] || '';
@@ -52,38 +35,21 @@ const LinearSyntenyViewImportForm = observer(function ({ model, }) {
         defaultAssemblyName,
     ]);
     const [error, setError] = useState();
-    return (_jsxs(Container, { className: classes.importFormContainer, children: [error ? _jsx(ErrorMessage, { error: error }) : null, _jsxs("div", { className: classes.flex, children: [_jsxs("div", { className: classes.leftPanel, children: [_jsx("div", { className: classes.mb, children: "Select assemblies for linear synteny view" }), selectedAssemblyNames.map((assemblyName, idx) => (_jsxs("div", { className: classes.rel, children: [_jsxs("span", { children: ["Row ", idx + 1, ": "] }), _jsx(IconButton, { disabled: selectedAssemblyNames.length <= 2, onClick: () => {
-                                            model.importFormRemoveRow(idx);
-                                            setSelectedAssemblyNames(selectedAssemblyNames
-                                                .map((asm, idx2) => (idx2 === idx ? undefined : asm))
-                                                .filter(notEmpty));
-                                            if (selectedRow >= selectedAssemblyNames.length - 2) {
-                                                setSelectedRow(0);
-                                            }
-                                        }, children: _jsx(CloseIcon, {}) }), _jsx(AssemblySelector, { helperText: "", selected: assemblyName, onChange: newAssembly => {
-                                            setSelectedAssemblyNames(selectedAssemblyNames.map((asm, idx2) => idx2 === idx ? newAssembly : asm));
-                                        }, session: session }), idx !== selectedAssemblyNames.length - 1 ? (_jsx(IconButton, { "data-testid": "synbutton", className: cx(classes.synbutton, idx === selectedRow ? classes.bg : undefined), onClick: () => {
-                                            setSelectedRow(idx);
-                                        }, children: _jsx(ArrowForwardIosIcon, {}) })) : null] }, `${assemblyName}-${idx}`))), _jsxs("div", { children: [_jsx(Button, { className: classes.button, variant: "contained", color: "secondary", onClick: () => {
-                                            setSelectedAssemblyNames([
-                                                ...selectedAssemblyNames,
-                                                defaultAssemblyName,
-                                            ]);
-                                        }, children: "Add row" }), _jsx(Button, { className: classes.button, onClick: () => {
-                                            ;
-                                            (async () => {
-                                                try {
-                                                    setError(undefined);
-                                                    await doSubmit({
-                                                        selectedAssemblyNames,
-                                                        model,
-                                                    });
-                                                }
-                                                catch (e) {
-                                                    console.error(e);
-                                                    setError(e);
-                                                }
-                                            })();
-                                        }, variant: "contained", color: "primary", children: "Launch" })] })] }), _jsxs("div", { className: classes.rightPanel, children: [_jsxs("div", { children: ["Synteny dataset to display between row ", selectedRow + 1, " and", ' ', selectedRow + 2] }), _jsx(ImportSyntenyTrackSelector, { model: model, selectedRow: selectedRow, assembly1: selectedAssemblyNames[selectedRow], assembly2: selectedAssemblyNames[selectedRow + 1] })] })] })] }));
+    const handleLaunch = async () => {
+        try {
+            setError(undefined);
+            await doSubmit({
+                selectedAssemblyNames,
+                model,
+            });
+        }
+        catch (e) {
+            console.error(e);
+            setError(e);
+        }
+    };
+    return (_jsxs(Container, { className: classes.importFormContainer, children: [error ? _jsx(ErrorMessage, { error: error }) : null, _jsxs("div", { className: classes.flex, children: [_jsx("div", { className: classes.leftPanel, children: _jsx(LeftPanel, { model: model, selectedAssemblyNames: selectedAssemblyNames, setSelectedAssemblyNames: setSelectedAssemblyNames, selectedRow: selectedRow, setSelectedRow: setSelectedRow, defaultAssemblyName: defaultAssemblyName, onLaunch: () => {
+                                handleLaunch();
+                            } }) }), _jsxs("div", { className: classes.rightPanel, children: [_jsxs("div", { children: ["Synteny dataset to display between row ", selectedRow + 1, " and", ' ', selectedRow + 2] }), _jsx(ImportSyntenyTrackSelector, { model: model, selectedRow: selectedRow, assembly1: selectedAssemblyNames[selectedRow], assembly2: selectedAssemblyNames[selectedRow + 1] })] })] })] }));
 });
 export default LinearSyntenyViewImportForm;

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

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

package/esm/LinearSyntenyView/components/LinearSyntenyView.js

@@ -3,7 +3,7 @@ import { lazy } from 'react';
 import { observer } from 'mobx-react';
 import LinearComparativeViewComponent from '../../LinearComparativeView/components/LinearComparativeView';
 const LinearSyntenyImportForm = lazy(() => import('./ImportForm/LinearSyntenyImportForm'));
-const LinearSyntenyView = observer(function ({ model }) {
+const LinearSyntenyView = observer(function ({ model, }) {
     return !model.initialized ? (_jsx(LinearSyntenyImportForm, { model: model })) : (_jsx(LinearComparativeViewComponent, { model: model }));
 });
 export default LinearSyntenyView;

package/esm/LinearSyntenyView/model.d.ts

@@ -66,6 +66,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType>>, [undefined]>;
         colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
         showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+        init: import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined>;
     }, {
         width: number;
     } & {
@@ -94,6 +95,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         readonly interRegionPaddingWidth: number;
         readonly assemblyNames: string[];
         readonly stickyViewHeaders: boolean;
+        readonly rubberbandTop: number;
         readonly pinnedTracksTop: number;
     } & {
         scaleBarDisplayPrefix(): string | undefined;
@@ -180,6 +182,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         setDraggingTrackId(idx?: string): void;
         setScaleFactor(factor: number): void;
         clearView(): void;
+        setInit(arg?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState): void;
         exportSvg(opts?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").ExportSvgOptions): Promise<void>;
     } & {
         slide: (viewWidths: number) => void;
@@ -200,7 +203,6 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         readonly coarseVisibleLocStrings: string;
     } & {
         setCoarseDynamicBlocks(blocks: import("@jbrowse/core/util/blockTypes").BlockSet): void;
-        afterAttach(): void;
     } & {
         moveTo(start?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").BpOffset, end?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").BpOffset): void;
         navToLocString(input: string, optAssemblyName?: string): Promise<void>;
@@ -246,6 +248,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         } | undefined;
     } & {
         afterCreate(): void;
+        afterAttach(): void;
     }, import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
         id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
         displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -268,7 +271,28 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType>>, [undefined]>;
         colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
         showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-    }>>, import("mobx-state-tree")._NotCustomized>>;
+        init: import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined>;
+    }>>, {
+        id: string;
+        type: string;
+        displayName: string | undefined;
+        tracks: any[];
+        minimized: boolean;
+        displayedRegions: import("@jbrowse/core/util").Region[];
+        offsetPx: number;
+        bpPerPx: number;
+        hideHeader: boolean;
+        hideHeaderOverview: boolean;
+        hideNoTracksActive: boolean;
+        trackSelectorType: string;
+        showCenterLine: boolean;
+        showCytobandsSetting: boolean;
+        trackLabels: string;
+        showGridlines: boolean;
+        highlight: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType[];
+        colorByCDS: boolean;
+        showTrackOutlines: boolean;
+    }>>;
     viewTrackConfigs: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
 } & {
     type: import("mobx-state-tree").ISimpleType<"LinearSyntenyView">;
@@ -336,10 +360,10 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         type?: undefined;
     } | {
         label: string;
-        onClick: () => void;
         checked: boolean;
         type: string;
         description: string;
+        onClick: () => void;
         icon?: undefined;
     } | {
         label: string;
@@ -423,6 +447,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType>>, [undefined]>;
         colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
         showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+        init: import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined>;
     }, {
         width: number;
     } & {
@@ -451,6 +476,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         readonly interRegionPaddingWidth: number;
         readonly assemblyNames: string[];
         readonly stickyViewHeaders: boolean;
+        readonly rubberbandTop: number;
         readonly pinnedTracksTop: number;
     } & {
         scaleBarDisplayPrefix(): string | undefined;
@@ -537,6 +563,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         setDraggingTrackId(idx?: string): void;
         setScaleFactor(factor: number): void;
         clearView(): void;
+        setInit(arg?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState): void;
         exportSvg(opts?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").ExportSvgOptions): Promise<void>;
     } & {
         slide: (viewWidths: number) => void;
@@ -557,7 +584,6 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         readonly coarseVisibleLocStrings: string;
     } & {
         setCoarseDynamicBlocks(blocks: import("@jbrowse/core/util/blockTypes").BlockSet): void;
-        afterAttach(): void;
     } & {
         moveTo(start?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").BpOffset, end?: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").BpOffset): void;
         navToLocString(input: string, optAssemblyName?: string): Promise<void>;
@@ -603,6 +629,7 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         } | undefined;
     } & {
         afterCreate(): void;
+        afterAttach(): void;
     }, import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
         id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
         displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -625,7 +652,28 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType>>, [undefined]>;
         colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
         showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-    }>>, import("mobx-state-tree")._NotCustomized>>;
+        init: import("mobx-state-tree").IType<import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined, import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").InitState | undefined>;
+    }>>, {
+        id: string;
+        type: string;
+        displayName: string | undefined;
+        tracks: any[];
+        minimized: boolean;
+        displayedRegions: import("@jbrowse/core/util").Region[];
+        offsetPx: number;
+        bpPerPx: number;
+        hideHeader: boolean;
+        hideHeaderOverview: boolean;
+        hideNoTracksActive: boolean;
+        trackSelectorType: string;
+        showCenterLine: boolean;
+        showCytobandsSetting: boolean;
+        trackLabels: string;
+        showGridlines: boolean;
+        highlight: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").HighlightType[];
+        colorByCDS: boolean;
+        showTrackOutlines: boolean;
+    }>>;
     viewTrackConfigs: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
 }>> & import("mobx-state-tree/dist/internal").NonEmptyObject & import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type LinearSyntenyViewStateModel = ReturnType<typeof stateModelFactory>;

package/esm/LinearSyntenyView/model.js

@@ -73,12 +73,12 @@ export default function stateModelFactory(pluginManager) {
                     },
                     {
                         label: 'Draw CIGAR',
-                        onClick: () => {
-                            self.setDrawCIGAR(!self.drawCIGAR);
-                        },
                         checked: self.drawCIGAR,
                         type: 'checkbox',
                         description: 'Draws per-base CIGAR level alignments',
+                        onClick: () => {
+                            self.setDrawCIGAR(!self.drawCIGAR);
+                        },
                     },
                     {
                         label: 'Link views',

package/esm/LinearSyntenyViewHelper/stateModelFactory.js

@@ -48,9 +48,9 @@ export function linearSyntenyViewHelperModelFactory(pluginManager) {
             const config = resolveIdentifier(schema, getRoot(self), trackId);
             const shownTracks = self.tracks.filter(t => t.configuration === config);
             transaction(() => {
-                shownTracks.forEach(t => {
+                for (const t of shownTracks) {
                     self.tracks.remove(t);
-                });
+                }
             });
             return shownTracks.length;
         },