241 new card for pz compute

frontend/components/PzCompute.js

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import Box from '@mui/material/Box'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import CardMedia from '@mui/material/CardMedia'
+import Typography from '@mui/material/Typography'
+import Link from './Link'
+
+function PzCompute() {
+  return (
+    <Link href="/pz_compute">
+      <Card
+        elevation={3}
+        sx={{
+          display: 'flex'
+        }}
+      >
+        <CardMedia
+          component="img"
+          sx={{ width: 350, height: 231 }}
+          image="../interfaces/telescope.jpg"
+          alt="PhotozCompute"
+        />
+        <Box>
+          <CardContent m={2} sx={{ maxWidth: 500 }}>
+            <Typography variant="h5">Photo-z Compute</Typography>
+            <Typography variant="body1" color="text.secondary">
+              A high-performance computing pipeline to estimate photo-zs using
+              the Brazilian IDAC resources.
+            </Typography>
+          </CardContent>
+        </Box>
+      </Card>
+    </Link>
+  )
+}
+
+export default PzCompute

frontend/components/SpeczCatalogs.js

@@ -17,7 +17,7 @@ function SpeczCatalogs() {
       >
         <CardMedia
           component="img"
-          sx={{ width: 350 }}
+          sx={{ width: 350, height: 231 }}
           image="../interfaces/milkyway.jpg"
           alt="Spec-z Catalogs"
         />

frontend/components/TrainingSetMaker.js

@@ -18,7 +18,7 @@ function TrainingSetMaker() {
       >
         <CardMedia
           component="img"
-          sx={{ width: 350 }}
+          sx={{ width: 350, height: 231 }}
           image="../interfaces/lsst_summit.jpg"
           alt="Training Set Maker"
         />

frontend/pages/_app.js

@@ -60,12 +60,12 @@ export default function MyApp(props) {
         <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
           <CssBaseline />
           <Box
-            style={{
+            sx={{
               display: 'flex',
               flexDirection: 'column',
               justifyContent: 'space-between',
               minHeight: '100vh',
-              overflowY: scrollNeeded ? 'auto' : 'hidden'
+              overflowY: scrollNeeded ? 'hidden' : 'hidden'
             }}
           >
             <AuthProvider>

frontend/pages/pz_compute.js

@@ -0,0 +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 PhotozCumpute() {
+  return (
+    <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">Photo-z Compute</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>
+          Photo-z Compute
+          <IconButton
+            color="primary"
+            aria-label="info"
+            title="A high-performance computing pipeline to estimate
+            photo-zs using the Brazilian IDAC resources."
+          >
+            <InfoIcon />
+          </IconButton>
+        </Typography>
+      </Grid>
+      <Box textAlign={'center'} mt={30}>
+        <Typography variant="h4">Coming soon...</Typography>
+      </Box>
+    </Grid>
+  )
+}
+
+export default PhotozCumpute

frontend/pages/pz_pipelines.js

@@ -7,6 +7,7 @@ import IconButton from '@mui/material/IconButton'
 import React from 'react'
 import SpeczCatalogs from '../components/SpeczCatalogs'
 import TrainingSetMaker from '../components/TrainingSetMaker'
+import PzCompute from '../components/PzCompute'
 
 function PZPipelines() {
   return (
@@ -35,12 +36,15 @@ function PZPipelines() {
         Photo-z Server Pipelines
       </Typography>
 
-      <Grid item mb={5}>
+      <Grid item xs={12} mb={5}>
         <SpeczCatalogs />
       </Grid>
-      <Grid item>
+      <Grid item xs={12} mb={5}>
         <TrainingSetMaker />
       </Grid>
+      <Grid item xs={12}>
+        <PzCompute />
+      </Grid>
     </Grid>
   )
 }