Refactor image rendering in ResultGrid with CSS enhancements

Simplified image rendering logic in `ResultGrid` by removing hover state management within JavaScript. Added `SampleImage.css` to handle hover effects for images and tooltips with scalable zoom. Cleaned up unnecessary comments and improved code readability.

frontend/src/components/ResultGrid.tsx

@@ -71,56 +71,45 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
             width: 300,
             renderCell: (params) => {
                 const imageList: ImageInfo[] = params.value;
-                if (imageList && imageList.length) {
+                if (!imageList || imageList.length === 0) {
-                    const primaryImage = imageList[0];
+                    return null;
-                    const imageUrl = basePath + primaryImage.filepath;
+                }
+
+                // Filter the images to include only the two bb_raster images
+                const filteredImages = imageList.filter(
+                    (img) =>
+                        img.filepath.includes("bb_raster_0") ||
+                        img.filepath.includes("bb_raster_90")
+                );
+
+                if (filteredImages.length === 0) {
+                    return null;
+                }
 
                 return (
-                        <div style={{ display: 'flex', alignItems: 'center', position: 'relative' }}>
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
-                            <img
+                        {filteredImages.map((img) => {
-                                src={imageUrl}
-                                alt="sample"
-                                className="zoom-image"
-                                style={{ width: 40, height: 40, 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 url = basePath + img.filepath;
                             return (
                                 <img
                                     key={img.id}
                                     src={url}
-                                                    alt={img.comment || 'additional sample'}
+                                    alt={img.comment || 'sample'}
                                     className="zoom-image"
-                                                    style={{ width: 40, height: 40, marginRight: 5, borderRadius: 4 }}
+                                    style={{
+                                        width: 40,
+                                        height: 40,
+                                        marginRight: 5,
+                                        borderRadius: 4,
+                                    }}
                                 />
                             );
                         })}
-
-                                    </div>
-                                </div>
-                            )}
                     </div>
                 );
-                }
-                return null;
             },
         },
+
     ];
 
     return (