From 6bd4843d38653d47d2a25663449c3eca8f5a1890 Mon Sep 17 00:00:00 2001
From: GotthardG <51994228+GotthardG@users.noreply.github.com>
Date: Wed, 5 Mar 2025 09:47:00 +0100
Subject: [PATCH] Add row-specific styling and improve image rendering

Introduced row-specific CSS classes for better UI distinction, highlighting rows based on run type and processing results. Enhanced image rendering logic with consistent styling, hover effects, and a smaller image size for better visual clarity.
---
 frontend/src/components/ResultGrid.css | 15 ++++++
 frontend/src/components/ResultGrid.tsx | 71 ++++++++++++++++++--------
 2 files changed, 65 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/components/ResultGrid.css

diff --git a/frontend/src/components/ResultGrid.css b/frontend/src/components/ResultGrid.css
new file mode 100644
index 0000000..b0bf233
--- /dev/null
+++ b/frontend/src/components/ResultGrid.css
@@ -0,0 +1,15 @@
+/* Light yellow for rows with runs */
+.row-light-yellow {
+    background-color: #fff9c4; /* Light yellow color */
+}
+
+/* Light green for rows with processing results */
+.row-light-green {
+    background-color: #dcedc8 !important; /* Light green color */
+}
+
+/* Optional: Add hover effect */
+.row-light-yellow:hover,
+.row-light-green:hover {
+    opacity: 0.9;
+}
diff --git a/frontend/src/components/ResultGrid.tsx b/frontend/src/components/ResultGrid.tsx
index de486d6..970720f 100644
--- a/frontend/src/components/ResultGrid.tsx
+++ b/frontend/src/components/ResultGrid.tsx
@@ -2,8 +2,10 @@ import React, { useEffect, useState } from 'react';
 import { DataGridPremium, GridColDef } from '@mui/x-data-grid-premium';
 import RunDetails from './RunDetails';
 import './SampleImage.css';
+import './ResultGrid.css';
 import { OpenAPI, SamplesService } from '../../openapi';
 
+
 // Extend your image info interface if needed.
 interface ImageInfo {
     id: number;
@@ -100,6 +102,11 @@ interface ResultGridProps {
 const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
     const [rows, setRows] = useState<TreeRow[]>([]);
     const [basePath, setBasePath] = useState('');
+    const hasProcessingResults = (row: TreeRow): boolean => {
+        // You can later replace this placeholder with actual logic.
+        // Mocking the logic by returning `true` for demonstration.
+        return row.type === 'run' && !!row.beamline_parameters?.detector;
+    };
 
     // Helper function to safely get the number of images.
     const getNumberOfImages = (run: ExperimentParameters): number => {
@@ -112,6 +119,23 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
         return 0;
     };
 
+    const getRowClassName = (params: { row: TreeRow }) => {
+        const { row } = params;
+
+        // Light green if the run contains processing results
+        if (hasProcessingResults(row)) {
+            return 'row-light-green';
+        }
+
+        // Light yellow if the row type is 'run'
+        if (row.type === 'run') {
+            return 'row-light-yellow';
+        }
+
+        // No special styling
+        return '';
+    };
+
     // Helper function to determine the experiment type.
     const getExperimentType = (run: ExperimentParameters): string => {
         const params = run.beamline_parameters;
@@ -229,27 +253,31 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
             headerName: 'Images',
             width: 300,
             renderCell: (params) => {
-                const images = params.row.images;
-                if (images && images.length) {
-                    return (
-                        <div style={{ display: 'flex', gap: '8px' }}>
-                            {images.map((image: ImageInfo) => (
-                                <img
-                                    key={image.id}
-                                    src={`${basePath}${image.filepath}`}
-                                    alt={image.comment || `Image ${image.id}`}
-                                    style={{
-                                        height: 50,
-                                        width: 50,
-                                        objectFit: 'cover',
-                                        borderRadius: '4px',
-                                    }}
-                                />
-                            ))}
-                        </div>
-                    );
-                }
-                return null;
+                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>
+                );
             },
         },
     ];
@@ -274,6 +302,7 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
             getRowId={(row) => row.id}
             autoHeight
             treeData
+            getRowClassName={getRowClassName}
             getTreeDataPath={(row: TreeRow) => {
                 if (row.type === 'run') {
                     // Include sample_id to make the path globally unique