From e070fd46624b62c5fe23dc8229731d6812c990a8 Mon Sep 17 00:00:00 2001
From: GotthardG <51994228+GotthardG@users.noreply.github.com>
Date: Wed, 26 Feb 2025 15:41:29 +0100
Subject: [PATCH] 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/components/ResultGrid.tsx | 45 ++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/ResultGrid.tsx b/frontend/src/components/ResultGrid.tsx
index 2820ad6..64760ae 100644
--- a/frontend/src/components/ResultGrid.tsx
+++ b/frontend/src/components/ResultGrid.tsx
@@ -23,6 +23,7 @@ interface ResultGridProps {
 const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
     const [rows, setRows] = useState<SampleResult[]>([]);
     const [basePath, setBasePath] = React.useState("");
+    const [hoveredImageUrl, setHoveredImageUrl] = useState<string | null>(null);
 
     useEffect(() => {
         // Detect the current environment
@@ -86,8 +87,17 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
                         <img
                             src={imageUrl}
                             alt="sample"
-                            style={{width: 50, height: 50, marginRight: 5, borderRadius: 4}}
+                            style={{ width: 50, height: 50, marginRight: 5, borderRadius: 4, cursor: 'pointer' }}
+                            onMouseEnter={() => {
+                                console.log("Mouse entered image");
+                                setHoveredImageUrl(imageUrl);
+                            }}
+                            onMouseLeave={() => {
+                                console.log("Mouse left image");
+                                setHoveredImageUrl(null);
+                            }}
                         />
+
                         {imageList.length > 1 && (
                             <div className="tooltip" style={{position: 'relative', cursor: 'pointer'}}>
                                 <span>+{imageList.length - 1}</span>
@@ -126,14 +136,37 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
     },
   ];
 
+
   // 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>
-  );
+    return (
+        <div style={{ position: 'relative' }}>
+            <div style={{ height: 600, width: '100%' }}>
+                <DataGrid rows={gridRows} columns={columns} pageSize={10} />
+            </div>
+            {hoveredImageUrl && (
+                <div
+                    style={{
+                        position: 'fixed',
+                        top: '20%',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                        zIndex: 2000,
+                        border: '2px solid #ccc',
+                        background: '#fff',
+                        padding: '10px',
+                        borderRadius: '4px',
+                        pointerEvents: 'none', // Ensures hover stays on the image
+                    }}
+                >
+                    <img src={hoveredImageUrl} alt="large preview" style={{ maxWidth: '400px', maxHeight: '400px' }} />
+                </div>
+            )}
+        </div>
+    );
 };
 
+
+
 export default ResultGrid;