Skip to content

Commit

Permalink
Merge pull request #3 from jacobfilik/add_header
Browse files Browse the repository at this point in the history 
refactor app layout
  • Loading branch information
@jacobfilik
jacobfilik authored Nov 29, 2024
2 parents ea00ce4 + ea70f5b commit 1c2b48e
Show file tree
Hide file tree
Showing 8 changed files with 253 additions and 79 deletions.
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
},
Expand Down
12 changes: 12 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

48 changes: 42 additions & 6 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
<Routes>
<Route path="/" element={<MoleculeViewer />} />
<Route path="/graph" element={<GraphPage />} />
</Routes>
</>
<ThemeProvider theme={theme}>
<CssBaseline />
<Stack height="100vh" width="100vw" spacing={1}>
<Header colorMode={mode} toggleColorMode={colorMode.toggleColorMode} />
<Routes>
<Route path="/" element={<WelcomePage />} />
<Route path="/orcainput" element={<MoleculeViewer />} />
<Route path="/orcaresult" element={<GraphPage />} />
</Routes>
</Stack>
</ThemeProvider>
);
}

Expand Down
181 changes: 115 additions & 66 deletions src/GraphPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import SideDrawer from "./components/SideDrawer";
import "@h5web/lib/styles.css";
import {
Domain,
Expand All @@ -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,
Expand All @@ -23,12 +22,12 @@ import {
import { ReactElement } from "react";

export default function GraphPage() {
const [xdomain, setxDomain] = useState<Domain>();
const [ydomain, setyDomain] = useState<Domain>();
const [xValues, setXValues] = useState<number[]>([]);
const [yValues, setYValues] = useState<number[]>([]);
const [xValues2, setXValues2] = useState<number[]>([]);
const [yValues2, setYValues2] = useState<number[]>([]);
const [xdomain, setxDomain] = useState<Domain>([0, 1]);
const [ydomain, setyDomain] = useState<Domain>([0, 1]);
const [xValues, setXValues] = useState<number[]>([0]);
const [yValues, setYValues] = useState<number[]>([0]);
const [xValues2, setXValues2] = useState<number[]>([0]);
const [yValues2, setYValues2] = useState<number[]>([0]);

function stkFilePreprocessing(content: string) {
const lines = content.split("\n");
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -132,66 +135,112 @@ 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);
setYValues2(datyvalues);
};

return (
<>
<SideDrawer />
<Typography variant="h3" sx={{ textAlign: "Left" }}>
ORCA Result Viewer
</Typography>
<Typography variant="h5" sx={{ textAlign: "center" }}>
Upload `.stk` or `.dat` file to visualize
</Typography>
<Box sx={{ textAlign: "center" }}>
<input type="file" onChange={handleFileUpload1} />
<input type="file" onChange={handleFileUpload2} />

{ydomain && xdomain ? ( // Abscissa refers to x axis and ordinate refers to the y axis
<VisCanvas
abscissaConfig={{
showGrid: true,
visDomain: [xdomain[0], xdomain[1]],
}}
ordinateConfig={{
showGrid: true,
visDomain: [ydomain[0], ydomain[1]],
}}
>
<DefaultInteractions />
<TooltipMesh renderTooltip={tooltipText} />
<ResetZoomButton />
<DataCurve
abscissas={xValues}
color="green"
ordinates={yValues}
visible
/>
<DataCurve
abscissas={xValues2}
color="orange"
ordinates={yValues2}
visible
/>
</VisCanvas>
) : (
<>
<p>
Please upload a valid '.dat' file in the first and a '.stk' file
in the second.
</p>
<Button variant="outlined" sx={{ m: 5 }} onClick={exampleGraph}>
Example of Graph
</Button>
</>
)}
</Box>
</>
<Stack direction="row" height="100%">
<Stack>
<Typography variant="h3" sx={{ textAlign: "Left" }}>
ORCA Result Viewer
</Typography>

<Typography variant="h5" sx={{ textAlign: "center" }}>
Upload `.stk` or `.dat` file to visualize
</Typography>
<Box sx={{ textAlign: "center" }}>
<input type="file" onChange={handleFileUpload1} />
<input type="file" onChange={handleFileUpload2} />
</Box>

<Button variant="outlined" sx={{ m: 5 }} onClick={exampleGraph}>
Example of Graph
</Button>
</Stack>
<VisCanvas
abscissaConfig={{
showGrid: true,
visDomain: [xdomain[0], xdomain[1]],
}}
ordinateConfig={{
showGrid: true,
visDomain: [ydomain[0], ydomain[1]],
}}
>
<DefaultInteractions />
<TooltipMesh renderTooltip={tooltipText} />
<ResetZoomButton />
<DataCurve
abscissas={xValues}
color="green"
ordinates={yValues}
visible
/>
<DataCurve
abscissas={xValues2}
color="orange"
ordinates={yValues2}
visible
/>
</VisCanvas>
</Stack>
// <>
// <Typography variant="h3" sx={{ textAlign: "Left" }}>
// ORCA Result Viewer
// </Typography>
// <Typography variant="h5" sx={{ textAlign: "center" }}>
// Upload `.stk` or `.dat` file to visualize
// </Typography>
// <Box sx={{ textAlign: "center" }}>
// <input type="file" onChange={handleFileUpload1} />
// <input type="file" onChange={handleFileUpload2} />

// {ydomain && xdomain ? ( // Abscissa refers to x axis and ordinate refers to the y axis
// <VisCanvas
// abscissaConfig={{
// showGrid: true,
// visDomain: [xdomain[0], xdomain[1]],
// }}
// ordinateConfig={{
// showGrid: true,
// visDomain: [ydomain[0], ydomain[1]],
// }}
// >
// <DefaultInteractions />
// <TooltipMesh renderTooltip={tooltipText} />
// <ResetZoomButton />
// <DataCurve
// abscissas={xValues}
// color="green"
// ordinates={yValues}
// visible
// />
// <DataCurve
// abscissas={xValues2}
// color="orange"
// ordinates={yValues2}
// visible
// />
// </VisCanvas>
// ) : (
// <>
// <p>
// Please upload a valid '.dat' file in the first and a '.stk' file
// in the second.
// </p>
// <Button variant="outlined" sx={{ m: 5 }} onClick={exampleGraph}>
// Example of Graph
// </Button>
// </>
// )}
// </Box>
// </>
);
}
Loading

0 comments on commit 1c2b48e

Please sign in to comment.