diff --git a/package.json b/package.json index fef8067..62775d7 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "lint": "eslint .", "preview": "vite preview", "test": "vitest run", - "watch": "vitest watch --ui" + "watch": "vitest watch --ui", + "tsc": "tsc -b" }, "dependencies": { "3dmol": "^2.4.0", @@ -29,6 +30,7 @@ "ndarray": "^1.0.19", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.3.0", "react-router-dom": "^6.26.2", "three": "^0.169.0" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0f6de9d..35e7cb9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -59,6 +59,9 @@ importers: react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) + react-icons: + specifier: ^5.3.0 + version: 5.3.0(react@18.3.1) react-router-dom: specifier: ^6.26.2 version: 6.26.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1852,6 +1855,11 @@ packages: peerDependencies: react: '*' + react-icons@5.3.0: + resolution: {integrity: sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==} + peerDependencies: + react: '*' + react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -4143,6 +4151,10 @@ snapshots: dependencies: react: 18.3.1 + react-icons@5.3.0(react@18.3.1): + dependencies: + react: 18.3.1 + react-is@16.13.1: {} react-is@17.0.2: {} diff --git a/src/App.tsx b/src/App.tsx index 6cace01..6e7fed9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,14 +3,50 @@ import { Route, Routes } from "react-router-dom"; import GraphPage from "./GraphPage"; import MoleculeViewer from "./components/MoleculeViewer"; +import { useMediaQuery, CssBaseline, Stack } from "@mui/material"; +import { useState, useMemo } from "react"; + +import { createTheme, ThemeProvider } from "@mui/material/styles"; + +import Header from "./components/Header"; +import WelcomePage from "./components/WelcomePage"; + function App() { + const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)"); + const [mode, setMode] = useState<"light" | "dark">( + prefersDarkMode ? "dark" : "light" + ); + const colorMode = useMemo( + () => ({ + toggleColorMode: () => { + setMode((prevMode) => (prevMode === "light" ? "dark" : "light")); + }, + }), + [] + ); + + const theme = useMemo( + () => + createTheme({ + palette: { + mode, + }, + }), + [mode] + ); + return ( - <> - - } /> - } /> - - + + + +
+ + } /> + } /> + } /> + + + ); } diff --git a/src/GraphPage.tsx b/src/GraphPage.tsx index 0c20e90..1b039d2 100644 --- a/src/GraphPage.tsx +++ b/src/GraphPage.tsx @@ -1,4 +1,3 @@ -import SideDrawer from "./components/SideDrawer"; import "@h5web/lib/styles.css"; import { Domain, @@ -10,7 +9,7 @@ import { TooltipMesh, } from "@h5web/lib"; import React, { useState } from "react"; -import { Box, Button, Typography } from "@mui/material"; +import { Box, Button, Stack, Typography } from "@mui/material"; import { datxvalues, datyvalues, @@ -23,12 +22,12 @@ import { import { ReactElement } from "react"; export default function GraphPage() { - const [xdomain, setxDomain] = useState(); - const [ydomain, setyDomain] = useState(); - const [xValues, setXValues] = useState([]); - const [yValues, setYValues] = useState([]); - const [xValues2, setXValues2] = useState([]); - const [yValues2, setYValues2] = useState([]); + const [xdomain, setxDomain] = useState([0, 1]); + const [ydomain, setyDomain] = useState([0, 1]); + const [xValues, setXValues] = useState([0]); + const [yValues, setYValues] = useState([0]); + const [xValues2, setXValues2] = useState([0]); + const [yValues2, setYValues2] = useState([0]); function stkFilePreprocessing(content: string) { const lines = content.split("\n"); @@ -80,8 +79,10 @@ export default function GraphPage() { setXValues(xVals); setYValues(yVals); - setxDomain(getDomain(xVals)); - setyDomain(getDomain(yVals)); + const xdom = getDomain(xVals); + const ydom = getDomain(yVals); + setxDomain(xdom ? xdom : xdomain); + setyDomain(ydom ? ydom : ydomain); }; reader.readAsText(file); // Read the file as text @@ -115,8 +116,10 @@ export default function GraphPage() { setXValues2(xVals); setYValues2(yVals); - setxDomain(getDomain(xVals)); - setyDomain(getDomain(yVals)); + const xdom = getDomain(xVals); + const ydom = getDomain(yVals); + setxDomain(xdom ? xdom : xdomain); + setyDomain(ydom ? ydom : ydomain); }; reader.readAsText(file); // Read the file as text @@ -132,8 +135,10 @@ export default function GraphPage() { }; const exampleGraph = () => { - setxDomain(getDomain(xdomainvalues)); - setyDomain(getDomain(ydomainvalues)); + const xdom = getDomain(xdomainvalues); + const ydom = getDomain(ydomainvalues); + setxDomain(xdom ? xdom : xdomain); + setyDomain(ydom ? ydom : ydomain); setXValues(stkxvalues); setYValues(stkyvalues); setXValues2(datxvalues); @@ -141,57 +146,101 @@ export default function GraphPage() { }; return ( - <> - - - ORCA Result Viewer - - - Upload `.stk` or `.dat` file to visualize - - - - - - {ydomain && xdomain ? ( // Abscissa refers to x axis and ordinate refers to the y axis - - - - - - - - ) : ( - <> -

- Please upload a valid '.dat' file in the first and a '.stk' file - in the second. -

- - - )} - - + + + + ORCA Result Viewer + + + + Upload `.stk` or `.dat` file to visualize + + + + + + + + + + + + + + + + + // <> + // + // ORCA Result Viewer + // + // + // Upload `.stk` or `.dat` file to visualize + // + // + // + // + + // {ydomain && xdomain ? ( // Abscissa refers to x axis and ordinate refers to the y axis + // + // + // + // + // + // + // + // ) : ( + // <> + //

+ // Please upload a valid '.dat' file in the first and a '.stk' file + // in the second. + //

+ // + // + // )} + // + // ); } diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..f23d01c --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,66 @@ +import AppBar from "@mui/material/AppBar"; +import Toolbar from "@mui/material/Toolbar"; +import Typography from "@mui/material/Typography"; + +import ListItemButton from "@mui/material/ListItemButton"; +import ListItem from "@mui/material/ListItem"; +import List from "@mui/material/List"; +import ListItemText from "@mui/material/ListItemText"; +import Box from "@mui/material/Box"; +import Stack from "@mui/material/Stack"; +import { Checkbox } from "@mui/material"; + +import { NavLink } from "react-router-dom"; + +import { MdLightMode, MdDarkMode } from "react-icons/md"; +import ConexsIcon from "./ConexsIcon"; +export default function Header(props: { + colorMode: string; + toggleColorMode: () => void; +}) { + const navitems = { + Home: "/", + OrcaInput: "/orcainput", + OrcaResult: "/orcaresult", + }; + + return ( + + + + + + + + CONEXS Prototypes + + + {Object.entries(navitems).map(([key, value]) => ( + + theme.palette.text.secondary, + }, + }} + > + + + + ))} + + + + } + checkedIcon={} + checked={props.colorMode === "dark"} + onChange={props.toggleColorMode} + > + + + + ); +} diff --git a/src/components/MoleculeViewer.tsx b/src/components/MoleculeViewer.tsx index aa2d751..326fca1 100644 --- a/src/components/MoleculeViewer.tsx +++ b/src/components/MoleculeViewer.tsx @@ -11,9 +11,7 @@ import { Typography, } from "@mui/material"; import StyleToggle from "./StyleToggle"; -import SideDrawer from "./SideDrawer"; import FormPage from "../FormPage"; -import ConexsIcon from "./ConexsIcon"; function MoleculeViewer() { const [color, setcolor] = useState("#3465A4"); @@ -85,9 +83,7 @@ function MoleculeViewer() { return ( <> - - - + ORCA XAS Input File Generator diff --git a/src/components/WelcomePage.tsx b/src/components/WelcomePage.tsx new file mode 100644 index 0000000..65bccbb --- /dev/null +++ b/src/components/WelcomePage.tsx @@ -0,0 +1,13 @@ +import { Container, Typography } from "@mui/material"; + +function WelcomePage() { + return ( + + + Prototype web components for user-friendly XAS simulation! + + + ); +} + +export default WelcomePage; diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo index 844dee8..def604f 100644 --- a/tsconfig.app.tsbuildinfo +++ b/tsconfig.app.tsbuildinfo @@ -1 +1 @@ -{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/Components/Molecule3D.tsx","./src/Components/StyleToggle.tsx","./src/Components/moleculeDataTextArea.tsx"],"version":"5.6.2"} \ No newline at end of file +{"root":["./src/App.tsx","./src/FormPage.tsx","./src/GraphPage.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/ConexsIcon.tsx","./src/components/Header.tsx","./src/components/Molecule3D.tsx","./src/components/MoleculeViewer.tsx","./src/components/SideDrawer.tsx","./src/components/StyleToggle.tsx","./src/components/WelcomePage.tsx","./src/components/graphdata.tsx","./src/components/moleculeDataTextArea.tsx"],"version":"5.6.2"} \ No newline at end of file