Implement Pipelines page layout

frontend/components/SpeczCatalogs.js

@@ -0,0 +1,39 @@
+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 '../components/Link'
+
+function SpeczCatalogs() {
+  return (
+    <Link href="/specz_catalogs">
+      <Card
+        elevation={3}
+        sx={{
+          display: 'flex'
+        }}
+      >
+        <CardMedia
+          component="img"
+          sx={{ width: 350 }}
+          image="../interfaces/milkyway.jpg"
+          alt="Spec-z Catalogs"
+        />
+        <Box>
+          <CardContent m={2} sx={{ maxWidth: 500 }}>
+            <Typography variant="h5">Combine Spec-z Catalogs</Typography>
+            <Typography variant="body1" color="text.secondary">
+              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.
+            </Typography>
+          </CardContent>
+        </Box>
+      </Card>
+    </Link>
+  )
+}
+
+export default SpeczCatalogs

frontend/components/SpeczData.js

@@ -0,0 +1,86 @@
+import { DataGrid } from '@mui/x-data-grid'
+import moment from 'moment'
+import { Box } from '@mui/material'
+import PropTypes from 'prop-types'
+
+const columns = [
+  {
+    field: 'display_name',
+    headerName: 'Name',
+    sortable: true,
+    flex: 1
+  },
+  {
+    field: 'uploaded_by',
+    headerName: 'Uploaded By',
+    flex: 1,
+    sortable: false
+  },
+  {
+    field: 'created_at',
+    headerName: 'Created at',
+    sortable: true,
+    width: 200,
+    valueFormatter: params => {
+      if (!params.value) {
+        return ''
+      }
+      return moment(params.value).format('YYYY-MM-DD')
+    }
+  }
+]
+
+function DataTable({ rows }) {
+  return (
+    <Box style={{ height: 300, width: '100%' }}>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        // getRowId={row => row.id}
+        pageSizeOptions={[5, 10]}
+        checkboxSelection
+      />
+    </Box>
+  )
+}
+
+DataTable.propTypes = {
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired
+}
+
+const rows = [
+  {
+    id: 1,
+    display_name: 'Jandson 1',
+    uploaded_by: 'User1',
+    created_at: '2023-01-01'
+  },
+  {
+    id: 2,
+    display_name: 'Jandson 2',
+    uploaded_by: 'User2',
+    created_at: '2023-02-15'
+  },
+  {
+    id: 3,
+    display_name: 'Jandson 3',
+    uploaded_by: 'User3',
+    created_at: '2023-03-22'
+  },
+  {
+    id: 4,
+    display_name: 'Jandson V',
+    uploaded_by: 'User1',
+    created_at: '2023-04-10'
+  },
+  {
+    id: 5,
+    display_name: 'Jandson Try',
+    uploaded_by: 'User2',
+    created_at: '2023-05-05'
+  }
+]
+
+export default function App() {
+  return <DataTable rows={rows} />
+}

frontend/components/TrainingSetMaker.js

@@ -0,0 +1,39 @@
+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 '../components/Link'
+
+function TrainingSetMaker() {
+  return (
+    <Link href="/training_set_maker">
+      <Card
+        elevation={3}
+        sx={{
+          display: 'flex',
+          flexDirection: 'row-reverse'
+        }}
+      >
+        <CardMedia
+          component="img"
+          sx={{ width: 350 }}
+          image="../interfaces/lsst_summit.jpg"
+          alt="Training Set Maker"
+        />
+        <Box>
+          <CardContent m={2} sx={{ maxWidth: 500 }}>
+            <Typography variant="h5">Training Set Maker</Typography>
+            <Typography variant="body1" color="text.secondary">
+              Creates a training set from the spatial cross-matching of a given
+              Spec-z Catalog and the LSST Objects Catalogs.
+            </Typography>
+          </CardContent>
+        </Box>
+      </Card>
+    </Link>
+  )
+}
+
+export default TrainingSetMaker

frontend/components/TsmData.js

@@ -0,0 +1,85 @@
+import { DataGrid } from '@mui/x-data-grid'
+import moment from 'moment'
+import { Box } from '@mui/material'
+import PropTypes from 'prop-types'
+
+const columns = [
+  {
+    field: 'display_name',
+    headerName: 'Name',
+    sortable: true,
+    flex: 1
+  },
+  {
+    field: 'uploaded_by',
+    headerName: 'Uploaded By',
+    flex: 1,
+    sortable: false
+  },
+  {
+    field: 'created_at',
+    headerName: 'Created at',
+    sortable: true,
+    width: 200,
+    valueFormatter: params => {
+      if (!params.value) {
+        return ''
+      }
+      return moment(params.value).format('YYYY-MM-DD')
+    }
+  }
+]
+
+function DataTable({ rows }) {
+  return (
+    <Box style={{ height: 300, width: '100%' }}>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        // getRowId={row => row.id}
+        pageSizeOptions={[5, 10]}
+      />
+    </Box>
+  )
+}
+
+DataTable.propTypes = {
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired
+}
+
+const rows = [
+  {
+    id: 1,
+    display_name: 'Jandson 1',
+    uploaded_by: 'User1',
+    created_at: '2023-01-01'
+  },
+  {
+    id: 2,
+    display_name: 'Jandson 2',
+    uploaded_by: 'User2',
+    created_at: '2023-02-15'
+  },
+  {
+    id: 3,
+    display_name: 'Jandson 3',
+    uploaded_by: 'User3',
+    created_at: '2023-03-22'
+  },
+  {
+    id: 4,
+    display_name: 'Jandson V',
+    uploaded_by: 'User1',
+    created_at: '2023-04-10'
+  },
+  {
+    id: 5,
+    display_name: 'Jandson Try',
+    uploaded_by: 'User2',
+    created_at: '2023-05-05'
+  }
+]
+
+export default function App() {
+  return <DataTable rows={rows} />
+}

frontend/pages/_app.js

@@ -31,7 +31,10 @@ export default function MyApp(props) {
 
   const light = createTheme({
     palette: {
-      mode: 'light'
+      mode: 'light',
+      background: {
+        default: '#f1f1f1'
+      }
     }
   })
 

frontend/pages/index.js

@@ -33,7 +33,7 @@ export default function Index() {
       path: '/pz_pipelines',
       background: '/interfaces/gamma-ray-burst.jpg',
       description:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit dolor sit amet.'
+        'Pipelines to create customized science-driven PZ-related data products.'
     }
   ]
 

frontend/pages/pz_pipelines.js

@@ -1,15 +1,29 @@
-import { Typography } from '@mui/material'
-import * as React from 'react'
-import useStyles from '../styles/pages/pz_pipelines'
-
-export default function PZPipelines() {
-  const classes = useStyles()
+import React from 'react'
+import { Grid, Typography } from '@mui/material'
+import SpeczCatalogs from '../components/SpeczCatalogs'
+import TrainingSetMaker from '../components/TrainingSetMaker'
 
+function PZPipelines() {
   return (
-    <div className={classes.container}>
-      <Typography variant="h5" className={classes.message}>
-        Coming Soon...
+    <Grid container direction="column" alignItems="center">
+      <Typography
+        variant="h4"
+        align="center"
+        color="textPrimary"
+        mb={10}
+        mt={-12}
+      >
+        Photo-z Server Pipelines
       </Typography>
-    </div>
+
+      <Grid item mb={5}>
+        <SpeczCatalogs />
+      </Grid>
+      <Grid item>
+        <TrainingSetMaker />
+      </Grid>
+    </Grid>
   )
 }
+
+export default PZPipelines

frontend/pages/specz_catalogs.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Typography, Box } from '@mui/material'
+
+function SpeczCatalogs() {
+  return (
+    <Box sx={{ textAlign: 'center' }}>
+      <Typography variant="h4">Coming soon...</Typography>
+    </Box>
+  )
+}
+
+export default SpeczCatalogs

frontend/pages/training_set_maker.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Typography, Box } from '@mui/material'
+
+function TrainingSetMaker() {
+  return (
+    <Box sx={{ textAlign: 'center' }}>
+      <Typography variant="h4">Coming soon...</Typography>
+    </Box>
+  )
+}
+
+export default TrainingSetMaker