[Sprint 5d]: Error Identification in Spreadsheet Upload ⚠️ - Chiara & Zander

[danglorioso]

💻 Summary

Currently, we have a component that is rendered when the spreadsheet being uploaded to the database is invalid (in the file SpreadsheetPreviewFail.tsx). The logic for this only checks if the required columns are in the spreadsheet as it stands, but we want to build out functionality to address additional errors and then display them in a table on the invalid spreadsheet upload component.

Goals of this sprint:

• Implement more robust error handling in spreadsheet upload to prevent our database from being flooded with weird/unformatted data.
• Show errors to the client so they know what to change in the spreadsheet before re-uploading.

⚙️ Setup

Before starting:

1. PLEASE: **Pull the latest changes from main: git pull
2. Create a new branch for this sprint.
3. Install dependencies.
4. Run the dev server and verify the site builds.
5. Confirm everything runs.
   If you experience problems, check your .env is up to date!

🧭 Implementation

Step 1: Familiarize yourself with the invalid spreadsheet upload component

• We have an existing component that is rendered when an invalid spreadsheet is uploaded. This component has an empty table that will eventually hold all the errors that the spreadsheet contains upon upload.
• Make sure you understand this component before moving on to the next steps.

Step 2: Implement error handling based on given criteria

• The next step of this ticket is to implement the actual error detection in the spreadsheet. This will require you to examine the content of each cell in the spreadsheet and validate it against the criteria given below.
• The below list gives an idea of what kind of errors should be detected and reported.

List of errors:

• Missing required columns (this logic is already implemented and will cause a failure to upload, but the error is not reported)
• Null/empty cells in the spreadsheet (ONLY IN REQUIRED COLUMNS since we don’t care about the other ones)
• Types (each columns should have an expected type like number, string, boolean, etc. and if a cell does not match that then an error should be raised)
• You don’t have to report this as an error, but if there are any towns that end in “, MA” (e.g. “Medford, MA”), you should remove the “, MA” part. This can be done by splitting on the comma.

Step 3: Show the errors & their location in the data table in the original invalid spreadsheet upload component

• Once you have compiled a list of errors and the locations in the spreadsheet in which they occur (e.g. column, cell, etc.), you must show them to the client when the invalid spreadsheet upload component is rendered.
• This will require you to pass the errors as props to the component and then display them in the table. You should describe what the error is and where it occurs in the spreadsheet. Since Paula will be editing the spreadsheets in Excel, it would be nice if the location was in Excel format so it is useful to her.

🙌 Acceptance Criteria

• Errors in the spreadsheet are successfully identified and reported when the spreadsheet is uploaded.
• UI matches Figma exactly
• Code runs locally without errors and builds successfully
• Map displays the entirety of Massachusetts with view controls
• Boundaries accurately display regions on map
• Add a heat map layer showing any data of your choice over the state
• Merge via PR

⁉️ Questions

If you get stuck or have questions:

• DM Dan or Shayne on Slack
• Come to office hours or ask during a hack night
• Ask questions during team meetings – we’re here to help!

📝 Resources

• Figma:
• Tailwind CSS
• shadcn/ui
• npm package manager