screen with pipeline cards

frontend/components/SpeczData.js

@@ -47,4 +47,39 @@ DataTable.propTypes = {
   rows: PropTypes.arrayOf(PropTypes.object).isRequired
 }
 
-export default DataTable
+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/TsmData.js

@@ -0,0 +1,84 @@
+import { DataGrid } from '@mui/x-data-grid'
+import moment from 'moment'
+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 (
+    <div style={{ height: 300, width: '100%' }}>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        // getRowId={row => row.id}
+        pageSizeOptions={[5, 10]}
+      />
+    </div>
+  )
+}
+
+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/specz_catalogs.js

@@ -1,101 +1,13 @@
-import React, { useState } from 'react'
-import {
-  Typography,
-  IconButton,
-  Select,
-  MenuItem,
-  TextField,
-  Card,
-  CardContent,
-  Grid
-} from '@mui/material'
-import InfoIcon from '@mui/icons-material/Info'
-import SpeczData from '../components/SpeczData'
-
-export default function SpeczCatalogs() {
-  const [combinedCatalogName, setCombinedCatalogName] = useState('')
-  const [selectedSpeczCatalogs, setSelectedSpeczCatalogs] = useState([])
-  const [searchRadius, setSearchRadius] = useState('')
-
-  const handleCatalogNameChange = event => {
-    setCombinedCatalogName(event.target.value)
-  }
-
-  const handleSpeczCatalogsChange = event => {
-    setSelectedSpeczCatalogs(event.target.value)
-  }
-
-  const handleSearchRadiusChange = event => {
-    setSearchRadius(event.target.value)
-  }
+import React from 'react'
+import { Typography, CircularProgress } from '@mui/material'
 
+function SpeczCatalogs() {
   return (
-    <Card>
-      <CardContent>
-        <Grid container spacing={3}>
-          <Grid item xs={12}>
-            <Typography variant="h4" style={{ textAlign: 'center' }}>
-              Combine Spec-z Catalogs
-              <IconButton aria-label="info" title="Combine Spec-z Catalogs">
-                <InfoIcon />
-              </IconButton>
-            </Typography>
-          </Grid>
-
-          <Grid item xs={12}>
-            <div>
-              <p>1. Combined catalog name:</p>
-              <TextField
-                id="combinedCatalogName"
-                label="Combined catalog name"
-                variant="outlined"
-                value={combinedCatalogName}
-                onChange={handleCatalogNameChange}
-              />
-            </div>
-          </Grid>
-
-          <Grid item xs={12}>
-            <div>
-              <p>2. Select the Spec-z Catalogs to include in your sample:</p>
-              <Select
-                multiple
-                value={selectedSpeczCatalogs}
-                onChange={handleSpeczCatalogsChange}
-              >
-                <MenuItem value="catalog1">teste 1</MenuItem>
-                <MenuItem value="catalog2">teste 2</MenuItem>
-              </Select>
-              <TextField
-                id="searchSpeczCatalogs"
-                label="Search Spec-z Catalogs"
-                variant="outlined"
-              />
-            </div>
-          </Grid>
-
-          <Grid item xs={12}>
-            <Card>
-              <CardContent>
-                <SpeczData />
-              </CardContent>
-            </Card>
-          </Grid>
-
-          <Grid item xs={12}>
-            <div>
-              <p>3. Select the cross-matching configuration choices:</p>
-              <TextField
-                id="searchRadius"
-                label="Search Radius (arcsec)"
-                variant="outlined"
-                value={searchRadius}
-                onChange={handleSearchRadiusChange}
-              />
-            </div>
-          </Grid>
-        </Grid>
-      </CardContent>
-    </Card>
+    <div style={{ textAlign: 'center' }}>
+      <Typography variant="h4">Coming soon...</Typography>
+      <CircularProgress style={{ marginTop: '20px' }} />
+    </div>
   )
 }
+
+export default SpeczCatalogs

frontend/pages/training_set_maker.js

@@ -1,27 +1,13 @@
-import { Typography, IconButton } from '@mui/material'
-import useStyles from '../styles/pages/training_set_maker'
-import InfoIcon from '@mui/icons-material/Info'
-import ProductGrid from '../components/ProductGrid'
-
-export default function TrainingSetMaker() {
-  const classes = useStyles()
+import React from 'react'
+import { Typography, CircularProgress } from '@mui/material'
 
+function TrainingSetMaker() {
   return (
-    <div
-      className={`${classes.container}`}
-      style={{ flexDirection: 'column', justifyContent: 'flex-start' }}
-    >
-      <Typography
-        variant="h4"
-        className={`${classes.title} ${classes.center}`}
-        style={{ textAlign: 'center' }}
-      >
-        Training Set Maker
-        <IconButton aria-label="info" title="Training Set Maker">
-          <InfoIcon />
-        </IconButton>
-      </Typography>
-      <ProductGrid />
+    <div style={{ textAlign: 'center' }}>
+      <Typography variant="h4">Coming soon...</Typography>
+      <CircularProgress style={{ marginTop: '20px' }} />
     </div>
   )
 }
+
+export default TrainingSetMaker