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 11:40:40 +01:00
parent 548a86678b
commit de4a6d2db8
2 changed files with 88 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,9 @@
// TypeScript (ResultGrid.tsx snippet)
import React, { useEffect, useState } from 'react';
import { DataGrid, GridColDef } from '@mui/x-data-grid';
import { OpenAPI, SamplesService } from '../../openapi';
import './Sampleimage.css';
interface ImageInfo {
id: number;
@ -22,14 +25,10 @@ interface ResultGridProps {
const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
const [rows, setRows] = useState<SampleResult[]>([]);
const [basePath, setBasePath] = React.useState("");
const [hoveredImageUrl, setHoveredImageUrl] = useState<string | null>(null);
const [basePath, setBasePath] = useState('');
useEffect(() => {
// Detect the current environment
const mode = import.meta.env.MODE;
// Dynamic resolution for OpenAPI.BASE
OpenAPI.BASE =
mode === 'test'
? import.meta.env.VITE_OPENAPI_BASE_TEST
@ -45,7 +44,7 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
console.log('Environment Mode:', mode);
console.log('Resolved OpenAPI.BASE:', OpenAPI.BASE);
// Set the base path for images dynamically
// Update the base path for images
setBasePath(`${OpenAPI.BASE}/`);
}, []);
@ -74,30 +73,16 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
const imageList: ImageInfo[] = params.value;
if (imageList && imageList.length) {
const primaryImage = imageList[0];
// Define the base path to your backend images directory
const imageUrl = basePath + primaryImage.filepath;
console.log("Local relative path:", imageUrl);
console.log("Updated image URL:", imageUrl);
return (
<div style={{ display: 'flex', alignItems: 'center', position: 'relative' }}>
<img
src={imageUrl}
alt="sample"
style={{ width: 50, height: 50, marginRight: 5, borderRadius: 4, cursor: 'pointer' }}
onMouseEnter={() => {
console.log("Mouse entered image");
setHoveredImageUrl(imageUrl);
}}
onMouseLeave={() => {
console.log("Mouse left image");
setHoveredImageUrl(null);
}}
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>
@ -115,16 +100,18 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
}}
>
{imageList.slice(1).map((img) => {
const tooltipImageUrl = basePath + img.filepath;
const url = basePath + img.filepath;
return (
<img
key={img.id}
src={tooltipImageUrl}
alt="sample"
style={{width: 50, height: 50, margin: 2, borderRadius: 4}}
src={url}
alt={img.comment || 'additional sample'}
className="zoom-image"
style={{ width: 40, height: 40, marginRight: 5, borderRadius: 4 }}
/>
);
})}
</div>
</div>
)}
@ -136,37 +123,20 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
},
];
// Map each row so that DataGrid can use a unique "id" prop; here we use sample_id.
const gridRows = rows.map((row) => ({ ...row, id: row.sample_id }));
return (
<div style={{ position: 'relative' }}>
<div style={{ height: 600, width: '100%' }}>
<DataGrid rows={gridRows} columns={columns} pageSize={10} />
</div>
{hoveredImageUrl && (
<div
style={{
position: 'fixed',
top: '20%',
left: '50%',
transform: 'translate(-50%, -50%)',
zIndex: 2000,
border: '2px solid #ccc',
background: '#fff',
padding: '10px',
borderRadius: '4px',
pointerEvents: 'none', // Ensures hover stays on the image
<DataGrid
rows={rows}
columns={columns}
pageSize={10}
getRowId={(row) => row.sample_id}
sx={{
'& .MuiDataGrid-cell': {
overflow: 'visible',
},
}}
>
<img src={hoveredImageUrl} alt="large preview" style={{ maxWidth: '400px', maxHeight: '400px' }} />
</div>
)}
</div>
/>
);
};
export default ResultGrid;

13
frontend/src/components/SampleImage.css Normal file
View File

@ -0,0 +1,13 @@
.zoom-image {
transition: transform 0.3s ease;
cursor: pointer;
}
.zoom-image:hover {
transform: scale(10); /* Adjust the scale value as needed */
z-index: 10; /* Bring it to front if overlapping */
}
.tooltip:hover .tooltip-content {
display: block !important;
}