Add image rendering to ResultGrid with zoom effect

This update introduces an "Images" column in the ResultGrid component, displaying thumbnails that expand on hover using CSS zoom effects. Adjustments were made to styles and grid cell overflow to ensure proper rendering and interaction with zoomed images.

frontend/src/components/ResultGrid.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { DataGridPremium, GridColDef } from '@mui/x-data-grid-premium';
+import { DataGridPremium, GridColDef, GridRenderCellParams } from '@mui/x-data-grid-premium';
 import IconButton from '@mui/material/IconButton';
 import InfoIcon from '@mui/icons-material/Info';
 import { OpenAPI, SamplesService } from '../../openapi';
@@ -250,8 +250,45 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
                 return null;
             },
         },
+        {
+            field: 'images',
+            headerName: 'Images',
+            width: 300,
+            renderCell: (params) => {
+                const imageList: ImageInfo[] = params.row.images;
+
+                if (!imageList || imageList.length === 0) {
+                    return null;
+                }
+
+                return (
+                    <div style={{ display: 'flex', gap: '10px' }}>
+                        {imageList.map((img) => {
+                            const url = `${basePath}${img.filepath}`;
+                            return (
+                                <div key={img.id} style={{ position: 'relative' }}>
+                                    <img
+                                        src={url}
+                                        alt={img.comment || 'sample'}
+                                        className="zoom-image"
+                                        style={{
+                                            width: 40,
+                                            height: 40,
+                                            borderRadius: 4,
+                                            cursor: 'pointer',
+                                        }}
+                                    />
+                                </div>
+                            );
+                        })}
+                    </div>
+                );
+            },
+        },
     ];
 
+
+
     return (
         <div style={{ height: 600, width: '100%' }}>
             <DataGridPremium
@@ -261,7 +298,17 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
                 getTreeDataPath={(row: TreeRow) => row.hierarchy}
                 defaultGroupingExpansionDepth={-1}
                 getRowId={(row) => row.id}
+                sx={{
+                    '& .MuiDataGrid-cell': {
+                        overflow: 'visible',
+                    },
+                    '& .MuiDataGrid-rendererContainer': {
+                        overflow: 'visible',
+                        position: 'relative',
+                    },
+                }}
             />
+
         </div>
     );
 };

frontend/src/components/SampleImage.css

@@ -1,13 +1,16 @@
 .zoom-image {
-    transition: transform 0.3s ease;
+    transition: transform 0.3s ease, z-index 0.3s ease;
+    position: relative;
+    z-index: 1;
     cursor: pointer;
 }
 
 .zoom-image:hover {
-    transform: scale(10); /* Adjust the scale value as needed */
+    transform: scale(10); /* Enlarges the image */
-    z-index: 10; /* Bring it to front if overlapping */
+    z-index: 10; /* Brings the hovered image above other elements */
+    border: 2px solid #ccc; /* Optional: Adds a border for emphasis */
 }
 
-.tooltip:hover .tooltip-content {
+.image-container {
-    display: block !important;
+    overflow: visible; /* Ensures zoomed images are not cropped by the parent */
-}
+}