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

package/dist/LinearComparativeView/components/Rubberband.js

@@ -18,7 +18,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => {
             height: '100%',
             background: (0, material_1.alpha)(theme.palette.tertiary.main, 0.7),
             position: 'absolute',
-            zIndex: 10,
+            zIndex: 900,
             textAlign: 'center',
             overflow: 'hidden',
         },
@@ -81,13 +81,13 @@ const LinearComparativeRubberband = (0, mobx_react_1.observer)(function Rubberba
                     clientY,
                 });
                 (0, mobx_1.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);
             }
@@ -125,9 +125,9 @@ const LinearComparativeRubberband = (0, mobx_react_1.observer)(function Rubberba
     function mouseOut() {
         setGuideX(undefined);
         (0, mobx_1.transaction)(() => {
-            model.views.forEach(view => {
+            for (const view of model.views) {
                 view.setOffsets(undefined, undefined);
-            });
+            }
         });
     }
     function handleClose() {

package/dist/LinearComparativeView/components/VerticalGuide.js

@@ -11,19 +11,16 @@ const useStyles = (0, mui_1.makeStyles)()({
         height: '100%',
         width: 1,
         position: 'absolute',
-        zIndex: 10,
-    },
-    sm: {
-        fontSize: 10,
+        background: 'red',
+        zIndex: 1001,
     },
 });
 const VerticalGuide = (0, mobx_react_1.observer)(function ({ model, coordX, }) {
     const { classes } = useStyles();
     return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { open: true, placement: "top", title: model.views
             .map(view => view.pxToBp(coordX))
-            .map((elt, idx) => ((0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.sm, children: (0, util_1.stringify)(elt, true) }, [JSON.stringify(elt), idx].join('-')))), arrow: true, children: (0, jsx_runtime_1.jsx)("div", { className: classes.guide, style: {
+            .map((elt, idx) => ((0, jsx_runtime_1.jsx)("div", { children: (0, util_1.stringify)(elt, true) }, [JSON.stringify(elt), idx].join('-')))), arrow: true, children: (0, jsx_runtime_1.jsx)("div", { className: classes.guide, style: {
                 left: coordX,
-                background: 'red',
             } }) }));
 });
 exports.default = VerticalGuide;

package/dist/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>;
@@ -191,6 +193,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
             input: string;
             assembly: import("@jbrowse/core/assemblyManager/assembly").Assembly;
         }): Promise<void>;
+        navToLocation(parsedLocString: import("@jbrowse/core/util").ParsedLocString, assemblyName?: string): Promise<void>;
         navToLocations(parsedLocStrings: import("@jbrowse/core/util").ParsedLocString[], assemblyName?: string): Promise<void>;
         navTo(query: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").NavLocation): void;
         navToMultiple(locations: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").NavLocation[]): void;
@@ -229,6 +232,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 +255,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 +364,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 +393,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 +480,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 +501,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>;
@@ -481,6 +508,7 @@ declare function stateModelFactory(pluginManager: PluginManager): import("mobx-s
             input: string;
             assembly: import("@jbrowse/core/assemblyManager/assembly").Assembly;
         }): Promise<void>;
+        navToLocation(parsedLocString: import("@jbrowse/core/util").ParsedLocString, assemblyName?: string): Promise<void>;
         navToLocations(parsedLocStrings: import("@jbrowse/core/util").ParsedLocString[], assemblyName?: string): Promise<void>;
         navTo(query: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").NavLocation): void;
         navToMultiple(locations: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView/types").NavLocation[]): void;
@@ -519,6 +547,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 +570,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/dist/LinearComparativeView/model.js

@@ -102,18 +102,23 @@ function stateModelFactory(pluginManager) {
             }
         },
         onSubviewAction(actionName, path, args) {
-            self.views.forEach(view => {
+            for (const view of self.views) {
                 const ret = (0, mobx_state_tree_1.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 = (0, mobx_state_tree_1.cast)(views);
+            const levels = [];
+            for (let i = 0; i < views.length - 1; i++) {
+                levels.push({ level: i });
+            }
+            self.levels = (0, mobx_state_tree_1.cast)(levels);
         },
         removeView(view) {
             self.views.remove(view);

package/dist/LinearReadVsRef/LinearReadVsRef.js

@@ -101,12 +101,12 @@ function ReadVsRefDialog({ track, feature: preFeature, handleClose, }) {
             };
             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/dist/LinearSyntenyView/components/ImportForm/ImportSyntenyOpenCustomTrack.js

@@ -73,7 +73,7 @@ const ImportSyntenyOpenCustomTrack = (0, mobx_react_1.observer)(function ({ mode
     };
     return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { style: { padding: 12 }, children: [error ? (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error }) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, { style: { textAlign: 'center' }, children: "Add a .paf (minimap2), .delta (Mummer), .chain (UCSC liftover), .anchors or .anchors.simple (MCScan), or .pif.gz (jbrowse CLI make-pif) file to view. These file types can also be gzipped." }), (0, jsx_runtime_1.jsx)(material_1.RadioGroup, { value: radioOption, onChange: event => {
                     setValue(event.target.value);
-                }, children: (0, jsx_runtime_1.jsx)(material_1.Grid2, { container: true, justifyContent: "center", children: [
+                }, children: (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, justifyContent: "center", children: [
                         '.paf',
                         '.delta',
                         '.out',
@@ -81,7 +81,7 @@ const ImportSyntenyOpenCustomTrack = (0, mobx_react_1.observer)(function ({ mode
                         '.anchors',
                         '.anchors.simple',
                         '.pif.gz',
-                    ].map(extension => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: extension, control: (0, jsx_runtime_1.jsx)(material_1.Radio, {}), label: extension }, extension))) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid2, { container: true, justifyContent: "center", children: radioOption === '.paf' ||
+                    ].map(extension => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: extension, control: (0, jsx_runtime_1.jsx)(material_1.Radio, {}), label: extension }, extension))) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, justifyContent: "center", children: radioOption === '.paf' ||
                     radioOption === '.out' ||
                     radioOption === '.delta' ||
                     radioOption === '.chain' ||

package/dist/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/dist/LinearSyntenyView/components/ImportForm/LeftPanel.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
+const ArrowForwardIos_1 = __importDefault(require("@mui/icons-material/ArrowForwardIos"));
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.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 = (0, mobx_react_1.observer)(function ({ selectedRow, selectedAssemblyNames, setSelectedRow, setSelectedAssemblyNames, model, }) {
+    const { classes, cx } = useStyles();
+    const session = (0, util_1.getSession)(model);
+    return selectedAssemblyNames.map((assemblyName, idx) => ((0, jsx_runtime_1.jsxs)("div", { className: classes.rel, children: [(0, jsx_runtime_1.jsxs)("span", { children: ["Row ", idx + 1, ": "] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { disabled: selectedAssemblyNames.length <= 2, onClick: () => {
+                    model.importFormRemoveRow(idx);
+                    setSelectedAssemblyNames(selectedAssemblyNames
+                        .map((asm, idx2) => (idx2 === idx ? undefined : asm))
+                        .filter(util_1.notEmpty));
+                    if (selectedRow >= selectedAssemblyNames.length - 2) {
+                        setSelectedRow(0);
+                    }
+                }, children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }), (0, jsx_runtime_1.jsx)(ui_1.AssemblySelector, { helperText: "", selected: assemblyName, onChange: newAssembly => {
+                    setSelectedAssemblyNames(selectedAssemblyNames.map((asm, idx2) => idx2 === idx ? newAssembly : asm));
+                }, session: session }), idx !== selectedAssemblyNames.length - 1 ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { "data-testid": "synbutton", className: cx(classes.synbutton, idx === selectedRow ? classes.bg : undefined), onClick: () => {
+                    setSelectedRow(idx);
+                }, children: (0, jsx_runtime_1.jsx)(ArrowForwardIos_1.default, {}) })) : null] }, `${assemblyName}-${idx}`)));
+});
+const LeftPanel = (0, mobx_react_1.observer)(function ({ model, selectedAssemblyNames, setSelectedAssemblyNames, selectedRow, setSelectedRow, defaultAssemblyName, onLaunch, }) {
+    const { classes } = useStyles();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: classes.mb, children: "Select assemblies for linear synteny view" }), (0, jsx_runtime_1.jsx)(AssemblyRows, { model: model, selectedAssemblyNames: selectedAssemblyNames, setSelectedAssemblyNames: setSelectedAssemblyNames, selectedRow: selectedRow, setSelectedRow: setSelectedRow }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { className: classes.button, variant: "contained", color: "secondary", onClick: () => {
+                            setSelectedAssemblyNames([
+                                ...selectedAssemblyNames,
+                                defaultAssemblyName,
+                            ]);
+                        }, children: "Add row" }), (0, jsx_runtime_1.jsx)(material_1.Button, { className: classes.button, onClick: onLaunch, variant: "contained", color: "primary", children: "Launch" })] })] }));
+});
+exports.default = LeftPanel;

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

@@ -7,37 +7,20 @@ 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 ArrowForwardIos_1 = __importDefault(require("@mui/icons-material/ArrowForwardIos"));
-const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
 const ImportSyntenyTrackSelectorArea_1 = __importDefault(require("./ImportSyntenyTrackSelectorArea"));
+const LeftPanel_1 = __importDefault(require("./LeftPanel"));
 const doSubmit_1 = require("./doSubmit");
 const useStyles = (0, mui_1.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,
     },
@@ -47,7 +30,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     },
 }));
 const LinearSyntenyViewImportForm = (0, mobx_react_1.observer)(function ({ model, }) {
-    const { classes, cx } = useStyles();
+    const { classes } = useStyles();
     const session = (0, util_1.getSession)(model);
     const { assemblyNames } = session;
     const defaultAssemblyName = assemblyNames[0] || '';
@@ -57,38 +40,21 @@ const LinearSyntenyViewImportForm = (0, mobx_react_1.observer)(function ({ model
         defaultAssemblyName,
     ]);
     const [error, setError] = (0, react_1.useState)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { className: classes.importFormContainer, children: [error ? (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error }) : null, (0, jsx_runtime_1.jsxs)("div", { className: classes.flex, children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.leftPanel, children: [(0, jsx_runtime_1.jsx)("div", { className: classes.mb, children: "Select assemblies for linear synteny view" }), selectedAssemblyNames.map((assemblyName, idx) => ((0, jsx_runtime_1.jsxs)("div", { className: classes.rel, children: [(0, jsx_runtime_1.jsxs)("span", { children: ["Row ", idx + 1, ": "] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { disabled: selectedAssemblyNames.length <= 2, onClick: () => {
-                                            model.importFormRemoveRow(idx);
-                                            setSelectedAssemblyNames(selectedAssemblyNames
-                                                .map((asm, idx2) => (idx2 === idx ? undefined : asm))
-                                                .filter(util_1.notEmpty));
-                                            if (selectedRow >= selectedAssemblyNames.length - 2) {
-                                                setSelectedRow(0);
-                                            }
-                                        }, children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }), (0, jsx_runtime_1.jsx)(ui_1.AssemblySelector, { helperText: "", selected: assemblyName, onChange: newAssembly => {
-                                            setSelectedAssemblyNames(selectedAssemblyNames.map((asm, idx2) => idx2 === idx ? newAssembly : asm));
-                                        }, session: session }), idx !== selectedAssemblyNames.length - 1 ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { "data-testid": "synbutton", className: cx(classes.synbutton, idx === selectedRow ? classes.bg : undefined), onClick: () => {
-                                            setSelectedRow(idx);
-                                        }, children: (0, jsx_runtime_1.jsx)(ArrowForwardIos_1.default, {}) })) : null] }, `${assemblyName}-${idx}`))), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { className: classes.button, variant: "contained", color: "secondary", onClick: () => {
-                                            setSelectedAssemblyNames([
-                                                ...selectedAssemblyNames,
-                                                defaultAssemblyName,
-                                            ]);
-                                        }, children: "Add row" }), (0, jsx_runtime_1.jsx)(material_1.Button, { className: classes.button, onClick: () => {
-                                            ;
-                                            (async () => {
-                                                try {
-                                                    setError(undefined);
-                                                    await (0, doSubmit_1.doSubmit)({
-                                                        selectedAssemblyNames,
-                                                        model,
-                                                    });
-                                                }
-                                                catch (e) {
-                                                    console.error(e);
-                                                    setError(e);
-                                                }
-                                            })();
-                                        }, variant: "contained", color: "primary", children: "Launch" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.rightPanel, children: [(0, jsx_runtime_1.jsxs)("div", { children: ["Synteny dataset to display between row ", selectedRow + 1, " and", ' ', selectedRow + 2] }), (0, jsx_runtime_1.jsx)(ImportSyntenyTrackSelectorArea_1.default, { model: model, selectedRow: selectedRow, assembly1: selectedAssemblyNames[selectedRow], assembly2: selectedAssemblyNames[selectedRow + 1] })] })] })] }));
+    const handleLaunch = async () => {
+        try {
+            setError(undefined);
+            await (0, doSubmit_1.doSubmit)({
+                selectedAssemblyNames,
+                model,
+            });
+        }
+        catch (e) {
+            console.error(e);
+            setError(e);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { className: classes.importFormContainer, children: [error ? (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error }) : null, (0, jsx_runtime_1.jsxs)("div", { className: classes.flex, children: [(0, jsx_runtime_1.jsx)("div", { className: classes.leftPanel, children: (0, jsx_runtime_1.jsx)(LeftPanel_1.default, { model: model, selectedAssemblyNames: selectedAssemblyNames, setSelectedAssemblyNames: setSelectedAssemblyNames, selectedRow: selectedRow, setSelectedRow: setSelectedRow, defaultAssemblyName: defaultAssemblyName, onLaunch: () => {
+                                handleLaunch();
+                            } }) }), (0, jsx_runtime_1.jsxs)("div", { className: classes.rightPanel, children: [(0, jsx_runtime_1.jsxs)("div", { children: ["Synteny dataset to display between row ", selectedRow + 1, " and", ' ', selectedRow + 2] }), (0, jsx_runtime_1.jsx)(ImportSyntenyTrackSelectorArea_1.default, { model: model, selectedRow: selectedRow, assembly1: selectedAssemblyNames[selectedRow], assembly2: selectedAssemblyNames[selectedRow + 1] })] })] })] }));
 });
 exports.default = LinearSyntenyViewImportForm;

package/dist/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/dist/LinearSyntenyView/components/LinearSyntenyView.js

@@ -41,7 +41,7 @@ const react_1 = require("react");
 const mobx_react_1 = require("mobx-react");
 const LinearComparativeView_1 = __importDefault(require("../../LinearComparativeView/components/LinearComparativeView"));
 const LinearSyntenyImportForm = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ImportForm/LinearSyntenyImportForm'))));
-const LinearSyntenyView = (0, mobx_react_1.observer)(function ({ model }) {
+const LinearSyntenyView = (0, mobx_react_1.observer)(function ({ model, }) {
     return !model.initialized ? ((0, jsx_runtime_1.jsx)(LinearSyntenyImportForm, { model: model })) : ((0, jsx_runtime_1.jsx)(LinearComparativeView_1.default, { model: model }));
 });
 exports.default = LinearSyntenyView;