Refactor page layout to make more responsive

web-conexs-client/src/App.tsx

@@ -41,8 +41,6 @@ function App() {
         <UserProvider>
           <Stack height="100vh" width="100vw" spacing={1}>
             <Header />
-
-            {/* <Stack direction="row" flex={1}> */}
             <SideDrawer />
             <Routes>
               <Route path="/" element={<WelcomePage />} />
@@ -158,7 +156,7 @@ function App() {
               logo={undefined}
               sx={{
                 zIndex: (theme) => theme.zIndex.drawer + 1,
-                height: "6rem",
+                height: "4rem",
               }}
             ></Footer>
           </Stack>

web-conexs-client/src/components/AboutPage.tsx

@@ -1,43 +1,38 @@
-import { Stack, Toolbar, Typography, useTheme } from "@mui/material";
+import { Card, CardContent, Stack, Typography } from "@mui/material";
 import MainPanel from "./MainPanel";
 import { Link } from "react-router-dom";
 
 export default function AboutPage() {
-  const theme = useTheme();
   return (
-    <MainPanel>
-      <Stack spacing={"10px"} margin={"10px"}>
-        <Toolbar
-          sx={{
-            justifyContent: "space-between",
-            alignItems: "center",
-            backgroundColor: theme.palette.action.disabled,
-            borderRadius: "4px 4px 0px 0px",
-          }}
-        >
-          <Typography variant="h5" component="div">
-            About Web-CONEXS
-          </Typography>
-        </Toolbar>
-        <Typography>
-          For work arising from the use of Web-CONEXS please cite:
-        </Typography>
-        <Link
-          target="_blank"
-          rel="noopener noreferrer"
-          to={"https://journals.iucr.org/s/issues/2024/05/00/ok5117/"}
-        >
-          J.D. Elliott <i>et al.</i>{" "}
-          <i>
-            Web-CONEXS : an inroad to theoretical X-ray absorption spectroscopy.
-          </i>{" "}
-          Journal of Synchrotron Radiation 2024 <b>31</b> 1276
-        </Link>
-        <Typography>
-          Funding for Web-CONEXS was provided by the Engineering and Physical
-          Sciences Research Council (EPSRC) via CONEXS (grant Nos. EP/S021493/1
-          \& EP/S022058) and HPC-CONEXS (grant No. No. EP/X035514/1)
-        </Typography>
+    <MainPanel
+      toolbarElements={<Typography variant="h5">About Web-CONEXS</Typography>}
+    >
+      <Stack margin={"10px"} spacing={"5px"} padding={"10px"}>
+        <Card>
+          <CardContent>
+            <Typography>
+              For work arising from the use of Web-CONEXS please cite:
+            </Typography>
+            <Link
+              target="_blank"
+              rel="noopener noreferrer"
+              to={"https://journals.iucr.org/s/issues/2024/05/00/ok5117/"}
+            >
+              J.D. Elliott <i>et al.</i>{" "}
+              <i>
+                Web-CONEXS : an inroad to theoretical X-ray absorption
+                spectroscopy.
+              </i>{" "}
+              Journal of Synchrotron Radiation 2024 <b>31</b> 1276
+            </Link>
+            <Typography>
+              Funding for Web-CONEXS was provided by the Engineering and
+              Physical Sciences Research Council (EPSRC) via CONEXS (grant Nos.
+              EP/S021493/1 \& EP/S022058) and HPC-CONEXS (grant No. No.
+              EP/X035514/1)
+            </Typography>
+          </CardContent>
+        </Card>
       </Stack>
     </MainPanel>
   );

web-conexs-client/src/components/ClusterBadge.tsx

@@ -1,4 +1,4 @@
-import { Chip, useTheme } from "@mui/material";
+import { Box, Chip, Tooltip, useTheme } from "@mui/material";
 import StorageIcon from "@mui/icons-material/Storage";
 import { useQuery } from "@tanstack/react-query";
 import { getClusterStatus } from "../queryfunctions";
@@ -12,6 +12,8 @@ export default function ClusterBadge() {
   });
 
   let background = theme.palette.background.default;
+  let status =
+    "CONEXS HPC cluster is currently offline, simulations can be requested, but will not be submitted until the cluser is operational";
 
   if (!(query.data == undefined)) {
     background = theme.palette.error.dark;
@@ -26,23 +28,31 @@ export default function ClusterBadge() {
 
         if (dif < 120000) {
           background = theme.palette.success.dark;
+          status =
+            "CONEXS HPC cluster is currently online, requested simulations will be submitted immediately.";
         }
       }
     }
   }
 
   return (
-    <Chip
-      sx={{
-        backgroundColor: background,
-        color: theme.palette.primary.contrastText,
-      }}
-      size="large"
-      variant="outlined"
-      label="HPC"
-      icon={
-        <StorageIcon color={theme.palette.primary.contrastText}></StorageIcon>
-      }
-    ></Chip>
+    <Tooltip title={status} arrow>
+      <Box>
+        <Chip
+          sx={{
+            backgroundColor: background,
+            color: theme.palette.primary.contrastText,
+          }}
+          size="large"
+          variant="outlined"
+          label="HPC"
+          icon={
+            <StorageIcon
+              color={theme.palette.primary.contrastText}
+            ></StorageIcon>
+          }
+        ></Chip>
+      </Box>
+    </Tooltip>
   );
 }

web-conexs-client/src/components/Header.tsx

@@ -3,6 +3,7 @@ import {
   Drawer,
   IconButton,
   Stack,
+  Tooltip,
   Typography,
   useTheme,
 } from "@mui/material";
@@ -51,10 +52,13 @@ export default function Header() {
     <Navbar
       sx={{
         zIndex: (theme) => theme.zIndex.drawer + 1,
-        height: "4rem",
+        height: "70px",
       }}
       leftSlot={
-        <Stack direction="row" alignItems="center">
+        <Stack
+          direction="row"
+          sx={{ alignItems: "center", justifyConent: "center" }}
+        >
           <IconButton
             size="large"
             onClick={handleDrawerToggle}
@@ -95,7 +99,8 @@ export default function Header() {
       logo={undefined}
       rightSlot={
         <Stack direction="row" alignItems="center">
-          <ClusterBadge></ClusterBadge>
+          <ClusterBadge />
+
           <User
             colour="white"
             onLogin={handleLogin}

web-conexs-client/src/components/LoginPage.tsx

@@ -3,8 +3,10 @@ import MainPanel from "./MainPanel";
 
 export default function LoginPage() {
   return (
-    <MainPanel>
-      <Typography>Successfully logged in</Typography>
+    <MainPanel
+      toolbarElements={<Typography variant="h5">Logged In</Typography>}
+    >
+      <Typography>Successfully Logged In!</Typography>
     </MainPanel>
   );
 }

web-conexs-client/src/components/MainPanel.tsx

@@ -1,6 +1,17 @@
-import { Box, Paper, useTheme } from "@mui/material";
+import {
+  Box,
+  Paper,
+  Stack,
+  Toolbar,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import React from "react";
 
-export default function MainPanel(props: { children: React.ReactNode }) {
+export default function MainPanel(props: {
+  children: React.ReactNode;
+  toolbarElements: React.ReactNode;
+}) {
   const theme = useTheme();
 
   const sideGap = theme.spacing(10);
@@ -26,7 +37,19 @@ export default function MainPanel(props: { children: React.ReactNode }) {
         }}
         elevation={12}
       >
-        {props.children}
+        <Stack flex={1} overflow="hidden">
+          <Toolbar
+            sx={{
+              justifyContent: "space-between",
+              alignItems: "center",
+              backgroundColor: theme.palette.action.disabled,
+              borderRadius: "4px 4px 0px 0px",
+            }}
+          >
+            {props.toolbarElements}
+          </Toolbar>
+          {props.children}
+        </Stack>
       </Paper>
     </Box>
   );

web-conexs-client/src/components/RequireAuth.tsx

@@ -13,15 +13,19 @@ export default function RequireAuth(props: {
 
   if (user_result.person_status == "ERROR") {
     return (
-      <MainPanel>
+      <MainPanel
+        toolbarElements={<Typography variant="h5">Internal Error!</Typography>}
+      >
         <Typography>Internal Error!</Typography>
       </MainPanel>
     );
   }
 
   if (user_result.person_status == "FORBIDDEN") {
     return (
-      <MainPanel>
+      <MainPanel
+        toolbarElements={<Typography variant="h5">Access Forbidden</Typography>}
+      >
         <Forbidden></Forbidden>
       </MainPanel>
     );
@@ -38,7 +42,9 @@ export default function RequireAuth(props: {
 
   if (user_result.person_status == "PENDING" || user == null) {
     return (
-      <MainPanel>
+      <MainPanel
+        toolbarElements={<Typography variant="h5">Loading...</Typography>}
+      >
         <Typography>Loading...</Typography>
       </MainPanel>
     );

web-conexs-client/src/components/SideToolbar.tsx

@@ -8,6 +8,7 @@ import {
   Stack,
   Theme,
   Toolbar,
+  Tooltip,
   useTheme,
 } from "@mui/material";
 import { useContext, useState } from "react";
@@ -25,6 +26,7 @@ import FDMNESIcon from "./icons/FDMNESIcon";
 import OrcaIcon from "./icons/OrcaIcon";
 import InfoIcon from "@mui/icons-material/Info";
 import { Login } from "@mui/icons-material";
+import MatProjPlus from "./icons/MatProjPlus";
 
 const drawerWidth = 320;
 
@@ -176,7 +178,7 @@ export default function SideToolbar(props: { open: boolean }) {
               open={props.open}
               to={"/matprojcrystal"}
               label="Crystal From Materials Project"
-              icon={<GrainPlusIcon />}
+              icon={<MatProjPlus />}
               reloadDocument={false}
             ></ListItemStyled>
             <ListItemStyled

web-conexs-client/src/components/SimulationReviewPage.tsx

@@ -28,19 +28,10 @@ export default function SimulationReviewPage() {
     }
   }
 
-  const theme = useTheme();
-
   return (
-    <MainPanel>
-      <Stack overflow="auto" justifyContent="space-between" width={"100%"}>
-        <Toolbar
-          sx={{
-            justifyContent: "space-between",
-            alignItems: "center",
-            backgroundColor: theme.palette.action.disabled,
-            borderRadius: "4px 4px 0px 0px",
-          }}
-        >
+    <MainPanel
+      toolbarElements={
+        <>
           <Typography variant="h5" component="div">
             Simulation Results
           </Typography>
@@ -60,7 +51,10 @@ export default function SimulationReviewPage() {
               &gt;
             </Button>
           </Stack>
-        </Toolbar>
+        </>
+      }
+    >
+      <Stack overflow="auto" justifyContent="space-between" width={"100%"}>
         <SimulationTable
           simulations={query.data ? query.data.items : []}
           setSelectedSimulation={(simulation) => {

web-conexs-client/src/components/SimulationView.tsx

@@ -11,26 +11,18 @@ export default function SimulationView() {
   const intId = parseInt(id ? id : "");
 
   return (
-    <MainPanel>
-      <Stack overflow="auto" justifyContent="space-between" width={"100%"}>
-        <Toolbar
-          sx={{
-            justifyContent: "space-between",
-            alignItems: "center",
-            backgroundColor: theme.palette.action.disabled,
-            borderRadius: "4px 4px 0px 0px",
-          }}
-        >
-          <Button variant="contained" onClick={() => navigate("/simulations")}>
-            Back
-          </Button>
-        </Toolbar>
-        {isNaN(intId) ? (
-          <Typography>Invalid Simulation Id</Typography>
-        ) : (
-          <SimulationInformation simId={intId}></SimulationInformation>
-        )}
-      </Stack>
+    <MainPanel
+      toolbarElements={
+        <Button variant="contained" onClick={() => navigate("/simulations")}>
+          Back
+        </Button>
+      }
+    >
+      {isNaN(intId) ? (
+        <Typography>Invalid Simulation Id</Typography>
+      ) : (
+        <SimulationInformation simId={intId}></SimulationInformation>
+      )}
     </MainPanel>
   );
 }