@jbrowse/plugin-dotplot-view 2.17.0 → 3.0.0

package/dist/DotplotView/components/DotplotWarnings.js

@@ -15,34 +15,39 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 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 material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
-// lazy components
 const WarningDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./WarningDialog'))));
 const DotplotWarnings = (0, mobx_react_1.observer)(function ({ model, }) {
     const trackWarnings = model.tracks.filter(t => { var _a; return (_a = t.displays[0].warnings) === null || _a === void 0 ? void 0 : _a.length; });
     const [shown, setShown] = (0, react_1.useState)(false);
     const [hide, setHide] = (0, react_1.useState)(false);
-    return trackWarnings.length && !hide ? (react_1.default.createElement(material_1.Alert, { severity: "warning" },
-        "Warnings during render",
-        ' ',
-        react_1.default.createElement(material_1.Button, { onClick: () => {
-                setShown(true);
-            } }, "More info"),
-        shown ? (react_1.default.createElement(WarningDialog, { trackWarnings: trackWarnings, handleClose: () => {
-                setShown(false);
-            } })) : null,
-        react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => {
-                setHide(true);
-            } }, "Dismiss"))) : null;
+    return trackWarnings.length && !hide ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "warning", children: ["Warnings during render", ' ', (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
+                    setShown(true);
+                }, children: "More info" }), shown ? ((0, jsx_runtime_1.jsx)(WarningDialog, { trackWarnings: trackWarnings, handleClose: () => {
+                    setShown(false);
+                } })) : null, (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                    setHide(true);
+                }, children: "Dismiss" })] })) : null;
 });
 exports.default = DotplotWarnings;

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

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

package/dist/DotplotView/components/ExportSvgDialog.js

@@ -1,41 +1,16 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ExportSvgDialog;
-const react_1 = __importStar(require("react"));
-const material_1 = require("@mui/material");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
 function LoadingMessage() {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(material_1.CircularProgress, { size: 20, style: { marginRight: 20 } }),
-        react_1.default.createElement(material_1.Typography, { display: "inline" }, "Creating SVG")));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20, style: { marginRight: 20 } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { display: "inline", children: "Creating SVG" })] }));
 }
 function TextField2({ children, ...rest }) {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(material_1.TextField, { ...rest }, children)));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { ...rest, children: children }) }));
 }
 function useSvgLocal(key, val) {
     return (0, util_1.useLocalStorage)(`svg-${key}`, val);
@@ -48,41 +23,31 @@ function ExportSvgDialog({ model, handleClose, }) {
     const [error, setError] = (0, react_1.useState)();
     const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg');
     const [themeName, setThemeName] = useSvgLocal('theme', session.themeName || 'default');
-    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Export SVG" },
-        react_1.default.createElement(material_1.DialogContent, null,
-            error ? (react_1.default.createElement(ui_1.ErrorMessage, { error: error })) : loading ? (react_1.default.createElement(LoadingMessage, null)) : null,
-            react_1.default.createElement(TextField2, { helperText: "filename", value: filename, onChange: event => {
-                    setFilename(event.target.value);
-                } }),
-            session.allThemes ? (react_1.default.createElement(TextField2, { select: true, label: "Theme", value: themeName, onChange: event => {
-                    setThemeName(event.target.value);
-                } }, Object.entries(session.allThemes()).map(([key, val]) => (react_1.default.createElement(material_1.MenuItem, { key: key, value: key }, 
-            // @ts-expect-error
-            val.name || '(Unknown name)'))))) : null,
-            offscreenCanvas ? (react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: rasterizeLayers, onChange: () => {
-                        setRasterizeLayers(val => !val);
-                    } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (react_1.default.createElement(material_1.Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),
-        react_1.default.createElement(material_1.DialogActions, null,
-            react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
-                    handleClose();
-                } }, "Cancel"),
-            react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", type: "submit", onClick: async () => {
-                    setLoading(true);
-                    setError(undefined);
-                    try {
-                        await model.exportSvg({
-                            rasterizeLayers,
-                            filename,
-                            themeName,
-                        });
-                        handleClose();
-                    }
-                    catch (e) {
-                        console.error(e);
-                        setError(e);
-                    }
-                    finally {
-                        setLoading(false);
-                    }
-                } }, "Submit"))));
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { open: true, onClose: handleClose, title: "Export SVG", children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [error ? ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error })) : loading ? ((0, jsx_runtime_1.jsx)(LoadingMessage, {})) : null, (0, jsx_runtime_1.jsx)(TextField2, { helperText: "filename", value: filename, onChange: event => {
+                            setFilename(event.target.value);
+                        } }), session.allThemes ? ((0, jsx_runtime_1.jsx)(TextField2, { select: true, label: "Theme", value: themeName, onChange: event => {
+                            setThemeName(event.target.value);
+                        }, children: Object.entries(session.allThemes()).map(([key, val]) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: key, children: val.name || '(Unknown name)' }, key))) })) : null, offscreenCanvas ? ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: rasterizeLayers, onChange: () => {
+                                setRasterizeLayers(val => !val);
+                            } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Note: rasterizing layers not yet supported in this browser, so SVG size may be large" }))] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", type: "submit", onClick: async () => {
+                            setLoading(true);
+                            setError(undefined);
+                            try {
+                                await model.exportSvg({
+                                    rasterizeLayers,
+                                    filename,
+                                    themeName,
+                                });
+                                handleClose();
+                            }
+                            catch (e) {
+                                console.error(e);
+                                setError(e);
+                            }
+                            finally {
+                                setLoading(false);
+                            }
+                        }, children: "Submit" })] })] }));
 }

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

@@ -1,10 +1,9 @@
-import React from 'react';
-import { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model';
 export declare const GridRaw: ({ model, children, }: {
     model: DotplotViewModel;
     children?: React.ReactNode;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default function Grid({ model, children, }: {
     model: DotplotViewModel;
     children?: React.ReactNode;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/DotplotView/components/Grid.js

@@ -1,14 +1,11 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridRaw = void 0;
 exports.default = Grid;
-const react_1 = __importDefault(require("react"));
-const mobx_react_1 = require("mobx-react");
-const material_1 = require("@mui/material");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
 exports.GridRaw = (0, mobx_react_1.observer)(function ({ model, children, }) {
     const { viewWidth, viewHeight, hview, vview } = model;
     const hblocks = hview.dynamicBlocks.contentBlocks;
@@ -22,39 +19,29 @@ exports.GridRaw = (0, mobx_react_1.observer)(function ({ model, children, }) {
     const vbottom = vblocks[0].offsetPx - vview.offsetPx;
     const theme = (0, material_1.useTheme)();
     const stroke = theme.palette.divider;
-    // Uses math.max/min avoid making very large SVG rect offscreen element,
-    // which can sometimes fail to draw
     const rx = Math.max(hbottom, 0);
     const ry = Math.max(viewHeight - vtop, 0);
     const w = Math.min(htop - hbottom, viewWidth);
     const h = Math.min(viewHeight - vbottom - ry, viewHeight);
     let lastx = Number.POSITIVE_INFINITY;
     let lasty = Number.POSITIVE_INFINITY;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("rect", { x: rx, y: ry, width: w, height: h, ...(0, util_1.getFillProps)(theme.palette.background.default) }),
-        react_1.default.createElement("g", null,
-            hblocks.map(region => {
-                const x = region.offsetPx - hview.offsetPx;
-                const render = Math.floor(x) !== Math.floor(lastx);
-                if (render) {
-                    lastx = x;
-                }
-                return render ? (react_1.default.createElement("line", { key: JSON.stringify(region), x1: x, y1: 0, x2: x, y2: viewHeight, ...(0, util_1.getStrokeProps)(stroke) })) : null;
-            }),
-            vblocks.map(region => {
-                const y = viewHeight - (region.offsetPx - vview.offsetPx);
-                const render = Math.floor(y) !== Math.floor(lasty);
-                if (render) {
-                    lasty = y;
-                }
-                return render ? (react_1.default.createElement("line", { key: JSON.stringify(region), x1: 0, y1: y, x2: viewWidth, y2: y, ...(0, util_1.getStrokeProps)(stroke) })) : null;
-            }),
-            react_1.default.createElement("line", { x1: htop, y1: 0, x2: htop, y2: viewHeight, ...(0, util_1.getStrokeProps)(stroke) }),
-            react_1.default.createElement("line", { x1: 0, y1: viewHeight - vtop, x2: viewWidth, y2: viewHeight - vtop, ...(0, util_1.getStrokeProps)(stroke) })),
-        children));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { x: rx, y: ry, width: w, height: h, ...(0, util_1.getFillProps)(theme.palette.background.default) }), (0, jsx_runtime_1.jsxs)("g", { children: [hblocks.map(region => {
+                        const x = region.offsetPx - hview.offsetPx;
+                        const render = Math.floor(x) !== Math.floor(lastx);
+                        if (render) {
+                            lastx = x;
+                        }
+                        return render ? ((0, jsx_runtime_1.jsx)("line", { x1: x, y1: 0, x2: x, y2: viewHeight, ...(0, util_1.getStrokeProps)(stroke) }, JSON.stringify(region))) : null;
+                    }), vblocks.map(region => {
+                        const y = viewHeight - (region.offsetPx - vview.offsetPx);
+                        const render = Math.floor(y) !== Math.floor(lasty);
+                        if (render) {
+                            lasty = y;
+                        }
+                        return render ? ((0, jsx_runtime_1.jsx)("line", { x1: 0, y1: y, x2: viewWidth, y2: y, ...(0, util_1.getStrokeProps)(stroke) }, JSON.stringify(region))) : null;
+                    }), (0, jsx_runtime_1.jsx)("line", { x1: htop, y1: 0, x2: htop, y2: viewHeight, ...(0, util_1.getStrokeProps)(stroke) }), (0, jsx_runtime_1.jsx)("line", { x1: 0, y1: viewHeight - vtop, x2: viewWidth, y2: viewHeight - vtop, ...(0, util_1.getStrokeProps)(stroke) })] }), children] }));
 });
 function Grid({ model, children, }) {
     const { viewWidth, viewHeight } = model;
-    return (react_1.default.createElement("svg", { width: viewWidth, height: viewHeight, style: { background: 'rgba(0,0,0,0.12)' } },
-        react_1.default.createElement(exports.GridRaw, { model: model }, children)));
+    return ((0, jsx_runtime_1.jsx)("svg", { width: viewWidth, height: viewHeight, style: { background: 'rgba(0,0,0,0.12)' }, children: (0, jsx_runtime_1.jsx)(exports.GridRaw, { model: model, children: children }) }));
 }

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

@@ -1,10 +1,9 @@
-import React from 'react';
-import { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model';
 declare const DotplotHeader: ({ model, selection, }: {
     model: DotplotViewModel;
     selection?: {
         width: number;
         height: number;
     };
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default DotplotHeader;

package/dist/DotplotView/components/Header.js

@@ -3,14 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
-const util_1 = require("@jbrowse/core/util");
+const DotplotControls_1 = __importDefault(require("./DotplotControls"));
 const DotplotWarnings_1 = __importDefault(require("./DotplotWarnings"));
 const PanButtons_1 = __importDefault(require("./PanButtons"));
-const DotplotControls_1 = __importDefault(require("./DotplotControls"));
 const useStyles = (0, mui_1.makeStyles)()({
     bp: {
         display: 'flex',
@@ -28,25 +28,6 @@ const useStyles = (0, mui_1.makeStyles)()({
 const DotplotHeader = (0, mobx_react_1.observer)(function ({ model, selection, }) {
     const { classes } = useStyles();
     const { hview, vview, showPanButtons } = model;
-    return (react_1.default.createElement("div", { className: classes.headerBar },
-        react_1.default.createElement(DotplotControls_1.default, { model: model }),
-        react_1.default.createElement(material_1.Typography, { className: classes.bp, variant: "body2", color: "textSecondary" },
-            "x: ",
-            hview.assemblyNames.join(','),
-            " ",
-            (0, util_1.getBpDisplayStr)(hview.currBp),
-            react_1.default.createElement("br", null),
-            "y: ",
-            vview.assemblyNames.join(','),
-            " ",
-            (0, util_1.getBpDisplayStr)(vview.currBp)),
-        selection ? (react_1.default.createElement(material_1.Typography, { className: classes.bp, variant: "body2", color: "textSecondary" },
-            `width:${(0, util_1.getBpDisplayStr)(hview.bpPerPx * selection.width)}`,
-            " ",
-            react_1.default.createElement("br", null),
-            `height:${(0, util_1.getBpDisplayStr)(vview.bpPerPx * selection.height)}`)) : null,
-        react_1.default.createElement("div", { className: classes.spacer }),
-        react_1.default.createElement(DotplotWarnings_1.default, { model: model }),
-        showPanButtons ? react_1.default.createElement(PanButtons_1.default, { model: model }) : null));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes.headerBar, children: [(0, jsx_runtime_1.jsx)(DotplotControls_1.default, { model: model }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { className: classes.bp, variant: "body2", color: "textSecondary", children: ["x: ", hview.assemblyNames.join(','), " ", (0, util_1.getBpDisplayStr)(hview.currBp), (0, jsx_runtime_1.jsx)("br", {}), "y: ", vview.assemblyNames.join(','), " ", (0, util_1.getBpDisplayStr)(vview.currBp)] }), selection ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, { className: classes.bp, variant: "body2", color: "textSecondary", children: [`width:${(0, util_1.getBpDisplayStr)(hview.bpPerPx * selection.width)}`, " ", (0, jsx_runtime_1.jsx)("br", {}), `height:${(0, util_1.getBpDisplayStr)(vview.bpPerPx * selection.height)}`] })) : null, (0, jsx_runtime_1.jsx)("div", { className: classes.spacer }), (0, jsx_runtime_1.jsx)(DotplotWarnings_1.default, { model: model }), showPanButtons ? (0, jsx_runtime_1.jsx)(PanButtons_1.default, { model: model }) : null] }));
 });
 exports.default = DotplotHeader;

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

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

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 { DotplotViewModel } from '../../model';
-declare const Selector: ({ model, assembly1, assembly2, setShowTrackId, }: {
+import type { DotplotViewModel } from '../../model';
+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,44 +1,21 @@
 "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 material_1 = require("@mui/material");
-const tracks_1 = require("@jbrowse/core/util/tracks");
-const util_1 = require("@jbrowse/core/util");
-const ui_1 = require("@jbrowse/core/ui");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const configuration_1 = require("@jbrowse/core/configuration");
-const mobx_react_1 = require("mobx-react");
-// icons
+const ui_1 = require("@jbrowse/core/ui");
 const Icons_1 = require("@jbrowse/core/ui/Icons");
+const util_1 = require("@jbrowse/core/util");
+const tracks_1 = require("@jbrowse/core/util/tracks");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
 function f(track, assembly1, assembly2) {
     const assemblyNames = (0, configuration_1.readConfObject)(track, 'assemblyNames');
     return (assemblyNames.includes(assembly1) &&
         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;
@@ -50,24 +27,16 @@ const Selector = (0, mobx_react_1.observer)(({ model, assembly1, assembly2, setS
     const resetTrack = ((_a = filteredTracks[0]) === null || _a === void 0 ? void 0 : _a.trackId) || '';
     const [value, setValue] = (0, react_1.useState)(resetTrack);
     (0, react_1.useEffect)(() => {
-        // if assembly1/assembly2 changes, then we will want to use this effect to change
-        // the state of the useState because it otherwise gets locked to a stale value
         setValue(resetTrack);
     }, [resetTrack]);
     (0, react_1.useEffect)(() => {
-        // sets track data in a useEffect because the initial load is needed as well as
-        // onChange's to the select box
-        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;