@jbrowse/plugin-dotplot-view 2.17.0 → 3.0.0

package/esm/ServerSideRenderedBlockContent.js

@@ -1,8 +1,9 @@
-import React, { useEffect, useState } from 'react';
-import { makeStyles } from 'tss-react/mui';
-import { Typography } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { LoadingEllipses } from '@jbrowse/core/ui';
+import { Typography } from '@mui/material';
 import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => {
     const bg = theme.palette.action.disabledBackground;
     return {
@@ -24,7 +25,6 @@ const useStyles = makeStyles()(theme => {
     };
 });
 function LoadingMessage() {
-    // only show the loading message after 300ms to prevent excessive flickering
     const [shown, setShown] = useState(false);
     const { classes } = useStyles();
     useEffect(() => {
@@ -35,31 +35,28 @@ function LoadingMessage() {
             clearTimeout(timeout);
         };
     }, []);
-    return shown ? (React.createElement("div", { className: classes.loading },
-        React.createElement(LoadingEllipses, null))) : null;
+    return shown ? (_jsx("div", { className: classes.loading, children: _jsx(LoadingEllipses, {}) })) : null;
 }
 function BlockMessage({ messageText }) {
     const { classes } = useStyles();
-    return (React.createElement("div", { className: classes.blockMessage },
-        React.createElement(Typography, null, messageText)));
+    return (_jsx("div", { className: classes.blockMessage, children: _jsx(Typography, { children: messageText }) }));
 }
 function BlockError({ error }) {
     const { classes } = useStyles();
-    return (React.createElement("div", { className: classes.blockError },
-        React.createElement(Typography, null, `${error}`)));
+    return (_jsx("div", { className: classes.blockError, children: _jsx(Typography, { children: `${error}` }) }));
 }
 const ServerSideRenderedDotplotContent = observer(function ({ model, style, }) {
     if (model.error) {
-        return React.createElement(BlockError, { error: model.error, "data-testid": "reload_button" });
+        return _jsx(BlockError, { error: model.error, "data-testid": "reload_button" });
     }
     else if (model.message) {
-        return React.createElement(BlockMessage, { messageText: model.message });
+        return _jsx(BlockMessage, { messageText: model.message });
     }
     else if (!model.filled) {
-        return React.createElement(LoadingMessage, null);
+        return _jsx(LoadingMessage, {});
     }
     else if (model.shouldDisplay) {
-        return React.createElement("div", { style: style }, model.reactElement);
+        return _jsx("div", { style: style, children: model.reactElement });
     }
     return null;
 });

package/esm/ServerSideSyntenyRendering.d.ts

@@ -1,8 +1,3 @@
-import React from 'react';
-/**
- * A block whose content is rendered outside of the main thread and hydrated by
- * this component.
- */
 interface ModelType {
     imageData: string;
     style: Record<string, string>;
@@ -14,5 +9,5 @@ interface ModelType {
 }
 declare const ServerSideSyntenyRendering: ({ model, }: {
     model: ModelType;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ServerSideSyntenyRendering;

package/esm/ServerSideSyntenyRendering.js

@@ -1,6 +1,7 @@
-import React, { useRef, useState, useEffect } from 'react';
-import { observer } from 'mobx-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
 import { drawImageOntoCanvasContext } from '@jbrowse/core/util/offscreenCanvasPonyfill';
+import { observer } from 'mobx-react';
 const ServerSideSyntenyRendering = observer(function ({ model, }) {
     const { imageData, style, renderProps } = model;
     const { width, height, highResolutionScaling = 1 } = renderProps;
@@ -15,6 +16,6 @@ const ServerSideSyntenyRendering = observer(function ({ model, }) {
         drawImageOntoCanvasContext(imageData, context);
         setDone(true);
     }, [imageData]);
-    return (React.createElement("canvas", { "data-testid": `prerendered_canvas${done ? '_done' : ''}`, ref: featureCanvas, width: width * highResolutionScaling, height: height * highResolutionScaling, style: { width, height, ...style } }));
+    return (_jsx("canvas", { "data-testid": `prerendered_canvas${done ? '_done' : ''}`, ref: featureCanvas, width: width * highResolutionScaling, height: height * highResolutionScaling, style: { width, height, ...style } }));
 });
 export default ServerSideSyntenyRendering;

package/esm/index.d.ts

@@ -1,5 +1,5 @@
 import Plugin from '@jbrowse/core/Plugin';
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default class DotplotPlugin extends Plugin {
     name: string;
     install(pluginManager: PluginManager): void;

package/esm/index.js

@@ -1,14 +1,12 @@
 import Plugin from '@jbrowse/core/Plugin';
 import { isAbstractMenuManager } from '@jbrowse/core/util';
-// icons
 import TimelineIcon from '@mui/icons-material/Timeline';
-// locals
-import DotplotViewF from './DotplotView';
+import ComparativeRenderer from './ComparativeRenderer';
 import DotplotDisplayF from './DotplotDisplay';
+import DotplotReadVsRefMenuItem from './DotplotReadVsRef';
 import DotplotRendererF from './DotplotRenderer';
+import DotplotViewF from './DotplotView';
 import LaunchDotplotViewF from './LaunchDotplotView';
-import ComparativeRenderer from './ComparativeRenderer';
-import DotplotReadVsRefMenuItem from './DotplotReadVsRef';
 export default class DotplotPlugin extends Plugin {
     constructor() {
         super(...arguments);
@@ -20,7 +18,6 @@ export default class DotplotPlugin extends Plugin {
         DotplotRendererF(pluginManager);
         LaunchDotplotViewF(pluginManager);
         DotplotReadVsRefMenuItem(pluginManager);
-        // install our comparative rendering rpc callback
         pluginManager.addRpcMethod(() => new ComparativeRenderer(pluginManager));
     }
     configure(pluginManager) {

package/esm/util.d.ts

@@ -1,4 +1,4 @@
-import { Feature } from '@jbrowse/core/util';
+import type { Feature } from '@jbrowse/core/util';
 export interface ReducedFeature {
     refName: string;
     start: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-dotplot-view",
-  "version": "2.17.0",
+  "version": "3.0.0",
   "description": "JBrowse 2 dotplot view",
   "keywords": [
     "jbrowse",
@@ -36,11 +36,9 @@
     "clean": "rimraf dist esm *.tsbuildinfo"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.3",
     "@mui/icons-material": "^6.0.0",
     "@mui/x-data-grid": "^7.0.0",
     "@types/file-saver": "^2.0.1",
-    "clone": "^2.1.2",
     "file-saver": "^2.0.0"
   },
   "peerDependencies": {
@@ -61,5 +59,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "eed30b5e671f8f7823652d7cecc51aa89226de46"
+  "gitHead": "2c6897f1fa732b1db5b094d1dca197e333e95319"
 }

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

@@ -1,11 +0,0 @@
-import React from 'react';
-import { SnapshotIn } from 'mobx-state-tree';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-type Conf = SnapshotIn<AnyConfigurationModel>;
-declare const ImportCustomTrack: ({ assembly1, assembly2, setSessionTrackData, }: {
-    sessionTrackData: Conf;
-    assembly1: string;
-    assembly2: string;
-    setSessionTrackData: (arg: Conf) => void;
-}) => React.JSX.Element;
-export default ImportCustomTrack;

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

@@ -1,194 +0,0 @@
-"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 ui_1 = require("@jbrowse/core/ui");
-const mobx_react_1 = require("mobx-react");
-const util_1 = require("./util");
-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)`);
-    }
-}
-const ImportCustomTrack = (0, mobx_react_1.observer)(function ({ assembly1, assembly2, setSessionTrackData, }) {
-    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()}`;
-                setError(undefined);
-                setSessionTrackData({
-                    trackId,
-                    name: fn,
-                    assemblyNames: [assembly2, assembly1],
-                    type: 'SyntenyTrack',
-                    adapter: getAdapter({
-                        radioOption,
-                        assembly1,
-                        assembly2,
-                        fileLocation,
-                        indexFileLocation,
-                        bed1Location,
-                        bed2Location,
-                    }),
-                });
-            }
-        }
-        catch (e) {
-            console.error(e);
-            setError(e);
-        }
-    }, [
-        fileName,
-        assembly1,
-        assembly2,
-        bed1Location,
-        bed2Location,
-        fileLocation,
-        indexFileLocation,
-        radioOption,
-        setSessionTrackData,
-    ]);
-    return (react_1.default.createElement(material_1.Paper, { style: { padding: 12 } },
-        error ? react_1.default.createElement(ui_1.ErrorMessage, { error: error }) : null,
-        react_1.default.createElement(material_1.Typography, { style: { textAlign: 'center' } }, "Add a .paf, .out (MashMap), .delta (Mummer), .chain, .anchors or .anchors.simple (MCScan) file to view. These file types can also be gzipped. The first assembly should be the query sequence (e.g. left column of the PAF) and the second assembly should be the target sequence (e.g. right column of the PAF)"),
-        react_1.default.createElement(material_1.RadioGroup, { value: radioOption, onChange: event => {
-                setValue(event.target.value);
-            } },
-            react_1.default.createElement(material_1.Grid, { container: true, justifyContent: "center" },
-                react_1.default.createElement(material_1.Grid, { item: true },
-                    react_1.default.createElement(material_1.FormControlLabel, { value: ".paf", control: react_1.default.createElement(material_1.Radio, null), label: ".paf" })),
-                react_1.default.createElement(material_1.Grid, { item: true },
-                    react_1.default.createElement(material_1.FormControlLabel, { value: ".out", control: react_1.default.createElement(material_1.Radio, null), label: ".out" })),
-                react_1.default.createElement(material_1.Grid, { item: true },
-                    react_1.default.createElement(material_1.FormControlLabel, { value: ".delta", control: react_1.default.createElement(material_1.Radio, null), label: ".delta" })),
-                react_1.default.createElement(material_1.Grid, { item: true },
-                    react_1.default.createElement(material_1.FormControlLabel, { value: ".chain", control: react_1.default.createElement(material_1.Radio, null), label: ".chain" })),
-                react_1.default.createElement(material_1.Grid, { item: true },
-                    react_1.default.createElement(material_1.FormControlLabel, { value: ".anchors", control: react_1.default.createElement(material_1.Radio, null), label: ".anchors" })),
-                react_1.default.createElement(material_1.Grid, { item: true },
-                    react_1.default.createElement(material_1.FormControlLabel, { value: ".anchors.simple", control: react_1.default.createElement(material_1.Radio, null), label: ".anchors.simple" })),
-                react_1.default.createElement(material_1.Grid, { item: true },
-                    react_1.default.createElement(material_1.FormControlLabel, { value: ".pif.gz", control: react_1.default.createElement(material_1.Radio, null), label: ".pif.gz" })))),
-        react_1.default.createElement(material_1.Grid, { container: true, justifyContent: "center" },
-            react_1.default.createElement(material_1.Grid, { item: true }, value === '.anchors' || value === '.anchors.simple' ? (react_1.default.createElement("div", null,
-                react_1.default.createElement("div", { style: { margin: 20 } },
-                    "Open the ",
-                    value,
-                    " and .bed files for both genome assemblies from the MCScan (Python version) pipeline",
-                    ' ',
-                    react_1.default.createElement("a", { href: "https://github.com/tanghaibao/jcvi/wiki/MCscan-(Python-version)" }, "(more info)")),
-                react_1.default.createElement("div", { style: { display: 'flex' } },
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement(ui_1.FileSelector, { name: ".anchors file", description: "", location: fileLocation, setLocation: loc => {
-                                setFileLocation(loc);
-                            } })),
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement(ui_1.FileSelector, { name: "genome 1 .bed (left column of anchors file)", description: "", location: bed1Location, setLocation: loc => {
-                                setBed1Location(loc);
-                            } })),
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement(ui_1.FileSelector, { name: "genome 2 .bed (right column of anchors file)", description: "", location: bed2Location, setLocation: loc => {
-                                setBed2Location(loc);
-                            } }))))) : value === '.pif.gz' ? (react_1.default.createElement("div", { style: { display: 'flex' } },
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement(ui_1.FileSelector, { name: `${value} location`, description: "", location: fileLocation, setLocation: loc => {
-                            setFileLocation(loc);
-                        } })),
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement(ui_1.FileSelector, { name: `${value} index location`, description: "", location: indexFileLocation, setLocation: loc => {
-                            setIndexFileLocation(loc);
-                        } })))) : (react_1.default.createElement(ui_1.FileSelector, { name: value ? `${value} location` : '', description: "", location: fileLocation, setLocation: loc => {
-                    setFileLocation(loc);
-                } }))))));
-});
-exports.default = ImportCustomTrack;

package/esm/DotplotView/components/ImportForm/ImportCustomTrack.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { SnapshotIn } from 'mobx-state-tree';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-type Conf = SnapshotIn<AnyConfigurationModel>;
-declare const ImportCustomTrack: ({ assembly1, assembly2, setSessionTrackData, }: {
-    sessionTrackData: Conf;
-    assembly1: string;
-    assembly2: string;
-    setSessionTrackData: (arg: Conf) => void;
-}) => React.JSX.Element;
-export default ImportCustomTrack;

package/esm/DotplotView/components/ImportForm/ImportCustomTrack.js

@@ -1,169 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { FormControlLabel, Grid, Paper, Radio, RadioGroup, Typography, } from '@mui/material';
-import { ErrorMessage, FileSelector } from '@jbrowse/core/ui';
-import { observer } from 'mobx-react';
-import { basename, extName, getName, stripGz } from './util';
-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)`);
-    }
-}
-const ImportCustomTrack = observer(function ({ assembly1, assembly2, setSessionTrackData, }) {
-    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()}`;
-                setError(undefined);
-                setSessionTrackData({
-                    trackId,
-                    name: fn,
-                    assemblyNames: [assembly2, assembly1],
-                    type: 'SyntenyTrack',
-                    adapter: getAdapter({
-                        radioOption,
-                        assembly1,
-                        assembly2,
-                        fileLocation,
-                        indexFileLocation,
-                        bed1Location,
-                        bed2Location,
-                    }),
-                });
-            }
-        }
-        catch (e) {
-            console.error(e);
-            setError(e);
-        }
-    }, [
-        fileName,
-        assembly1,
-        assembly2,
-        bed1Location,
-        bed2Location,
-        fileLocation,
-        indexFileLocation,
-        radioOption,
-        setSessionTrackData,
-    ]);
-    return (React.createElement(Paper, { style: { padding: 12 } },
-        error ? React.createElement(ErrorMessage, { error: error }) : null,
-        React.createElement(Typography, { style: { textAlign: 'center' } }, "Add a .paf, .out (MashMap), .delta (Mummer), .chain, .anchors or .anchors.simple (MCScan) file to view. These file types can also be gzipped. The first assembly should be the query sequence (e.g. left column of the PAF) and the second assembly should be the target sequence (e.g. right column of the PAF)"),
-        React.createElement(RadioGroup, { value: radioOption, onChange: event => {
-                setValue(event.target.value);
-            } },
-            React.createElement(Grid, { container: true, justifyContent: "center" },
-                React.createElement(Grid, { item: true },
-                    React.createElement(FormControlLabel, { value: ".paf", control: React.createElement(Radio, null), label: ".paf" })),
-                React.createElement(Grid, { item: true },
-                    React.createElement(FormControlLabel, { value: ".out", control: React.createElement(Radio, null), label: ".out" })),
-                React.createElement(Grid, { item: true },
-                    React.createElement(FormControlLabel, { value: ".delta", control: React.createElement(Radio, null), label: ".delta" })),
-                React.createElement(Grid, { item: true },
-                    React.createElement(FormControlLabel, { value: ".chain", control: React.createElement(Radio, null), label: ".chain" })),
-                React.createElement(Grid, { item: true },
-                    React.createElement(FormControlLabel, { value: ".anchors", control: React.createElement(Radio, null), label: ".anchors" })),
-                React.createElement(Grid, { item: true },
-                    React.createElement(FormControlLabel, { value: ".anchors.simple", control: React.createElement(Radio, null), label: ".anchors.simple" })),
-                React.createElement(Grid, { item: true },
-                    React.createElement(FormControlLabel, { value: ".pif.gz", control: React.createElement(Radio, null), label: ".pif.gz" })))),
-        React.createElement(Grid, { container: true, justifyContent: "center" },
-            React.createElement(Grid, { item: true }, value === '.anchors' || value === '.anchors.simple' ? (React.createElement("div", null,
-                React.createElement("div", { style: { margin: 20 } },
-                    "Open the ",
-                    value,
-                    " and .bed files for both genome assemblies from the MCScan (Python version) pipeline",
-                    ' ',
-                    React.createElement("a", { href: "https://github.com/tanghaibao/jcvi/wiki/MCscan-(Python-version)" }, "(more info)")),
-                React.createElement("div", { style: { display: 'flex' } },
-                    React.createElement("div", null,
-                        React.createElement(FileSelector, { name: ".anchors file", description: "", location: fileLocation, setLocation: loc => {
-                                setFileLocation(loc);
-                            } })),
-                    React.createElement("div", null,
-                        React.createElement(FileSelector, { name: "genome 1 .bed (left column of anchors file)", description: "", location: bed1Location, setLocation: loc => {
-                                setBed1Location(loc);
-                            } })),
-                    React.createElement("div", null,
-                        React.createElement(FileSelector, { name: "genome 2 .bed (right column of anchors file)", description: "", location: bed2Location, setLocation: loc => {
-                                setBed2Location(loc);
-                            } }))))) : value === '.pif.gz' ? (React.createElement("div", { style: { display: 'flex' } },
-                React.createElement("div", null,
-                    React.createElement(FileSelector, { name: `${value} location`, description: "", location: fileLocation, setLocation: loc => {
-                            setFileLocation(loc);
-                        } })),
-                React.createElement("div", null,
-                    React.createElement(FileSelector, { name: `${value} index location`, description: "", location: indexFileLocation, setLocation: loc => {
-                            setIndexFileLocation(loc);
-                        } })))) : (React.createElement(FileSelector, { name: value ? `${value} location` : '', description: "", location: fileLocation, setLocation: loc => {
-                    setFileLocation(loc);
-                } }))))));
-});
-export default ImportCustomTrack;