From d0bac436f5fad7ff87d87501ed7c57bab43ae86a Mon Sep 17 00:00:00 2001
From: Jandson Vitorino <jandson1512@gmail.com>
Date: Tue, 12 Mar 2024 13:45:15 -0300
Subject: [PATCH] layout corrections and addition of back to previous page
 buttons

---
 .vscode/settings.json                |  2 +-
 frontend/pages/pz_pipelines.js       | 27 ++++++++++++++---
 frontend/pages/specz_catalogs.js     | 44 ++++++++++++++++++++++++++--
 frontend/pages/training_set_maker.js | 44 ++++++++++++++++++++++++++--
 4 files changed, 106 insertions(+), 11 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8feacc9..cd7de01 100644
--- a/.vscode/settings.json
+++ b/.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",
diff --git a/frontend/pages/pz_pipelines.js b/frontend/pages/pz_pipelines.js
index 696aa73..52ceb84 100644
--- a/frontend/pages/pz_pipelines.js
+++ b/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>
 
diff --git a/frontend/pages/specz_catalogs.js b/frontend/pages/specz_catalogs.js
index 3cdac39..1e5d133 100644
--- a/frontend/pages/specz_catalogs.js
+++ b/frontend/pages/specz_catalogs.js
@@ -1,11 +1,49 @@
 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>
   )
 }
 
diff --git a/frontend/pages/training_set_maker.js b/frontend/pages/training_set_maker.js
index 30fabef..1e126ce 100644
--- a/frontend/pages/training_set_maker.js
+++ b/frontend/pages/training_set_maker.js
@@ -1,11 +1,49 @@
 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>
   )
 }