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 1/2] 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>
   )
 }
 

From 191620dd3c46cc71b4247aabb65761be03da5d52 Mon Sep 17 00:00:00 2001
From: Jandson Vitorino <jandson1512@gmail.com>
Date: Tue, 12 Mar 2024 14:01:31 -0300
Subject: [PATCH 2/2] fix ESLint erros

---
 frontend/pages/pz_pipelines.js       | 14 +++++++-------
 frontend/pages/specz_catalogs.js     |  6 ++----
 frontend/pages/training_set_maker.js |  4 +---
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/frontend/pages/pz_pipelines.js b/frontend/pages/pz_pipelines.js
index 52ceb84..fcfc229 100644
--- a/frontend/pages/pz_pipelines.js
+++ b/frontend/pages/pz_pipelines.js
@@ -25,13 +25,13 @@ function PZPipelines() {
           <Typography color="textPrimary">Pipelines</Typography>
         </Breadcrumbs>
         <IconButton
-            color="primary"
-            edge="start"
-            aria-label="Go back"
-            onClick={() => window.history.back()}
-          >
-            <ArrowBackIos />
-          </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 1e5d133..b24392f 100644
--- a/frontend/pages/specz_catalogs.js
+++ b/frontend/pages/specz_catalogs.js
@@ -17,13 +17,11 @@ function SpeczCatalogs() {
         <Link color="inherit" href="pz_pipelines">
           Pipelines
         </Link>
-        <Typography color="textPrimary">
-          Combine Spec-z Catalogs
-        </Typography>
+        <Typography color="textPrimary">Combine Spec-z Catalogs</Typography>
       </Breadcrumbs>
       <Grid>
         <Typography variant="h5" textAlign={'left'} ml={1} mt={1}>
-        <IconButton
+          <IconButton
             color="primary"
             aria-label="Go back"
             onClick={() => window.history.back()}
diff --git a/frontend/pages/training_set_maker.js b/frontend/pages/training_set_maker.js
index 1e126ce..c261d08 100644
--- a/frontend/pages/training_set_maker.js
+++ b/frontend/pages/training_set_maker.js
@@ -17,9 +17,7 @@ function TrainingSetMaker() {
         <Link color="inherit" href="pz_pipelines">
           Pipelines
         </Link>
-        <Typography color="textPrimary">
-          Training Set Maker
-        </Typography>
+        <Typography color="textPrimary">Training Set Maker</Typography>
       </Breadcrumbs>
       <Grid>
         <Typography variant="h5" textAlign={'left'} ml={1} mt={1}>