added error recognition in spreadsheet

frontend/src/components/SpreadsheetTable.tsx

@@ -1,36 +1,137 @@
-import React from 'react';
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Tooltip } from '@mui/material';
+import React, { useState, useEffect } from 'react';
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
+    Paper,
+    Tooltip,
+    TextField,
+    Typography
+} from '@mui/material';
+import { SpreadsheetService } from '../../openapi'; // Ensure correct path
 
-const SpreadsheetTable = ({ raw_data, errors }) => {
-    const getErrorForCell = (rowIdx, colIdx) => {
-        return errors.find(e => e.row === rowIdx && e.cell === colIdx);
+const SpreadsheetTable = ({ raw_data, errors, headers, setRawData }) => {
+    const [localErrors, setLocalErrors] = useState(errors || []);
+
+    // Create an error map to easily lookup errors by row and column
+    const generateErrorMap = (errorsList) => {
+        const errorMap = new Map();
+        if (Array.isArray(errorsList)) {
+            errorsList.forEach(error => {
+                const key = `${error.row}-${headers[error.cell]}`;
+                errorMap.set(key, error.message);
+            });
+        }
+        return errorMap;
     };
 
+    const errorMap = generateErrorMap(localErrors);
+
+    // Handle cell edit
+    const handleCellEdit = async (rowIndex, colIndex, newValue) => {
+        const updatedRawData = [...raw_data];
+        const columnName = headers[colIndex];
+        const currentRow = updatedRawData[rowIndex];
+
+        // Assuming data is an array and we need to set by index
+        currentRow.data[colIndex] = newValue;
+
+        try {
+            // Send a request to validate the cell
+            const response = await SpreadsheetService.validateCellValidateCellPost({
+                row: currentRow.row_num,  // Use row_num directly from the current row
+                column: columnName,
+                value: newValue
+            });
+
+            // Log the response to debug the structure
+            console.log('Validation response:', response);
+
+            // Check if response is valid and structured as expected
+            if (response.data && response.data.is_valid !== undefined) {
+                if (response.data.is_valid) {
+                    // Remove error if validation passes
+                    const updatedErrors = localErrors.filter(error => !(error.row === currentRow.row_num && error.cell === colIndex));
+                    setLocalErrors(updatedErrors);
+                } else {
+                    // Add error if validation fails
+                    const updatedErrors = [...localErrors, { row: currentRow.row_num, cell: colIndex, message: response.data.message || 'Invalid value.' }];
+                    setLocalErrors(updatedErrors);
+                }
+            } else {
+                // Handle unexpected response format
+                console.error('Unexpected response structure:', response);
+            }
+
+            // Update the raw data
+            setRawData(updatedRawData);
+        } catch (error) {
+            console.error('Validation failed:', error);
+        }
+    };
+
+    // Hook to log and monitor changes in raw data, errors, and headers
+    useEffect(() => {
+        console.log('Raw data:', raw_data);
+        console.log('Errors:', errors);
+        console.log('Headers:', headers);
+    }, [raw_data, errors, headers]);
+
+    // Ensure data is loaded before rendering
+    if (!raw_data || !headers) {
+        return <div>Loading...</div>;
+    }
+
     return (
         <TableContainer component={Paper}>
             <Table>
                 <TableHead>
                     <TableRow>
-                        {raw_data.length > 0 && Object.keys(raw_data[0].data).map((col, colIdx) => (
-                            <TableCell key={colIdx}>{`Column ${colIdx + 1}`}</TableCell>
+                        {headers.map((header, index) => (
+                            <TableCell key={index} align="center">
+                                <Typography variant="body2">{header}</Typography>
+                            </TableCell>
                         ))}
                     </TableRow>
                 </TableHead>
                 <TableBody>
-                    {raw_data.map((rowItem, rowIndex) => (
+                    {raw_data.map((row, rowIndex) => (
                         <TableRow key={rowIndex}>
-                            {Object.values(rowItem.data).map((cellValue, cellIndex) => {
-                                const cellError = getErrorForCell(rowItem.row_num, cellIndex);
+                            {headers.map((header, colIndex) => {
+                                const key = `${row.row_num}-${header}`;  // Key for error lookup should match row's row_num
+                                const errorMessage = errorMap.get(key);
+                                const isInvalid = !!errorMessage;  // Check if the cell has an error
+                                const cellValue = row.data[colIndex];  // Extract cell value via index
+
                                 return (
-                                    <TableCell
-                                        key={cellIndex}
-                                        style={{ backgroundColor: cellError ? 'red' : 'white' }}
-                                    >
-                                        <Tooltip title={cellError ? cellError.message : ''} arrow>
-                                            <span>{cellValue}</span>
-                                        </Tooltip>
+                                    <TableCell key={colIndex} align="center">
+                                        {isInvalid ? (
+                                            <Tooltip title={errorMessage} arrow>
+                                                <TextField
+                                                    value={cellValue || ""}  // Prevent null, fallback to empty string
+                                                    onChange={(e) => handleCellEdit(rowIndex, colIndex, e.target.value)}
+                                                    error={true}  // Show red border if there's an error
+                                                    fullWidth
+                                                    sx={{
+                                                        '& .MuiOutlinedInput-root.Mui-error': {
+                                                            borderColor: 'red',  // Apply red border for invalid cells
+                                                        },
+                                                    }}
+                                                />
+                                            </Tooltip>
+                                        ) : (
+                                            <TextField
+                                                value={cellValue || ""}
+                                                onChange={(e) => handleCellEdit(rowIndex, colIndex, e.target.value)}
+                                                fullWidth
+                                                disabled={true}  // Disable valid cells so they cannot be edited
+                                            />
+                                        )}
                                     </TableCell>
-                                )
+                                );
                             })}
                         </TableRow>
                     ))}