Merge pull request #120 from DiamondLightSource/unified-page-skeleton

Add skeleton for unified post-processing page

Author: yousefmoazzam

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { Route, BrowserRouter, Routes } from "react-router-dom";
 import { default as TomographyApp } from "../tomography/src/App";
 import { App as I14App } from "../i14/src/App";
 import { App as EpsicApp } from "../ePSIC/src/App";
+import { App as UnifiedApp } from "../unified/src/App";
 import { default as Dashboard } from "../dashboard/src/App";
 import { default as Layout } from "./Layout";
 
@@ -14,6 +15,7 @@ const App: React.FC = () => {
           <Route path="tomography/*" element={<TomographyApp />} />
           <Route path="i14/*" element={<I14App />} />
           <Route path="ePSIC/*" element={<EpsicApp />} />
+          <Route path="unified/*" element={<UnifiedApp />} />
         </Route>
       </Routes>
     </BrowserRouter>

frontend/unified/src/App.tsx

@@ -0,0 +1,86 @@
+import { Box, Divider, Grid2 as Grid, Stack, Typography } from "@mui/material";
+
+const VERTICAL_SPACING = 2;
+const HORIZONTAL_SPACING = 2;
+
+export const App: React.FC = () => {
+  return (
+    <>
+      <Grid container spacing={HORIZONTAL_SPACING} columns={2}>
+        <Stack spacing={VERTICAL_SPACING}>
+          <Typography variant="h5">Session</Typography>
+          <PlaceholderComponent
+            placeholderText="Session selector component placeholder"
+            height={100}
+            width={500}
+          />
+          <Divider sx={{ width: "100%" }} />
+          <Typography variant="h5">Scan</Typography>
+          <PlaceholderComponent
+            placeholderText="Scan selector component placeholder"
+            height={100}
+            width={500}
+          />
+          <Divider sx={{ width: "100%" }} />
+          <Typography variant="h5">App</Typography>
+          <PlaceholderComponent
+            placeholderText="App selector component placeholder"
+            height={100}
+            width={500}
+          />
+          <Divider sx={{ width: "100%" }} />
+          <Typography variant="h5">Parameter Configuration</Typography>
+          <PlaceholderComponent
+            placeholderText="Parameter configuration component placeholder"
+            height={200}
+            width={500}
+          />
+        </Stack>
+        <Stack spacing={VERTICAL_SPACING}>
+          <Typography variant="h5">Plot</Typography>
+          <PlaceholderComponent
+            placeholderText="Plot component placeholder"
+            height={200}
+            width={500}
+          />
+          <Divider sx={{ width: "100%" }} />
+          <Typography variant="h5">Log</Typography>
+          <PlaceholderComponent
+            placeholderText="Log component placeholder"
+            height={200}
+            width={500}
+          />
+          <Divider sx={{ width: "100%" }} />
+          <Typography variant="h5">Jobs</Typography>
+          <PlaceholderComponent
+            placeholderText="Jobs component placeholder"
+            height={200}
+            width={500}
+          />
+        </Stack>
+      </Grid>
+    </>
+  );
+};
+
+type PlaceholderComponentProps = {
+  placeholderText: string;
+  height: number;
+  width: number;
+};
+
+const PlaceholderComponent = ({
+  placeholderText,
+  height,
+  width,
+}: PlaceholderComponentProps) => {
+  return (
+    <Box
+      sx={{ width: width, height: height, border: "1px dashed grey" }}
+      alignContent="center"
+      justifyItems="center"
+    >
+      <p>{placeholderText}</p>
+    </Box>
+  );
+};