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:55:56 +01:00
parent da79115ba4
commit c3cf463f06
1 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,17 +49,29 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
}, []); }, []);
useEffect(() => { useEffect(() => {
console.log("Fetching sample results for active_pgroup:", activePgroup); const fetchData = () => {
SamplesService.getSampleResultsSamplesResultsGet(activePgroup) console.log("Fetching sample results for active_pgroup:", activePgroup);
.then((response: SampleResult[]) => { SamplesService.getSampleResultsSamplesResultsGet(activePgroup)
console.log("Response received:", response); .then((response: SampleResult[]) => {
setRows(response); console.log("Response received:", response);
}) setRows(response);
.catch((err: Error) => { })
console.error('Error fetching sample results:', err); .catch((err: Error) => {
}); console.error("Error fetching sample results:", err);
});
};
// Fetch data initially.
fetchData();
// Set up an interval to refresh data every 15 seconds (adjust as needed)
const intervalId = setInterval(fetchData, 15000);
// Clean up when component unmounts or activePgroup changes.
return () => clearInterval(intervalId);
}, [activePgroup]); }, [activePgroup]);
const columns: GridColDef[] = [ const columns: GridColDef[] = [
{ field: 'sample_id', headerName: 'ID', width: 70 }, { field: 'sample_id', headerName: 'ID', width: 70 },
{ field: 'sample_name', headerName: 'Sample Name', width: 150 }, { field: 'sample_name', headerName: 'Sample Name', width: 150 },