Add Image models and clean up test code structure

Introduced `ImageCreate` and `Image` models to handle image-related data in the backend. Improved the organization and readability of the testing notebook by consolidating and formatting code into distinct sections with markdown cells.

frontend/src/App.tsx

@@ -84,7 +84,7 @@ 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 />} />} />
+                <Route path="/results" element={<ProtectedRoute element={<ResultsView pgroups={pgroups} activePgroup={activePgroup} />} />} />
             </Routes>
             <Modal open={openAddressManager} onClose={handleCloseAddressManager} title="Address Management">
                 <AddressManager pgroups={pgroups} activePgroup={activePgroup} />

frontend/src/components/ResultGrid.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react';
+import { DataGrid, GridColDef } from '@mui/x-data-grid';
+import { OpenAPI, SamplesService } from '../../openapi';
+
+interface ImageInfo {
+    id: number;
+    filepath: string;
+    comment?: string;
+}
+
+interface SampleResult {
+    sample_id: number;
+    sample_name: string;
+    puck_name?: string;
+    dewar_name?: string;
+    images: ImageInfo[];
+}
+
+interface ResultGridProps {
+    activePgroup: string;
+}
+
+const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
+  const [rows, setRows] = useState<SampleResult[]>([]);
+
+    useEffect(() => {
+        console.log("Fetching sample results for active_pgroup:", activePgroup);
+        SamplesService.getSampleResultsSamplesResultsGet(activePgroup)
+            .then((response: SampleResult[]) => {
+                console.log("Response received:", response);
+                setRows(response);
+            })
+            .catch((err: Error) => {
+                console.error('Error fetching sample results:', err);
+            });
+    }, [activePgroup]);
+
+    const columns: GridColDef[] = [
+    { field: 'sample_id', headerName: 'ID', width: 70 },
+    { field: 'sample_name', headerName: 'Sample Name', width: 150 },
+    { field: 'puck_name', headerName: 'Puck Name', width: 150 },
+    { field: 'dewar_name', headerName: 'Dewar Name', width: 150 },
+    {
+      field: 'images',
+      headerName: 'Images',
+      width: 300,
+        renderCell: (params) => {
+            const imageList: ImageInfo[] = params.value;
+            if (imageList && imageList.length) {
+                const primaryImage = imageList[0];
+                // Define the base path to your backend images directory
+                const basePath = "https://localhost:8000/";
+                const imageUrl = basePath + primaryImage.filepath;
+
+                console.log("Local relative path:", imageUrl);
+
+                console.log("Updated image URL:", imageUrl);
+
+                return (
+                    <div style={{display: 'flex', alignItems: 'center', position: 'relative'}}>
+                        <img
+                            src={imageUrl}
+                            alt="sample"
+                            style={{width: 50, height: 50, marginRight: 5, borderRadius: 4}}
+                        />
+                        {imageList.length > 1 && (
+                            <div className="tooltip" style={{position: 'relative', cursor: 'pointer'}}>
+                                <span>+{imageList.length - 1}</span>
+                                <div
+                                    className="tooltip-content"
+                                    style={{
+                                        display: 'none',
+                                        position: 'absolute',
+                                        top: '60px',
+                                        left: 0,
+                                        background: '#fff',
+                                        padding: '5px',
+                                        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                                        zIndex: 100,
+                                    }}
+                                >
+                                    {imageList.slice(1).map((img) => {
+                                        const tooltipImageUrl = basePath + img.filepath;
+                                        return (
+                                            <img
+                                                key={img.id}
+                                                src={tooltipImageUrl}
+                                                alt="sample"
+                                                style={{width: 50, height: 50, margin: 2, borderRadius: 4}}
+                                            />
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                );
+            }
+            return null;
+        },
+    },
+  ];
+
+  // Map each row so that DataGrid can use a unique "id" prop; here we use sample_id.
+  const gridRows = rows.map((row) => ({ ...row, id: row.sample_id }));
+
+  return (
+    <div style={{ height: 500, width: '100%' }}>
+      <DataGrid rows={gridRows} columns={columns} pageSize={5} />
+    </div>
+  );
+};
+
+export default ResultGrid;

frontend/src/components/SampleTracker.tsx

@@ -50,7 +50,7 @@ const SampleTracker: React.FC = () => {
     // Set up polling every 1 second
     const interval = setInterval(() => {
       fetchPucks();
-    }, 1000);
+    }, 100000);
 
     // Clear interval on component unmount
     return () => clearInterval(interval);

frontend/src/pages/ResultsView.tsx

@@ -2,13 +2,22 @@
 
 import React from 'react';
 import SampleTracker from '../components/SampleTracker';
+import ResultGrid from '../components/ResultGrid';
+
+interface ResultsViewProps {
+    activePgroup: string;
+}
+
+const ResultsView: React.FC<ResultsViewProps> = ({activePgroup
+}) => {
 
-const ResultsView: React.FC = () => {
     return (
         <div>
             <h1>Results Page</h1>
             <SampleTracker />
+            <ResultGrid activePgroup={activePgroup} />
         </div>
+
     );
 };