diff --git a/package.json b/package.json index 7391d46..999cb0f 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-query": "^3.39.3", + "react-router-dom": "^6.8.1", "smiles-drawer": "^2.1.7" }, "devDependencies": { diff --git a/src/App.tsx b/src/App.tsx index fb7247b..4e1b035 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,98 +1,7 @@ -import { Field, Form, Formik, useFormikContext } from "formik"; -import { useEffect, useState } from "react"; import "./App.css"; -import SyntheticRoute from "./components/SyntheticRoute"; -import { useRouteSearch } from "./services/routeSearch"; -import { RouteSearchParams } from "./services/routeSearch/type"; function App() { - const [params, setParams] = useState({ - target: "CCOC(=O)C(F)C(NCC(C)C)", - max_rxn_steps: 3, - n_path: 5, - }); - const { data, isLoading } = useRouteSearch(params); - const [displayStyle, setDisplayStyle] = useState("rdKit"); - - return ( -
- - initialValues={params} - onSubmit={(value) => setParams(value)} - > -
- - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - -
- -
- - -
- - - {!isLoading && data?.data ? ( - - ) : ( - "Loading..." - )} -
- ); + return
App
; } export default App; diff --git a/src/main.tsx b/src/main.tsx index 0f5f738..4ded68b 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,13 +3,24 @@ import ReactDOM from "react-dom/client"; import App from "./App"; import "./index.css"; import { QueryClient, QueryClientProvider, useQuery } from "react-query"; +import { createBrowserRouter, RouterProvider } from "react-router-dom"; +import RouteSearch from "./pages/route-search"; +import Editor from "./pages/editor"; const queryClient = new QueryClient(); +const router = createBrowserRouter([ + { path: "/", element: }, + { + path: "route-search", + element: , + }, + { path: "editor", element: }, +]); ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - + ); diff --git a/src/pages/editor/index.tsx b/src/pages/editor/index.tsx new file mode 100644 index 0000000..2438641 --- /dev/null +++ b/src/pages/editor/index.tsx @@ -0,0 +1,7 @@ +import { FC } from "react"; + +const Editor: FC = () => { + return <>Editor; +}; + +export default Editor; diff --git a/src/pages/route-search/index.css b/src/pages/route-search/index.css new file mode 100644 index 0000000..22663a3 --- /dev/null +++ b/src/pages/route-search/index.css @@ -0,0 +1,43 @@ +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; + width: calc(100vw - 50px); +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} diff --git a/src/pages/route-search/index.tsx b/src/pages/route-search/index.tsx new file mode 100644 index 0000000..dd3728e --- /dev/null +++ b/src/pages/route-search/index.tsx @@ -0,0 +1,98 @@ +import { Field, Form, Formik } from "formik"; +import { FC, useState } from "react"; +import "./index.css"; +import SyntheticRoute from "../../components/SyntheticRoute"; +import { useRouteSearch } from "../../services/routeSearch"; +import { RouteSearchParams } from "../../services/routeSearch/type"; + +const RouteSearch: FC = () => { + const [params, setParams] = useState({ + target: "CCOC(=O)C(F)C(NCC(C)C)", + max_rxn_steps: 3, + n_path: 5, + }); + const { data, isLoading } = useRouteSearch(params); + const [displayStyle, setDisplayStyle] = useState("rdKit"); + + return ( +
+ + initialValues={params} + onSubmit={(value) => setParams(value)} + > +
+ + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + +
+ +
+ + +
+ + + {!isLoading && data?.data ? ( + + ) : ( + "Loading..." + )} +
+ ); +}; + +export default RouteSearch; diff --git a/yarn.lock b/yarn.lock index f885f84..5d612c5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -371,6 +371,11 @@ resolved "https://registry.npmjs.org/@rdkit/rdkit/-/rdkit-2022.9.4-1.0.0.tgz" integrity sha512-6mvNFZ8aHXDN+ahopW+VA/8uouqypkp7BsB0OveeinFDZgm9fN6+1/lOtvDJAC/azlzu5AQfoVhcXe7b4txtSA== +"@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== + "@types/lodash@^4.14.191": version "4.14.191" resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz" @@ -875,6 +880,21 @@ react-refresh@^0.14.0: resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz" integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ== +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@^18.2.0: version "18.2.0" resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"