Refactor image rendering in ResultGrid with CSS enhancements

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.

frontend/src/components/ResultGrid.tsx

@@ -49,17 +49,29 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
     }, []);
 
     useEffect(() => {
-        console.log("Fetching sample results for active_pgroup:", activePgroup);
-        SamplesService.getSampleResultsSamplesResultsGet(activePgroup)
-            .then((response: SampleResult[]) => {
-                console.log("Response received:", response);
-                setRows(response);
-            })
-            .catch((err: Error) => {
-                console.error('Error fetching sample results:', err);
-            });
+        const fetchData = () => {
+            console.log("Fetching sample results for active_pgroup:", activePgroup);
+            SamplesService.getSampleResultsSamplesResultsGet(activePgroup)
+                .then((response: SampleResult[]) => {
+                    console.log("Response received:", response);
+                    setRows(response);
+                })
+                .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]);
 
+
     const columns: GridColDef[] = [
         { field: 'sample_id', headerName: 'ID', width: 70 },
         { field: 'sample_name', headerName: 'Sample Name', width: 150 },