@jbrowse/plugin-dotplot-view 2.18.0 → 3.0.1

package/dist/DotplotView/components/ImportForm/ImportSyntenyOpenCustomTrack.js

@@ -0,0 +1,129 @@
+"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 react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const Help_1 = __importDefault(require("@mui/icons-material/Help"));
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const getAdapter_1 = require("./getAdapter");
+const util_1 = require("./util");
+const ImportSyntenyOpenCustomTrack = (0, mobx_react_1.observer)(function ({ model, assembly1, assembly2, }) {
+    const [swap, setSwap] = (0, react_1.useState)(false);
+    const [bed2Location, setBed2Location] = (0, react_1.useState)();
+    const [bed1Location, setBed1Location] = (0, react_1.useState)();
+    const [fileLocation, setFileLocation] = (0, react_1.useState)();
+    const [indexFileLocation, setIndexFileLocation] = (0, react_1.useState)();
+    const [value, setValue] = (0, react_1.useState)('');
+    const [error, setError] = (0, react_1.useState)();
+    const fileName = (0, util_1.getName)(fileLocation);
+    const radioOption = value || (fileName ? (0, util_1.extName)((0, util_1.stripGz)(fileName)) : '');
+    (0, react_1.useEffect)(() => {
+        try {
+            if (fileLocation) {
+                const fn = fileName ? (0, util_1.basename)(fileName) : 'MyTrack';
+                const trackId = `${fn}-${Date.now()}-sessionTrack`;
+                setError(undefined);
+                model.setImportFormSyntenyTrack(0, {
+                    type: 'userOpened',
+                    value: {
+                        trackId,
+                        name: fn,
+                        assemblyNames: [assembly2, assembly1],
+                        type: 'SyntenyTrack',
+                        adapter: (0, getAdapter_1.getAdapter)({
+                            radioOption,
+                            assembly1: swap ? assembly2 : assembly1,
+                            assembly2: swap ? assembly1 : assembly2,
+                            fileLocation,
+                            indexFileLocation,
+                            bed1Location,
+                            bed2Location,
+                        }),
+                    },
+                });
+            }
+        }
+        catch (e) {
+            console.error(e);
+            setError(e);
+        }
+    }, [
+        swap,
+        model,
+        fileName,
+        assembly1,
+        assembly2,
+        bed1Location,
+        bed2Location,
+        fileLocation,
+        indexFileLocation,
+        radioOption,
+    ]);
+    const helpStrings = {
+        '.paf': 'minimap2 target.fa query.fa',
+        '.pif.gz': 'minimap2 target.fa query.fa',
+        '.out': 'mashmap target.fa query.fa',
+        '.delta': 'mummer target.fa query.fa',
+        '.chain': 'e.g. queryToTarget.chain',
+    };
+    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: [
+                        '.paf',
+                        '.delta',
+                        '.out',
+                        '.chain',
+                        '.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' ||
+                    radioOption === '.out' ||
+                    radioOption === '.delta' ||
+                    radioOption === '.chain' ||
+                    radioOption === '.pif.gz' ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 10,
+                    }, children: [(0, jsx_runtime_1.jsx)(ui_1.FileSelector, { name: `${radioOption} location`, inline: true, description: "", location: fileLocation, setLocation: loc => {
+                                setFileLocation(loc);
+                            } }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { children: ["Verify or click swap", (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsx)("code", { children: helpStrings[radioOption] }), children: (0, jsx_runtime_1.jsx)(Help_1.default, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                        display: 'flex',
+                                        gap: 20,
+                                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                                display: 'grid',
+                                                gridTemplateColumns: '1fr 1fr',
+                                                gap: 4,
+                                                alignItems: 'center',
+                                            }, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("i", { children: swap ? assembly2 : assembly1 }) }), (0, jsx_runtime_1.jsx)("div", { children: "query assembly" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("i", { children: swap ? assembly1 : assembly2 }) }), (0, jsx_runtime_1.jsx)("div", { children: "target assembly" })] }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                                                setSwap(!swap);
+                                            }, children: "Swap?" })] })] })] })) : value === '.anchors' || value === '.anchors.simple' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: { margin: 20 }, children: ["Open the ", value, " and .bed files for both genome assemblies from the MCScan (Python version) pipeline", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://github.com/tanghaibao/jcvi/wiki/MCscan-(Python-version)", children: "(more info)" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_1.FileSelector, { inline: true, name: value, location: fileLocation, setLocation: loc => {
+                                        setFileLocation(loc);
+                                    } }), (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { inline: true, name: "genome 1 .bed (left column of anchors file)", description: "", location: bed1Location, setLocation: loc => {
+                                        setBed1Location(loc);
+                                    } }), (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { inline: true, name: "genome 2 .bed (right column of anchors file)", description: "", location: bed2Location, setLocation: loc => {
+                                        setBed2Location(loc);
+                                    } })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                margin: 'auto',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                gap: 20,
+                            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                        display: 'grid',
+                                        gridTemplateColumns: '1fr 1fr',
+                                        gap: 4,
+                                        alignItems: 'center',
+                                    }, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("i", { children: swap ? assembly2 : assembly1 }) }), (0, jsx_runtime_1.jsx)("div", { children: "bed1 assembly" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("i", { children: swap ? assembly1 : assembly2 }) }), (0, jsx_runtime_1.jsx)("div", { children: "bed2 assembly" })] }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                                        setSwap(!swap);
+                                    }, children: "Swap?" })] })] })) : value === '.pif.gz' ? ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex' }, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { name: `${value} location`, description: "", location: fileLocation, setLocation: loc => {
+                                    setFileLocation(loc);
+                                } }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { name: `${value} index location`, description: "", location: indexFileLocation, setLocation: loc => {
+                                    setIndexFileLocation(loc);
+                                } }) })] })) : ((0, jsx_runtime_1.jsx)(ui_1.FileSelector, { name: value ? `${value} location` : '', description: "", location: fileLocation, setLocation: loc => {
+                        setFileLocation(loc);
+                    } })) })] }));
+});
+exports.default = ImportSyntenyOpenCustomTrack;

package/dist/DotplotView/components/ImportForm/ImportSyntenyTrackSelector.d.ts

@@ -1,9 +1,7 @@
-import React from 'react';
 import type { DotplotViewModel } from '../../model';
-declare const Selector: ({ model, assembly1, assembly2, setShowTrackId, }: {
+declare const ImportSyntenyTrackSelector: ({ model, assembly1, assembly2, }: {
     model: DotplotViewModel;
     assembly1: string;
     assembly2: string;
-    setShowTrackId: (arg: string) => void;
-}) => React.JSX.Element;
-export default Selector;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ImportSyntenyTrackSelector;

package/dist/DotplotView/components/ImportForm/ImportSyntenyTrackSelector.js

@@ -1,29 +1,7 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const configuration_1 = require("@jbrowse/core/configuration");
 const ui_1 = require("@jbrowse/core/ui");
 const Icons_1 = require("@jbrowse/core/ui/Icons");
@@ -37,7 +15,7 @@ function f(track, assembly1, assembly2) {
         assemblyNames.includes(assembly2) &&
         track.type.includes('Synteny'));
 }
-const Selector = (0, mobx_react_1.observer)(({ model, assembly1, assembly2, setShowTrackId, }) => {
+const ImportSyntenyTrackSelector = (0, mobx_react_1.observer)(function ({ model, assembly1, assembly2, }) {
     var _a;
     const session = (0, util_1.getSession)(model);
     const { tracks, sessionTracks } = session;
@@ -52,17 +30,13 @@ const Selector = (0, mobx_react_1.observer)(({ model, assembly1, assembly2, setS
         setValue(resetTrack);
     }, [resetTrack]);
     (0, react_1.useEffect)(() => {
-        setShowTrackId(value);
-    }, [value, setShowTrackId]);
-    return (react_1.default.createElement(material_1.Paper, { style: { padding: 12 } },
-        react_1.default.createElement(material_1.Typography, { paragraph: true }, "Select a track from the select box below, the track will be shown when you hit \"Launch\"."),
-        react_1.default.createElement(material_1.Typography, { paragraph: true },
-            "Note: there is a track selector ",
-            react_1.default.createElement("i", null, "inside"),
-            " the DotplotView, which can turn on one or more SyntenyTracks (more than one can be displayed at once). Look for the track selector icon ",
-            react_1.default.createElement(Icons_1.TrackSelector, null)),
-        filteredTracks.length ? (react_1.default.createElement(material_1.Select, { value: value, onChange: event => {
-                setValue(event.target.value);
-            } }, filteredTracks.map(track => (react_1.default.createElement(material_1.MenuItem, { key: track.trackId, value: track.trackId }, (0, tracks_1.getTrackName)(track, session)))))) : (react_1.default.createElement(ui_1.ErrorMessage, { error: `No synteny tracks found for ${assembly1},${assembly2}` }))));
+        model.setImportFormSyntenyTrack(0, {
+            type: 'preConfigured',
+            value,
+        });
+    }, [model, value]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { style: { padding: 12 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["Select a track from the select box below, the track will be shown when you hit \"Launch\". Note: there is a track selector ", (0, jsx_runtime_1.jsx)("i", { children: "inside" }), " the DotplotView, which can turn on one or more SyntenyTracks (more than one can be displayed at once). Look for the track selector icon", ' ', (0, jsx_runtime_1.jsx)(Icons_1.TrackSelector, {})] }), filteredTracks.length ? ((0, jsx_runtime_1.jsx)(material_1.Select, { value: value, onChange: event => {
+                    setValue(event.target.value);
+                }, children: filteredTracks.map(track => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: track.trackId, children: (0, tracks_1.getTrackName)(track, session) }, track.trackId))) })) : ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: `No synteny tracks found for ${assembly1},${assembly2}` }))] }));
 });
-exports.default = Selector;
+exports.default = ImportSyntenyTrackSelector;

package/dist/DotplotView/components/ImportForm/TrackSelector.d.ts

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

package/dist/DotplotView/components/ImportForm/TrackSelector.js

@@ -0,0 +1,23 @@
+"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 react_1 = require("react");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const ImportSyntenyOpenCustomTrack_1 = __importDefault(require("./ImportSyntenyOpenCustomTrack"));
+const ImportSyntenyTrackSelector_1 = __importDefault(require("./ImportSyntenyTrackSelector"));
+const TrackSelector = (0, mobx_react_1.observer)(function ({ assembly1, assembly2, model, }) {
+    const [choice, setChoice] = (0, react_1.useState)('tracklist');
+    (0, react_1.useEffect)(() => {
+        if (choice === 'none') {
+            model.setImportFormSyntenyTrack(0, { type: 'none' });
+        }
+    }, [model, choice]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, { id: "group-label", children: "(Optional) Select or add a synteny track" }), (0, jsx_runtime_1.jsxs)(material_1.RadioGroup, { row: true, value: choice, onChange: event => {
+                            setChoice(event.target.value);
+                        }, "aria-labelledby": "group-label", children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: "none", control: (0, jsx_runtime_1.jsx)(material_1.Radio, {}), label: "None" }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: "tracklist", control: (0, jsx_runtime_1.jsx)(material_1.Radio, {}), label: "Existing track" }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: "custom", control: (0, jsx_runtime_1.jsx)(material_1.Radio, {}), label: "New track" })] })] }), choice === 'custom' ? ((0, jsx_runtime_1.jsx)(ImportSyntenyOpenCustomTrack_1.default, { model: model, assembly2: assembly2, assembly1: assembly1 })) : null, choice === 'tracklist' ? ((0, jsx_runtime_1.jsx)(ImportSyntenyTrackSelector_1.default, { model: model, assembly1: assembly1, assembly2: assembly2 })) : null] }));
+});
+exports.default = TrackSelector;

package/dist/DotplotView/components/ImportForm/getAdapter.d.ts

@@ -0,0 +1,117 @@
+import type { FileLocation } from '@jbrowse/core/util';
+export declare function getAdapter({ radioOption, assembly1, assembly2, fileLocation, indexFileLocation, bed1Location, bed2Location, }: {
+    radioOption: string;
+    assembly1: string;
+    assembly2: string;
+    fileLocation?: FileLocation;
+    indexFileLocation?: FileLocation;
+    bed1Location?: FileLocation;
+    bed2Location?: FileLocation;
+}): {
+    type: string;
+    pafLocation: FileLocation | undefined;
+    queryAssembly: string;
+    targetAssembly: string;
+    outLocation?: undefined;
+    deltaLocation?: undefined;
+    chainLocation?: undefined;
+    mcscanAnchorsLocation?: undefined;
+    bed1Location?: undefined;
+    bed2Location?: undefined;
+    assemblyNames?: undefined;
+    mcscanSimpleAnchorsLocation?: undefined;
+    pifGzLocation?: undefined;
+    index?: undefined;
+} | {
+    type: string;
+    outLocation: FileLocation | undefined;
+    queryAssembly: string;
+    targetAssembly: string;
+    pafLocation?: undefined;
+    deltaLocation?: undefined;
+    chainLocation?: undefined;
+    mcscanAnchorsLocation?: undefined;
+    bed1Location?: undefined;
+    bed2Location?: undefined;
+    assemblyNames?: undefined;
+    mcscanSimpleAnchorsLocation?: undefined;
+    pifGzLocation?: undefined;
+    index?: undefined;
+} | {
+    type: string;
+    deltaLocation: FileLocation | undefined;
+    queryAssembly: string;
+    targetAssembly: string;
+    pafLocation?: undefined;
+    outLocation?: undefined;
+    chainLocation?: undefined;
+    mcscanAnchorsLocation?: undefined;
+    bed1Location?: undefined;
+    bed2Location?: undefined;
+    assemblyNames?: undefined;
+    mcscanSimpleAnchorsLocation?: undefined;
+    pifGzLocation?: undefined;
+    index?: undefined;
+} | {
+    type: string;
+    chainLocation: FileLocation | undefined;
+    queryAssembly: string;
+    targetAssembly: string;
+    pafLocation?: undefined;
+    outLocation?: undefined;
+    deltaLocation?: undefined;
+    mcscanAnchorsLocation?: undefined;
+    bed1Location?: undefined;
+    bed2Location?: undefined;
+    assemblyNames?: undefined;
+    mcscanSimpleAnchorsLocation?: undefined;
+    pifGzLocation?: undefined;
+    index?: undefined;
+} | {
+    type: string;
+    mcscanAnchorsLocation: FileLocation | undefined;
+    bed1Location: FileLocation | undefined;
+    bed2Location: FileLocation | undefined;
+    assemblyNames: string[];
+    pafLocation?: undefined;
+    queryAssembly?: undefined;
+    targetAssembly?: undefined;
+    outLocation?: undefined;
+    deltaLocation?: undefined;
+    chainLocation?: undefined;
+    mcscanSimpleAnchorsLocation?: undefined;
+    pifGzLocation?: undefined;
+    index?: undefined;
+} | {
+    type: string;
+    mcscanSimpleAnchorsLocation: FileLocation | undefined;
+    bed1Location: FileLocation | undefined;
+    bed2Location: FileLocation | undefined;
+    assemblyNames: string[];
+    pafLocation?: undefined;
+    queryAssembly?: undefined;
+    targetAssembly?: undefined;
+    outLocation?: undefined;
+    deltaLocation?: undefined;
+    chainLocation?: undefined;
+    mcscanAnchorsLocation?: undefined;
+    pifGzLocation?: undefined;
+    index?: undefined;
+} | {
+    type: string;
+    pifGzLocation: FileLocation | undefined;
+    index: {
+        location: FileLocation | undefined;
+    };
+    assemblyNames: string[];
+    pafLocation?: undefined;
+    queryAssembly?: undefined;
+    targetAssembly?: undefined;
+    outLocation?: undefined;
+    deltaLocation?: undefined;
+    chainLocation?: undefined;
+    mcscanAnchorsLocation?: undefined;
+    bed1Location?: undefined;
+    bed2Location?: undefined;
+    mcscanSimpleAnchorsLocation?: undefined;
+};

package/dist/DotplotView/components/ImportForm/getAdapter.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAdapter = getAdapter;
+function getAdapter({ radioOption, assembly1, assembly2, fileLocation, indexFileLocation, bed1Location, bed2Location, }) {
+    if (radioOption === '.paf') {
+        return {
+            type: 'PAFAdapter',
+            pafLocation: fileLocation,
+            queryAssembly: assembly1,
+            targetAssembly: assembly2,
+        };
+    }
+    else if (radioOption === '.out') {
+        return {
+            type: 'MashMapAdapter',
+            outLocation: fileLocation,
+            queryAssembly: assembly1,
+            targetAssembly: assembly2,
+        };
+    }
+    else if (radioOption === '.delta') {
+        return {
+            type: 'DeltaAdapter',
+            deltaLocation: fileLocation,
+            queryAssembly: assembly1,
+            targetAssembly: assembly2,
+        };
+    }
+    else if (radioOption === '.chain') {
+        return {
+            type: 'ChainAdapter',
+            chainLocation: fileLocation,
+            queryAssembly: assembly1,
+            targetAssembly: assembly2,
+        };
+    }
+    else if (radioOption === '.anchors') {
+        return {
+            type: 'MCScanAnchorsAdapter',
+            mcscanAnchorsLocation: fileLocation,
+            bed1Location,
+            bed2Location,
+            assemblyNames: [assembly1, assembly2],
+        };
+    }
+    else if (radioOption === '.anchors.simple') {
+        return {
+            type: 'MCScanSimpleAnchorsAdapter',
+            mcscanSimpleAnchorsLocation: fileLocation,
+            bed1Location,
+            bed2Location,
+            assemblyNames: [assembly1, assembly2],
+        };
+    }
+    else if (radioOption === '.pif.gz') {
+        return {
+            type: 'PairwiseIndexedPAFAdapter',
+            pifGzLocation: fileLocation,
+            index: {
+                location: indexFileLocation,
+            },
+            assemblyNames: [assembly1, assembly2],
+        };
+    }
+    else {
+        throw new Error(`Unknown to detect type ${radioOption} from filename (select radio button to clarify)`);
+    }
+}

package/dist/DotplotView/components/ImportForm/index.d.ts

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

package/dist/DotplotView/components/ImportForm/index.js

@@ -1,40 +1,17 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 const mobx_1 = require("mobx");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
-const ImportCustomTrack_1 = __importDefault(require("./ImportCustomTrack"));
-const ImportSyntenyTrackSelector_1 = __importDefault(require("./ImportSyntenyTrackSelector"));
+const TrackSelector_1 = __importDefault(require("./TrackSelector"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     importFormContainer: {
         padding: theme.spacing(4),
@@ -45,81 +22,55 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         margin: '0 auto',
     },
 }));
-function TrackSelector({ setSessionTrackData, setShowTrackId, sessionTrackData, assembly1, assembly2, model, }) {
-    const [choice, setChoice] = (0, react_1.useState)('tracklist');
-    (0, react_1.useEffect)(() => {
-        if (choice === 'none') {
-            setSessionTrackData(undefined);
-            setShowTrackId(undefined);
+function doSubmit({ model, assembly1, assembly2, }) {
+    const session = (0, util_1.getSession)(model);
+    const { importFormSyntenyTrackSelections } = model;
+    model.setError(undefined);
+    (0, mobx_1.transaction)(() => {
+        if ((0, util_1.isSessionWithAddTracks)(session)) {
+            (0, mobx_1.toJS)(importFormSyntenyTrackSelections).map((f, idx) => {
+                var _a;
+                if (f.type === 'userOpened') {
+                    session.addTrackConf(f.value);
+                    model.toggleTrack((_a = f.value) === null || _a === void 0 ? void 0 : _a.trackId);
+                }
+                else if (f.type === 'preConfigured') {
+                    model.showTrack(f.value, idx);
+                }
+            });
         }
-    }, [choice, setSessionTrackData, setShowTrackId]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.FormControl, null,
-            react_1.default.createElement(material_1.FormLabel, { id: "group-label" }, "(Optional) Select or add a synteny track"),
-            react_1.default.createElement(material_1.RadioGroup, { row: true, value: choice, onChange: event => {
-                    setChoice(event.target.value);
-                }, "aria-labelledby": "group-label" },
-                react_1.default.createElement(material_1.FormControlLabel, { value: "none", control: react_1.default.createElement(material_1.Radio, null), label: "None" }),
-                react_1.default.createElement(material_1.FormControlLabel, { value: "tracklist", control: react_1.default.createElement(material_1.Radio, null), label: "Existing track" }),
-                react_1.default.createElement(material_1.FormControlLabel, { value: "custom", control: react_1.default.createElement(material_1.Radio, null), label: "New track" }))),
-        choice === 'custom' ? (react_1.default.createElement(ImportCustomTrack_1.default, { setSessionTrackData: setSessionTrackData, sessionTrackData: sessionTrackData, assembly2: assembly2, assembly1: assembly1 })) : null,
-        choice === 'tracklist' ? (react_1.default.createElement(ImportSyntenyTrackSelector_1.default, { model: model, assembly1: assembly1, assembly2: assembly2, setShowTrackId: setShowTrackId })) : null));
+        model.showAllRegions();
+        model.setAssemblyNames(assembly2, assembly1);
+    });
 }
-const DotplotImportForm = (0, mobx_react_1.observer)(({ model }) => {
+const DotplotImportForm = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
     const session = (0, util_1.getSession)(model);
     const { assemblyNames } = session;
     const [assembly2, setAssembly2] = (0, react_1.useState)(assemblyNames[0] || '');
     const [assembly1, setAssembly1] = (0, react_1.useState)(assemblyNames[0] || '');
     const [error, setError] = (0, react_1.useState)();
-    const [sessionTrackData, setSessionTrackData] = (0, react_1.useState)();
-    const [showTrackId, setShowTrackId] = (0, react_1.useState)();
-    function onOpenClick() {
-        try {
-            if (!(0, util_1.isSessionWithAddTracks)(session)) {
-                return;
-            }
-            setError(undefined);
-            model.setError(undefined);
-            (0, mobx_1.transaction)(() => {
-                if (sessionTrackData) {
-                    session.addTrackConf(sessionTrackData);
-                    model.toggleTrack(sessionTrackData.trackId);
-                }
-                else if (showTrackId) {
-                    model.showTrack(showTrackId);
-                }
-                model.setViews([
-                    { bpPerPx: 0.1, offsetPx: 0 },
-                    { bpPerPx: 0.1, offsetPx: 0 },
-                ]);
-                model.setAssemblyNames(assembly2, assembly1);
-            });
-        }
-        catch (e) {
-            console.error(e);
-            setError(e);
-        }
-    }
     const displayError = error || model.error;
-    return (react_1.default.createElement(material_1.Container, { className: classes.importFormContainer },
-        displayError ? react_1.default.createElement(ui_1.ErrorMessage, { error: displayError }) : null,
-        react_1.default.createElement(material_1.Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", className: classes.assemblySelector },
-            react_1.default.createElement(material_1.Grid, { item: true },
-                react_1.default.createElement(material_1.Paper, { style: { padding: 12 } },
-                    react_1.default.createElement(material_1.Typography, { style: { textAlign: 'center' } }, "Select assemblies for dotplot view"),
-                    react_1.default.createElement(material_1.Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center" },
-                        react_1.default.createElement(material_1.Grid, { item: true },
-                            react_1.default.createElement(ui_1.AssemblySelector, { selected: assembly1, onChange: val => {
-                                    setAssembly1(val);
-                                }, session: session })),
-                        react_1.default.createElement(material_1.Grid, { item: true },
-                            react_1.default.createElement(ui_1.AssemblySelector, { selected: assembly2, onChange: val => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { className: classes.importFormContainer, children: [displayError ? (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: displayError }) : null, (0, jsx_runtime_1.jsxs)(material_1.Paper, { style: { padding: 12 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { style: { textAlign: 'center' }, children: "Select assemblies for dotplot view" }), (0, jsx_runtime_1.jsxs)(material_1.Grid2, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(ui_1.AssemblySelector, { helperText: "x-axis assembly", selected: assembly2, session: session, onChange: val => {
                                     setAssembly2(val);
-                                }, session: session })),
-                        react_1.default.createElement(material_1.Grid, { item: true },
-                            react_1.default.createElement(material_1.FormControl, null,
-                                react_1.default.createElement(material_1.Button, { onClick: onOpenClick, variant: "contained", color: "primary" }, "Launch"))))),
-                react_1.default.createElement(TrackSelector, { setShowTrackId: setShowTrackId, assembly2: assembly2, assembly1: assembly1, setSessionTrackData: setSessionTrackData, sessionTrackData: sessionTrackData, model: model })))));
+                                } }), (0, jsx_runtime_1.jsx)(ui_1.AssemblySelector, { helperText: "y-axis assembly", selected: assembly1, session: session, onChange: val => {
+                                    setAssembly1(val);
+                                } }), (0, jsx_runtime_1.jsx)(material_1.FormControl, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
+                                        ;
+                                        (async () => {
+                                            try {
+                                                setError(undefined);
+                                                doSubmit({
+                                                    assembly1,
+                                                    assembly2,
+                                                    model,
+                                                });
+                                            }
+                                            catch (e) {
+                                                console.error(e);
+                                                setError(e);
+                                            }
+                                        })();
+                                    }, variant: "contained", color: "primary", children: "Launch" }) })] }), (0, jsx_runtime_1.jsx)(TrackSelector_1.default, { assembly2: assembly2, assembly1: assembly1, model: model })] })] }));
 });
 exports.default = DotplotImportForm;

package/dist/DotplotView/components/PanButtons.d.ts

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