{
+
+ // option to either load from URL or upload a file
+ const [genbankString, setGenbankString] = useState(null);
+ const loadFromUrl = async (url) => {
+ const response = await fetch(url);
+ const text = await response.text();
+ setGenbankString(text);
+ };
+
+ const loadFromFile = async (file) => {
+
+ const text = await file.text();
+
+ setGenbankString(text);
+ setLoaded(true);
+
+ };
+
+ const [url, setUrl] = useState("");
+
+ const [gbUrl, setGbUrl] = useQueryState("gb")
+ const [loaded, setLoaded] = useQueryState("loaded")
+
+ useEffect(() => {
+ if (gbUrl) {
+ loadFromUrl(gbUrl);
+ }
+ }, [gbUrl]);
+
+ const ready = genbankString && (loaded || gbUrl);
+
+ const [beingDraggedOver, setBeingDraggedOver] = useState(false);
+
+
+
+
+ // create UI for loading from URL or file
+ return (<>
+ {ready &&
}
+ {!ready && (
+
+
{
+ e.preventDefault();
+ setBeingDraggedOver(true);
+}}
+// handle dragleave
+onDragLeave={(e) => {
+ e.preventDefault();
+ setBeingDraggedOver(false);
+}}
+// handle drop
+onDrop={(e) => {
+
+ e.preventDefault();
+ setBeingDraggedOver(false);
+ loadFromFile(e.dataTransfer.files[0]);
+}}
+
+
+>
+
+
+
+
+
+ Gensplore
+
+
+
+
+
Upload a GenBank file , or drag and drop
+ {beingDraggedOver && (
+
+ Drop file now to load
+
+ )}
+
loadFromFile(e.target.files[0])}
+ />
+
+
+
+
+
Or select an example:
+
+ -
+
+
+ -
+
+
+
+
+
+
+
+ )}
+ );
+};
+
+
+
+
+
+export default App;
diff --git a/src/index.js b/src/index.js
index d563c0f..d740e98 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
+import { BrowserRouter as Router } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
+
+
+
);
diff --git a/yarn.lock b/yarn.lock
index e65ae7f..3d8b7bf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1592,6 +1592,11 @@
schema-utils "^3.0.0"
source-map "^0.7.3"
+"@remix-run/router@1.3.2":
+ version "1.3.2"
+ resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.3.2.tgz#58cd2bd25df2acc16c628e1b6f6150ea6c7455bc"
+ integrity sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA==
+
"@rollup/plugin-babel@^5.2.0":
version "5.3.1"
resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -7559,7 +7564,7 @@ q@^1.1.2:
resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
-qs@6.11.0:
+qs@6.11.0, qs@^6.11.0:
version "6.11.0"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
@@ -7715,6 +7720,21 @@ react-refresh@^0.11.0:
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
+react-router-dom@^6.8.1:
+ version "6.8.1"
+ resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.8.1.tgz#7e136b67d9866f55999e9a8482c7008e3c575ac9"
+ integrity sha512-67EXNfkQgf34P7+PSb6VlBuaacGhkKn3kpE51+P6zYSG2kiRoumXEL6e27zTa9+PGF2MNXbgIUHTVlleLbIcHQ==
+ dependencies:
+ "@remix-run/router" "1.3.2"
+ react-router "6.8.1"
+
+react-router@6.8.1:
+ version "6.8.1"
+ resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.8.1.tgz#e362caf93958a747c649be1b47cd505cf28ca63e"
+ integrity sha512-Jgi8BzAJQ8MkPt8ipXnR73rnD7EmZ0HFFb7jdQU24TynGW1Ooqin2KVDN9voSC+7xhqbbCd2cjGUepb6RObnyg==
+ dependencies:
+ "@remix-run/router" "1.3.2"
+
react-scripts@5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"