layout corrections and addition of back to previous page buttons

linea-it · Mar 12, 2024 · d0bac43 · d0bac43
1 parent 08afdc7
commit d0bac43
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
   )
 }