#329: Add selector to EQIP and CSP total page

[pengyin-shan]

This PR addresses issues #329 and #331.

Changes Made

1. Selector Operation Added: The Selector operation has been added to both the EQIP and CSP pages.
2. Column Pagination Implemented: Column pagination has been created for their tables to prevent overcrowding when users add many practices. This ensures the table does not expand excessively, preserving the overall layout.
3. IRA Updates: The selector tables in IRA have been updated to incorporate this new feature.

How to Test

1. Navigate to the EQIP page on the development site: https://policydesignlab-dev.ncsa.illinois.edu/eqip. You should see the default status reflect "All Practices" for both the map and the table:

2. Select random practices. Test with more than three practices to observe column pagination. YThe number displayed in the map area should change based on your selections:

3. Check that the table at the bottom of the page reflects your selections.Column pagination should function correctly when more than six columns are displayed:

4. Click the "Export this table to csv" button and you should be able to see the full table. Verify the table data.

5. Repeart step 1 to 4 for the CSP: https://policydesignlab-dev.ncsa.illinois.edu/csp

6. Play with IRA tables at https://policydesignlab-dev.ncsa.illinois.edu/ira to verify the column pagniation feature.

[navarroc]

@pengyin-shan I really like the column pagination to avoid the really long scroll bar. One issue though, I noticed if you select 4 or 5 practices where it adds a second page and then you go to page 2 and then select "all practices", which clears out the table, it says I'm on page 2 of 1. See screenshot:

[pengyin-shan]

@pengyin-shan I really like the column pagination to avoid the really long scroll bar. One issue though, I noticed if you select 4 or 5 practices where it adds a second page and then you go to page 2 and then select "all practices", which clears out the table, it says I'm on page 2 of 1. See screenshot:

Thanks for catching this @navarroc ! The bug occurred because the table's page wasn't resetting when switching to "All Practices". I've pushed a fix that resets both the column page and data page when the practice selection changes.

[navarroc]

The column reset issue is fixed, but I noticd another issue. I see an issue with the exported data for EQIP. It doesn't match what is displayed in the table. For example, I selected practice 101, 110 and 128. California in the tables shows 15146 for Agricultural Energy Management Plan - Written Benefits, but in the exported file it says 287,352.

[pengyin-shan]

The column reset issue is fixed, but I noticd another issue. I see an issue with the exported data for EQIP. It doesn't match what is displayed in the table. For example, I selected practice 101, 110 and 128. California in the tables shows 15146 for Agricultural Energy Management Plan - Written Benefits, but in the exported file it says 287,352.

Thank you @navarroc , this behavior was caused by a column mismatch, and I have replaced it with a more stable method to handle this. The downloaded file from the dev site should now reflect this change.

[navarroc]

Looks good. Tested and verified issues I noted were fixed. I don't see any other issue.

[sandeep-ps]

There may be a bug. I selected three practice codes for CSP, but all requests are using practice code 666. Please see the screenshot for more details. This is in the deployed development instance. It looks like this happens when selecting non-numeric practices.

[ylyangtw]

It works well and looks good!

[pengyin-shan]

There may be a bug. I selected three practice codes for CSP, but all requests are using practice code 666. Please see the screenshot for more details. This is in the deployed development instance. It looks like this happens when selecting non-numeric practices.

This happened because I assumed all codes were numerical. To confirm, should the codes be alphabetical? Will any special characters appear in the codes?

Could you provide an example of an alphabetical code that is non-zero so I can test? It shouldn’t take too much time to add this feature.

[sandeep-ps]

There may be a bug. I selected three practice codes for CSP, but all requests are using practice code 666. Please see the screenshot for more details. This is in the deployed development instance. It looks like this happens when selecting non-numeric practices.

This happened because I assumed all codes were numerical. To confirm, should the codes be alphabetical? Will any special characters appear in the codes?

Could you provide an example of an alphabetical code that is non-zero so I can test? It shouldn’t take too much time to add this feature.

Copying from Slack for future reference:

This is an example with special characters: https://policydesignlab-dev.ncsa.illinois.edu/pdl/titles/title-ii/programs/csp/state-distribution?practice_code=%221%20-%20Irrigated%20Cropland%22.
It's the url encoded form of /pdl/titles/title-ii/programs/csp/state-distribution?practice_code=1 - Irrigated Cropland

[pengyin-shan]

@sandeep-ps (cc: @navarroc @ylyangtw), I have updated the code so that the selector now works with practice names containing alphanumeric characters and special symbols. These changes apply to both the EQIP and CSP pages, but it seems that only the CSP page is currently testable.

Please test multiple practices with different name formats on the CSP page to ensure they all work correctly. Let me know if you still notice the issue.

For example:

[sandeep-ps]

There is a known issue due to how a practice name and code are ingested in the database. It will be addressed through a backend fix. The rest looks good to me. Approving.

[pengyin-shan]

As a note: the Crop Bundle (3 - Soil health rotation, No till) case is currently querying https://policydesignlab-dev.ncsa.illinois.edu/pdl/titles/title-ii/programs/csp/state-distribution?practice_code=3%20-%20Soil%20health%20rotation%2C%20No%20till. All practice-code part, including comma, is encoded.

The backend will be worked to handle this case.