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
--
GitLab