@jbrowse/plugin-linear-comparative-view 2.17.0 → 3.0.0

package/esm/LinearSyntenyDisplay/model.d.ts

@@ -1,6 +1,6 @@
-import { Instance } from 'mobx-state-tree';
-import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
-import { Feature } from '@jbrowse/core/util';
+import type { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
+import type { Feature } from '@jbrowse/core/util';
+import type { Instance } from 'mobx-state-tree';
 interface Pos {
     offsetPx: number;
 }
@@ -12,11 +12,6 @@ export interface FeatPos {
     f: Feature;
     cigar: string[];
 }
-/**
- * #stateModel LinearSyntenyDisplay
- * extends
- * - [LinearComparativeDisplay](../linearcomparativedisplay)
- */
 declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     type: import("mobx-state-tree").ISimpleType<string>;
@@ -25,13 +20,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     type: import("mobx-state-tree").ISimpleType<"LinearComparativeDisplay">;
     configuration: AnyConfigurationSchemaType;
 } & {
-    /**
-     * #property
-     */
     type: import("mobx-state-tree").ISimpleType<"LinearSyntenyDisplay">;
-    /**
-     * #property
-     */
     configuration: AnyConfigurationSchemaType;
 }, {
     rendererTypeName: string;
@@ -92,7 +81,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     setRpcDriverName(rpcDriverName: string): void;
     reload(): void;
 } & {
-    renderInProgress: AbortController | undefined;
+    renderInProgress: string | undefined;
     features: Feature[] | undefined;
     message: string | undefined;
 } & {
@@ -113,12 +102,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
                     setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
                         [x: string]: any;
                     } & import("mobx-state-tree/dist/internal").NonEmptyObject & any & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
-                } & import("mobx-state-tree" /**
-                 * #volatile
-                 * canvas for drawing mouseover shading this is separate from the other
-                 * code for speed: don't have to redraw entire canvas to do a feature's
-                 * mouseover shading
-                 */).IStateTreeNode<AnyConfigurationSchemaType>);
+                } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
             } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
@@ -179,7 +163,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             setRpcDriverName(rpcDriverName: string): void;
             reload(): void;
         } & {
-            renderInProgress: AbortController | undefined;
+            renderInProgress: string | undefined;
             features: Feature[] | undefined;
             message: string | undefined;
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
@@ -248,14 +232,14 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             setRpcDriverName(rpcDriverName: string): void;
             reload(): void;
         } & {
-            renderInProgress: AbortController | undefined;
+            renderInProgress: string | undefined;
             features: Feature[] | undefined;
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
         highResolutionScaling: number;
     };
 } & {
-    setLoading(abortController: AbortController): void;
+    setLoading(newStopToken: string): void;
     setMessage(messageText: string): void;
     setRendered(args?: {
         features: Feature[];
@@ -264,106 +248,28 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     afterAttach(): void;
 } & {
-    /**
-     * #volatile
-     * canvas used for drawing visible screen
-     */
     mainCanvas: HTMLCanvasElement | null;
-    /**
-     * #volatile
-     * canvas used for drawing click map with feature ids this renders a
-     * unique color per alignment, so that it can be re-traced after a
-     * feature click with getImageData at that pixel
-     */
     clickMapCanvas: HTMLCanvasElement | null;
-    /**
-     * #volatile
-     * canvas used for drawing click map with cigar data this can show if you
-     * are mousing over a insertion/deletion. it is similar in purpose to the
-     * clickMapRef but was not feasible to pack this into the clickMapRef
-     */
     cigarClickMapCanvas: HTMLCanvasElement | null;
-    /**
-     * #volatile
-     * canvas for drawing mouseover shading this is separate from the other
-     * code for speed: don't have to redraw entire canvas to do a feature's
-     * mouseover shading
-     */
     mouseoverCanvas: HTMLCanvasElement | null;
-    /**
-     * #volatile
-     * assigned by reaction
-     */
     featPositions: FeatPos[];
-    /**
-     * #volatile
-     * currently mouse'd over feature
-     */
     mouseoverId: string | undefined;
-    /**
-     * #volatile
-     * currently click'd over feature
-     */
     clickId: string | undefined;
-    /**
-     * #volatile
-     * currently mouseover'd CIGAR subfeature
-     */
     cigarMouseoverId: number;
 } & {
-    /**
-     * #action
-     */
     setFeatPositions(arg: FeatPos[]): void;
-    /**
-     * #action
-     */
     setMainCanvasRef(ref: HTMLCanvasElement | null): void;
-    /**
-     * #action
-     */
     setClickMapCanvasRef(ref: HTMLCanvasElement | null): void;
-    /**
-     * #action
-     */
     setCigarClickMapCanvasRef(ref: HTMLCanvasElement | null): void;
-    /**
-     * #action
-     */
     setMouseoverCanvasRef(ref: HTMLCanvasElement | null): void;
-    /**
-     * #action
-     */
     setMouseoverId(arg?: string): void;
-    /**
-     * #action
-     */
     setCigarMouseoverId(arg: number): void;
-    /**
-     * #action
-     */
     setClickId(arg?: string): void;
 } & {
-    /**
-     * #getter
-     */
     readonly adapterConfig: any;
-    /**
-     * #getter
-     */
     readonly trackIds: string[];
-    /**
-     * #getter
-     */
     readonly numFeats: number;
-    /**
-     * #getter
-     * used for synteny svg rendering
-     */
     readonly ready: boolean;
-    /**
-     * #getter
-     */
     readonly featMap: {
         [k: string]: FeatPos;
     };

package/esm/LinearSyntenyDisplay/model.js

@@ -1,126 +1,49 @@
+import { ConfigurationReference, getConf } from '@jbrowse/core/configuration';
 import { types } from 'mobx-state-tree';
-import { getConf, ConfigurationReference, } from '@jbrowse/core/configuration';
-// locals
 import baseModelFactory from '../LinearComparativeDisplay/stateModelFactory';
-/**
- * #stateModel LinearSyntenyDisplay
- * extends
- * - [LinearComparativeDisplay](../linearcomparativedisplay)
- */
 function stateModelFactory(configSchema) {
     return types
         .compose('LinearSyntenyDisplay', baseModelFactory(configSchema), types.model({
-        /**
-         * #property
-         */
         type: types.literal('LinearSyntenyDisplay'),
-        /**
-         * #property
-         */
         configuration: ConfigurationReference(configSchema),
     }))
         .volatile(() => ({
-        /**
-         * #volatile
-         * canvas used for drawing visible screen
-         */
         mainCanvas: null,
-        /**
-         * #volatile
-         * canvas used for drawing click map with feature ids this renders a
-         * unique color per alignment, so that it can be re-traced after a
-         * feature click with getImageData at that pixel
-         */
         clickMapCanvas: null,
-        /**
-         * #volatile
-         * canvas used for drawing click map with cigar data this can show if you
-         * are mousing over a insertion/deletion. it is similar in purpose to the
-         * clickMapRef but was not feasible to pack this into the clickMapRef
-         */
         cigarClickMapCanvas: null,
-        /**
-         * #volatile
-         * canvas for drawing mouseover shading this is separate from the other
-         * code for speed: don't have to redraw entire canvas to do a feature's
-         * mouseover shading
-         */
         mouseoverCanvas: null,
-        /**
-         * #volatile
-         * assigned by reaction
-         */
         featPositions: [],
-        /**
-         * #volatile
-         * currently mouse'd over feature
-         */
         mouseoverId: undefined,
-        /**
-         * #volatile
-         * currently click'd over feature
-         */
         clickId: undefined,
-        /**
-         * #volatile
-         * currently mouseover'd CIGAR subfeature
-         */
         cigarMouseoverId: -1,
     }))
         .actions(self => ({
-        /**
-         * #action
-         */
         setFeatPositions(arg) {
             self.featPositions = arg;
         },
-        /**
-         * #action
-         */
         setMainCanvasRef(ref) {
             self.mainCanvas = ref;
         },
-        /**
-         * #action
-         */
         setClickMapCanvasRef(ref) {
             self.clickMapCanvas = ref;
         },
-        /**
-         * #action
-         */
         setCigarClickMapCanvasRef(ref) {
             self.cigarClickMapCanvas = ref;
         },
-        /**
-         * #action
-         */
         setMouseoverCanvasRef(ref) {
             self.mouseoverCanvas = ref;
         },
-        /**
-         * #action
-         */
         setMouseoverId(arg) {
             self.mouseoverId = arg;
         },
-        /**
-         * #action
-         */
         setCigarMouseoverId(arg) {
             self.cigarMouseoverId = arg;
         },
-        /**
-         * #action
-         */
         setClickId(arg) {
             self.clickId = arg;
         },
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get adapterConfig() {
             return {
                 name: self.parentTrack.configuration.adapter.type,
@@ -128,35 +51,21 @@ function stateModelFactory(configSchema) {
                 ...getConf(self.parentTrack, 'adapter'),
             };
         },
-        /**
-         * #getter
-         */
         get trackIds() {
             return getConf(self, 'trackIds');
         },
-        /**
-         * #getter
-         */
         get numFeats() {
             return self.featPositions.length;
         },
-        /**
-         * #getter
-         * used for synteny svg rendering
-         */
         get ready() {
             return this.numFeats > 0;
         },
-        /**
-         * #getter
-         */
         get featMap() {
             return Object.fromEntries(self.featPositions.map(f => [f.f.id(), f]));
         },
     }))
         .actions(self => ({
         afterAttach() {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
             ;
             (async () => {
                 try {

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

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

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

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

package/esm/LinearSyntenyView/components/Icons.js

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

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

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

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

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

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

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