Add beamtime relationships and enhance sample handling

This commit adds relationships to link Pucks and Samples to Beamtime in the models, enabling better data association. Includes changes to assign beamtime IDs during data generation and updates in API response models for improved data loading. Removed redundant code in testfunctions.ipynb to clean up the notebook.

frontend/src/App.tsx

@@ -12,6 +12,7 @@ import AddressManager from './pages/AddressManagerView';
 import ContactsManager from './pages/ContactsManagerView';
 import LoginView from './pages/LoginView';
 import ProtectedRoute from './components/ProtectedRoute';
+import BeamtimeOverview from './components/BeamtimeOverview';
 
 const App: React.FC = () => {
     const [openAddressManager, setOpenAddressManager] = useState(false);
@@ -84,7 +85,12 @@ const App: React.FC = () => {
                 <Route path="/" element={<ProtectedRoute element={<HomePage />} />} />
                 <Route path="/shipments" element={<ProtectedRoute element={<ShipmentView pgroups={pgroups} activePgroup={activePgroup} />} />} />
                 <Route path="/planning" element={<ProtectedRoute element={<PlanningView />} />} />
-                <Route path="/results" element={<ProtectedRoute element={<ResultsView pgroups={pgroups} activePgroup={activePgroup} />} />} />
+                <Route path="/results/:beamtimeId" element={<ProtectedRoute element={<ResultsView pgroups={pgroups} activePgroup={activePgroup} />} />} />
+                <Route path="/beamtime-overview" element={<ProtectedRoute element={<BeamtimeOverview activePgroup={activePgroup} />} />} />
+                <Route path="/results" element={<ProtectedRoute element={<BeamtimeOverview activePgroup={activePgroup} />} />}/>
+                {/* Optionally, add a 404 fallback route */}
+                <Route path="*" element={<div>Page not found</div>} />
+
             </Routes>
             <Modal open={openAddressManager} onClose={handleCloseAddressManager} title="Address Management">
                 <AddressManager pgroups={pgroups} activePgroup={activePgroup} />

frontend/src/components/BeamtimeOverview.tsx

@@ -0,0 +1,138 @@
+import React, { useEffect, useState } from 'react';
+import { DataGridPremium, GridColDef } from '@mui/x-data-grid-premium';
+import { useNavigate } from 'react-router-dom'; // For navigation
+import { BeamtimesService } from '../../openapi';
+import { Chip, Typography } from '@mui/material';
+
+interface BeamtimeRecord {
+    id: number;
+    start_date: string;
+    end_date: string;
+    shift: string;
+    beamline: string;
+    local_contact: string;
+    pgroups: string;
+}
+
+interface BeamtimeOverviewProps {
+    activePgroup: string;
+}
+
+const BeamtimeOverview: React.FC<BeamtimeOverviewProps> = ({ activePgroup }) => {
+    const [rows, setRows] = useState<BeamtimeRecord[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+
+    // For navigation
+    const navigate = useNavigate();
+
+    const renderPgroupChips = (pgroups: string, activePgroup: string) => {
+        // Safely handle pgroups as an array
+        const pgroupsArray = pgroups.split(",").map((pgroup: string) => pgroup.trim());
+
+        if (!pgroupsArray.length) {
+            return <Typography variant="body2">No associated pgroups</Typography>;
+        }
+
+        return pgroupsArray.map((pgroup: string) => (
+            <Chip
+                key={pgroup}
+                label={pgroup}
+                color={pgroup === activePgroup ? "primary" : "default"} // Highlight active pgroups
+                sx={{
+                    margin: 0.5,
+                    backgroundColor: pgroup === activePgroup ? '#19d238' : '#b0b0b0',
+                    color: pgroup === activePgroup ? 'white' : 'black',
+                    fontWeight: 'bold',
+                    borderRadius: '8px',
+                    height: '20px',
+                    fontSize: '12px',
+                    boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)',
+                    mr: 1,
+                    mb: 1,
+                }}
+            />
+        ));
+    };
+
+    // Fetch beamtime records from the backend
+    const fetchBeamtimeRecords = async () => {
+        try {
+            setIsLoading(true);
+            const records = await BeamtimesService.getMyBeamtimesProtectedBeamtimesMyBeamtimesGet(activePgroup);
+
+            const mappedRecords: BeamtimeRecord[] = records.map((record: any) => ({
+                id: record.id,
+                start_date: record.start_date || 'N/A',
+                end_date: record.end_date || 'N/A',
+                shift: record.shift || 'N/A',
+                beamline: record.beamline || 'N/A',
+                local_contact: `${record.local_contact.firstname || "N/A"} ${record.local_contact.lastname || "N/A"}`,
+                pgroups: record.pgroups || '',
+            }));
+
+            setRows(mappedRecords);
+        } catch (error) {
+            console.error('Failed to fetch beamtime records:', error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchBeamtimeRecords();
+    }, [activePgroup]);
+
+    // Define table columns, including the "View Results" button
+    const columns: GridColDef<BeamtimeRecord>[] = [
+        { field: 'start_date', headerName: 'Start Date', flex: 1 },
+        { field: 'end_date', headerName: 'End Date', flex: 1 },
+        { field: 'shift', headerName: "Shift", flex: 1 },
+        { field: 'beamline', headerName: 'Beamline', flex: 1 },
+        { field: 'local_contact', headerName: 'Local Contact', flex: 1 },
+        {
+            field: 'pgroups',
+            headerName: 'Pgroups',
+            flex: 2, // Slightly wider column for chips
+            renderCell: (params) => renderPgroupChips(params.row.pgroups, activePgroup),
+        },
+        {
+            field: 'viewResults',
+            headerName: 'Actions',
+            flex: 1,
+            renderCell: (params) => (
+                <button
+                    onClick={() => handleViewResults(params.row.id)}
+                    style={{
+                        padding: '6px 12px',
+                        backgroundColor: '#1976d2',
+                        color: '#fff',
+                        border: 'none',
+                        borderRadius: '4px',
+                        cursor: 'pointer',
+                    }}
+                >
+                    View Results
+                </button>
+            ),
+        },
+    ];
+
+    // Navigate to the ResultsView page for the selected beamtime
+    const handleViewResults = (beamtimeId: number) => {
+        navigate(`/results/${beamtimeId}`); // Pass the beamtimeId in the URL
+    };
+
+    return (
+        <div style={{ height: 400, width: '100%' }}>
+            <h2>Beamtime Overview</h2>
+            <DataGridPremium
+                rows={rows}
+                columns={columns}
+                loading={isLoading}
+                disableRowSelectionOnClick
+            />
+        </div>
+    );
+};
+
+export default BeamtimeOverview;

frontend/src/pages/ResultsView.tsx

@@ -1,24 +1,24 @@
-// components/ResultView.tsx
-
 import React from 'react';
+import { useParams } from 'react-router-dom';
 import SampleTracker from '../components/SampleTracker';
 import ResultGrid from '../components/ResultGrid';
 
-interface ResultsViewProps {
-    activePgroup: string;
-}
+interface ResultsViewProps {}
 
-const ResultsView: React.FC<ResultsViewProps> = ({activePgroup
-}) => {
+const ResultsView: React.FC<ResultsViewProps> = () => {
+    // Get the selected beamtime ID from the URL
+    const { beamtimeId } = useParams();
 
     return (
         <div>
             <h1>Results Page</h1>
-            <SampleTracker activePgroup={activePgroup}/>
-            <ResultGrid activePgroup={activePgroup} />
-        </div>
+            <h2>Results for Beamtime ID: {beamtimeId}</h2>
 
+            {/* Use the beamtimeId to filter or query specific results */}
+            <SampleTracker activePgroup={`beamtime_${beamtimeId}`} />
+            <ResultGrid activePgroup={`beamtime_${beamtimeId}`} />
+        </div>
     );
 };
 
-export default ResultsView;
+export default ResultsView;