layout corrections and addition of back to previous page buttons

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-        "source.organizeImports": true,
+        "source.organizeImports": "explicit"
     },
     "python.analysis.typeCheckingMode": "basic",
     "files.eol": "\n",

frontend/pages/pz_pipelines.js

@@ -1,18 +1,37 @@
+import Grid from '@mui/material/Grid'
+import Typography from '@mui/material/Typography'
+import Link from '@mui/material/Link'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
+import ArrowBackIos from '@mui/icons-material/ArrowBackIos'
+import IconButton from '@mui/material/IconButton'
 import React from 'react'
-import { Grid, Typography } from '@mui/material'
 import SpeczCatalogs from '../components/SpeczCatalogs'
 import TrainingSetMaker from '../components/TrainingSetMaker'
 
 function PZPipelines() {
   return (
-    <Grid container direction="column" alignItems="center">
+    <Grid container direction="column" alignItems="center" mb={10}>
       <Typography
         variant="h4"
         align="center"
         color="textPrimary"
-        mb={10}
-        mt={-12}
+        mb={5}
+        mr={55}
       >
+        <Breadcrumbs aria-label="breadcrumb">
+          <Link color="inherit" href="/">
+            Home
+          </Link>
+          <Typography color="textPrimary">Pipelines</Typography>
+        </Breadcrumbs>
+        <IconButton
+          color="primary"
+          edge="start"
+          aria-label="Go back"
+          onClick={() => window.history.back()}
+        >
+          <ArrowBackIos />
+        </IconButton>
         Photo-z Server Pipelines
       </Typography>
 

frontend/pages/specz_catalogs.js

@@ -1,11 +1,47 @@
 import React from 'react'
 import { Typography, Box } from '@mui/material'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
+import Link from '@mui/material/Link'
+import Grid from '@mui/material/Grid'
+import IconButton from '@mui/material/IconButton'
+import InfoIcon from '@mui/icons-material/Info'
+import ArrowBackIos from '@mui/icons-material/ArrowBackIos'
 
 function SpeczCatalogs() {
   return (
-    <Box sx={{ textAlign: 'center' }}>
-      <Typography variant="h4">Coming soon...</Typography>
-    </Box>
+    <Grid flexGrow={1} mt={3}>
+      <Breadcrumbs aria-label="breadcrumb" ml={1}>
+        <Link color="inherit" href="/">
+          Home
+        </Link>
+        <Link color="inherit" href="pz_pipelines">
+          Pipelines
+        </Link>
+        <Typography color="textPrimary">Combine Spec-z Catalogs</Typography>
+      </Breadcrumbs>
+      <Grid>
+        <Typography variant="h5" textAlign={'left'} ml={1} mt={1}>
+          <IconButton
+            color="primary"
+            aria-label="Go back"
+            onClick={() => window.history.back()}
+          >
+            <ArrowBackIos />
+          </IconButton>
+          Combine Spec-z Catalogs
+          <IconButton
+            color="primary"
+            aria-label="info"
+            title="Creates a single spec-z sample from the multiple spatial cross-matching (all-to-all) of a list of pre-registered individual Spec-z Catalogs."
+          >
+            <InfoIcon />
+          </IconButton>
+        </Typography>
+      </Grid>
+      <Box textAlign={'center'} mt={30}>
+        <Typography variant="h4">Coming soon...</Typography>
+      </Box>
+    </Grid>
   )
 }
 

frontend/pages/training_set_maker.js

@@ -1,11 +1,47 @@
 import React from 'react'
 import { Typography, Box } from '@mui/material'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
+import Link from '@mui/material/Link'
+import Grid from '@mui/material/Grid'
+import IconButton from '@mui/material/IconButton'
+import InfoIcon from '@mui/icons-material/Info'
+import ArrowBackIos from '@mui/icons-material/ArrowBackIos'
 
 function TrainingSetMaker() {
   return (
-    <Box sx={{ textAlign: 'center' }}>
-      <Typography variant="h4">Coming soon...</Typography>
-    </Box>
+    <Grid flexGrow={1} mt={3}>
+      <Breadcrumbs aria-label="breadcrumb" ml={1}>
+        <Link color="inherit" href="/">
+          Home
+        </Link>
+        <Link color="inherit" href="pz_pipelines">
+          Pipelines
+        </Link>
+        <Typography color="textPrimary">Training Set Maker</Typography>
+      </Breadcrumbs>
+      <Grid>
+        <Typography variant="h5" textAlign={'left'} ml={1} mt={1}>
+          <IconButton
+            color="primary"
+            aria-label="Go back"
+            onClick={() => window.history.back()}
+          >
+            <ArrowBackIos />
+          </IconButton>
+          Training Set Maker
+          <IconButton
+            color="primary"
+            aria-label="info"
+            title="Creates a training set from the spatial cross-matching of a given Spec - z Catalog and the LSST Objects Catalogs.Training Set Maker"
+          >
+            <InfoIcon />
+          </IconButton>
+        </Typography>
+      </Grid>
+      <Box textAlign={'center'} mt={30}>
+        <Typography variant="h4">Coming soon...</Typography>
+      </Box>
+    </Grid>
   )
 }