gotthard_g/aaredb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor image rendering in ResultGrid with CSS enhancements

Browse Source 
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.
This commit is contained in:
GotthardG 2025-02-27 15:24:28 +01:00
parent 37fe820f4a
commit da79115ba4
10 changed files with 36 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
backend/tests/sample_image/0_200.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 452 KiB

BIN
backend/tests/sample_image/0_700.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 707 KiB

BIN
backend/tests/sample_image/90_200.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 445 KiB

BIN
backend/tests/sample_image/90_700.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 700 KiB

BIN
backend/tests/sample_image/after_dc.jpeg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 705 KiB

BIN
backend/tests/sample_image/after_lc.jpeg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 712 KiB

BIN
backend/tests/sample_image/bb_raster_0.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 727 KiB

BIN
backend/tests/sample_image/bb_raster_90.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 711 KiB

BIN
backend/tests/sample_image/mount.jpeg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 620 KiB

83
frontend/src/components/ResultGrid.tsx
View File

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