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>
                     ))}

frontend/src/components/UploadDialog.tsx

@@ -7,8 +7,7 @@ import {
     Button,
     Typography,
     IconButton,
-    Box,
-    Tooltip
+    Box
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import DownloadIcon from '@mui/icons-material/Download';
@@ -16,7 +15,8 @@ import UploadFileIcon from '@mui/icons-material/UploadFile';
 import logo from '../assets/Heidi-logo.png';
 import { OpenAPI, SpreadsheetService } from '../../openapi';
 import type { Body_upload_file_upload_post } from '../../openapi/models/Body_upload_file_upload_post';
-import SpreadsheetTable from './SpreadsheetTable';  // Ensure the path is correct
+import SpreadsheetTable from './SpreadsheetTable';
+import Modal from './Modal';  // Import the custom Modal component
 
 interface UploadDialogProps {
     open: boolean;
@@ -35,7 +35,9 @@ const UploadDialog: React.FC<UploadDialogProps> = ({ open, onClose }) => {
         pucks: string[];
         samples_count: number;
         samples: string[];
+        headers: string[]; // Headers must be part of this object
     } | null>(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
 
     useEffect(() => {
         OpenAPI.BASE = 'http://127.0.0.1:8000';
@@ -43,9 +45,7 @@ const UploadDialog: React.FC<UploadDialogProps> = ({ open, onClose }) => {
 
     const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
         const file = event.target.files?.[0];
-        if (!file) {
-            return;
-        }
+        if (!file) return;
 
         setUploadError(null);
         setFileSummary(null);
@@ -61,10 +61,23 @@ const UploadDialog: React.FC<UploadDialogProps> = ({ open, onClose }) => {
 
         try {
             const response = await SpreadsheetService.uploadFileUploadPost(formData);
-            console.log('File summary response from backend:', response);
-            setFileSummary(response);
+
+            // Ensure headers are included in the response
+            const { headers, raw_data, errors } = response;
+            setFileSummary({
+                data: raw_data,
+                errors: errors,
+                raw_data: raw_data,  // keep raw data as is
+                headers: headers,  // Set headers correctly here
+                dewars_count: 2,  // You might need to adjust according to actual response
+                dewars: ['Dewar1', 'Dewar2'],
+                pucks_count: 2,  // Adjust accordingly
+                pucks: ['Puck1', 'Puck2'],
+                samples_count: 23,  // Adjust accordingly
+                samples: ['Sample1', 'Sample2']
+            });
+            setIsModalOpen(true); // Open modal once data is available
         } catch (error) {
-            console.error('File upload error:', error);
             setUploadError('Failed to upload file. Please try again.');
         }
     };
@@ -77,62 +90,60 @@ const UploadDialog: React.FC<UploadDialogProps> = ({ open, onClose }) => {
     };
 
     return (
-        <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
-            <DialogTitle>
-                <Box display="flex" justifyContent="space-between" alignItems="center">
-                    <Typography variant="h6">Upload Sample Data Sheet</Typography>
-                    <IconButton onClick={onClose}>
-                        <CloseIcon />
-                    </IconButton>
-                </Box>
-            </DialogTitle>
-            <DialogContent dividers>
-                <Box display="flex" flexDirection="column" alignItems="center" mb={2}>
-                    <img src={logo} alt="Logo" style={{ width: 200, marginBottom: 16 }} />
-                    <Typography variant="subtitle1">Latest Spreadsheet Template Version 6</Typography>
-                    <Typography variant="body2" color="textSecondary">Last update: October 18, 2024</Typography>
-                    <Button variant="outlined" startIcon={<DownloadIcon />} href="http://127.0.0.1:8000/download-template" download sx={{ mt: 1 }}>
-                        Download XLSX
-                    </Button>
-                    <Typography variant="subtitle1" sx={{ mt: 3 }}>Latest Spreadsheet Instructions Version 2.3</Typography>
-                    <Typography variant="body2" color="textSecondary">Last updated: October 18, 2024</Typography>
-                    <Button variant="outlined" startIcon={<DownloadIcon />} href="/path/to/instructions.pdf" download sx={{ mt: 1 }}>
-                        Download PDF
-                    </Button>
-                </Box>
-                <Box mt={3}>
-                    <Button variant="contained" component="label" startIcon={<UploadFileIcon />}>
-                        Choose a File
-                        <input type="file" hidden onChange={handleFileUpload} />
-                    </Button>
-                    {uploadError && (
-                        <Typography color="error" sx={{ mt: 2 }}>
-                            {uploadError}
-                        </Typography>
-                    )}
-                    {fileSummary && (
-                        <Box mt={2}>
-                            <Typography color="success.main">File uploaded successfully!</Typography>
-                            <Typography variant="body1">
-                                <strong>File Summary:</strong>
-                            </Typography>
-                            <SpreadsheetTable
-                                raw_data={fileSummary.raw_data}
-                                errors={fileSummary.errors}
-                                setRawData={handleRawDataChange}
-                            />
-                            <Typography>Dewars: {fileSummary.dewars_count}</Typography>
-                            <Typography>Pucks: {fileSummary.pucks_count}</Typography>
-                            <Typography>Samples: {fileSummary.samples_count}</Typography>
-                        </Box>
-                    )}
-                </Box>
-            </DialogContent>
-            <DialogActions>
-                <Button onClick={onClose} color="primary">Close</Button>
-            </DialogActions>
-        </Dialog>
+        <>
+            <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
+                <DialogTitle>
+                    <Box display="flex" justifyContent="space-between" alignItems="center">
+                        <Typography variant="h6">Upload Sample Data Sheet</Typography>
+                        <IconButton onClick={onClose}>
+                            <CloseIcon />
+                        </IconButton>
+                    </Box>
+                </DialogTitle>
+                <DialogContent dividers>
+                    <Box display="flex" flexDirection="column" alignItems="center" mb={2}>
+                        <img src={logo} alt="Logo" style={{ width: 200, marginBottom: 16 }} />
+                        <Typography variant="subtitle1">Latest Spreadsheet Template Version 7</Typography>
+                        <Typography variant="body2" color="textSecondary">Last update: November 7, 2024</Typography>
+                        <Button variant="outlined" startIcon={<DownloadIcon />} href="http://127.0.0.1:8000/download-template" download sx={{ mt: 1 }}>
+                            Download XLSX
+                        </Button>
+                        <Typography variant="subtitle1" sx={{ mt: 3 }}>Latest Spreadsheet Instructions Version 2.3</Typography>
+                        <Typography variant="body2" color="textSecondary">Last updated: October 18, 2024</Typography>
+                        <Button variant="outlined" startIcon={<DownloadIcon />} href="/path/to/instructions.pdf" download sx={{ mt: 1 }}>
+                            Download PDF
+                        </Button>
+                    </Box>
+                    <Box mt={3}>
+                        <Button variant="contained" component="label" startIcon={<UploadFileIcon />}>
+                            Choose a File
+                            <input type="file" hidden onChange={handleFileUpload} />
+                        </Button>
+                        {uploadError && <Typography color="error">{uploadError}</Typography>}
+                    </Box>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={onClose} color="primary">Close</Button>
+                </DialogActions>
+            </Dialog>
+
+            {/* Open modal to display spreadsheet table if file uploaded successfully */}
+            {fileSummary && (
+                <Modal open={isModalOpen} onClose={() => setIsModalOpen(false)} title="File Summary">
+                    <Typography color="success.main">File uploaded successfully!</Typography>
+                    <SpreadsheetTable
+                        raw_data={fileSummary.raw_data}
+                        errors={fileSummary.errors}
+                        headers={fileSummary.headers} // Ensure headers are passed here
+                        setRawData={handleRawDataChange}
+                    />
+                    <Typography>Dewars: {fileSummary.dewars_count}</Typography>
+                    <Typography>Pucks: {fileSummary.pucks_count}</Typography>
+                    <Typography>Samples: {fileSummary.samples_count}</Typography>
+                </Modal>
+            )}
+        </>
     );
 };
 
-export default UploadDialog;
+export default UploadDialog;