From fff3e9f88453d649893e5faf099bd7603ef785ab Mon Sep 17 00:00:00 2001
From: GotthardG <51994228+GotthardG@users.noreply.github.com>
Date: Tue, 4 Mar 2025 11:57:39 +0100
Subject: [PATCH] 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 | 49 ++++++++++++++++++++++++-
frontend/src/components/SampleImage.css | 15 +++++---
2 files changed, 57 insertions(+), 7 deletions(-)
diff --git a/frontend/src/components/ResultGrid.tsx b/frontend/src/components/ResultGrid.tsx
index 9ede4e4..36e4a7b 100644
--- a/frontend/src/components/ResultGrid.tsx
+++ b/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>
);
};
diff --git a/frontend/src/components/SampleImage.css b/frontend/src/components/SampleImage.css
index bd6f9b9..ba545b9 100644
--- a/frontend/src/components/SampleImage.css
+++ b/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 */
- z-index: 10; /* Bring it to front if overlapping */
+ transform: scale(10); /* Enlarges the image */
+ z-index: 10; /* Brings the hovered image above other elements */
+ border: 2px solid #ccc; /* Optional: Adds a border for emphasis */
}
-.tooltip:hover .tooltip-content {
- display: block !important;
-}
+.image-container {
+ overflow: visible; /* Ensures zoomed images are not cropped by the parent */
+}
\ No newline at end of file
--
GitLab