Merge pull request #312 from policy-design-lab/issue_309_move_modal_t…

…o_page

Update ira page message modal and update EQIP & CSP page for new data

CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [unreleased]
+
+### Added
+- Added the top info session for IRA page [#309](https://github.com/policy-design-lab/pdl-frontend/issues/309) 
+- Added "Other CSP" statues and related categories to the CSP pages [#303](https://github.com/policy-design-lab/pdl-frontend/issues/303) 
+- Added null value handling for the latest CSP data [#301](https://github.com/policy-design-lab/pdl-frontend/issues/301) 
+
+### Changed
+- Changed the "Other Improvement" in the EQIP page categories to "Other Improvements" [#311](https://github.com/policy-design-lab/pdl-frontend/issues/311) 
+- Updated CSP category list to match latest data [#305](https://github.com/policy-design-lab/pdl-frontend/issues/305) 
+- Updated the color legends for the EQIP and CSP maps to match latest data [#304](https://github.com/policy-design-lab/pdl-frontend/issues/304) 
+
 ## [1.0.3] - 2024-08-01
 
 ### Fixed

src/components/ProgramDrawer.tsx

@@ -128,7 +128,7 @@ function EQIPCheckboxList({ setEQIPChecked, setShowPopUp, zeroCategory }) {
         "Structural",
         "Soil remediation",
         "Vegetative",
-        "Other improvement",
+        "Other improvements",
         "Soil testing",
         "Other planning",
         "Conservation planning assessment",
@@ -297,24 +297,28 @@ function CSPCheckboxList({ setCSPChecked, setShowPopUp, zeroCategory }) {
     // Match PR89 suggestions
     const CSPList = [
         "Total CSP Benefits",
+
         "2018 Practices",
         "Structural",
         "Vegetative",
         "Land management",
         "Forest management",
         "Soil remediation",
         "Existing activity payments",
-        "Bundles",
         "Soil testing",
-        "Other improvement",
+        "Other improvements",
 
         "2014 Eligible Land",
         "Cropland",
         "Grassland",
         "Rangeland",
         "Pastureland",
-        "Non-industrial private forestland",
-        "Other: supplemental, adjustment & other"
+        "Non-Industrial Private Forestland (NIPF)",
+
+        "Other CSP",
+        "Miscellaneous",
+        "Bundles",
+        "(6)(B) Planning"
     ];
     const classes = useStyles();
     return (
@@ -349,7 +353,8 @@ function CSPCheckboxList({ setCSPChecked, setShowPopUp, zeroCategory }) {
                 if (
                     category !== "2018 Practices" &&
                     category !== "2014 Eligible Land" &&
-                    category !== "Total CSP Benefits"
+                    category !== "Total CSP Benefits" &&
+                    category !== "Other CSP"
                 ) {
                     return (
                         <ListItem key={category} disablePadding>
@@ -400,7 +405,7 @@ function CSPCheckboxList({ setCSPChecked, setShowPopUp, zeroCategory }) {
                         </ListItem>
                     );
                 }
-                if (category === "2018 Practices" || category === "2014 Eligible Land") {
+                if (category === "2018 Practices" || category === "2014 Eligible Land" || category === "Other CSP") {
                     return (
                         <Box key={category}>
                             <ListItem key={category} disablePadding>

src/components/csp/CategoryMap.tsx

@@ -48,16 +48,25 @@ const MapChart = (props) => {
                                 const AArray = ACur.practiceCategories;
                                 const BCur = statuteRecord.find((s) => s.statuteName === "2014 Eligible Land");
                                 const BArray = BCur.practiceCategories;
-                                const TotalArray = AArray.concat(BArray);
+                                const CCur = statuteRecord.find((s) => s.statuteName === "Other CSP");
+                                const CArray = CCur.practiceCategories;
+                                const TotalArray = AArray.concat(BArray).concat(CArray);
                                 if (category === "2018 Practices") {
                                     categoryRecord = statuteRecord[0];
                                 } else if (category === "2014 Eligible Land") {
                                     categoryRecord = statuteRecord[1];
+                                } else if (category === "Other CSP") {
+                                    categoryRecord = statuteRecord[2];
                                 } else {
                                     categoryRecord = TotalArray.find((s) => s.practiceCategoryName === category);
                                 }
+                                if (categoryRecord === undefined) {
+                                    return null;
+                                }
                                 const categoryPayment = categoryRecord.totalPaymentInDollars;
-                                const nationwidePercentage = categoryRecord.totalPaymentInPercentageNationwide;
+                                const nationwidePercentage = categoryRecord.totalPaymentInPercentageNationwide
+                                    ? categoryRecord.totalPaymentInPercentageNationwide
+                                    : categoryRecord.totalPaymentInPercentage;
                                 const hoverContent = (
                                     <div className="map_tooltip">
                                         <div className={classes.tooltip_header}>
@@ -182,11 +191,15 @@ const CategoryMap = ({
         const AArray = ACur.practiceCategories;
         const BCur = statuteRecord.find((s) => s.statuteName === "2014 Eligible Land");
         const BArray = BCur.practiceCategories;
-        const TotalArray = AArray.concat(BArray);
+        const CCur = statuteRecord.find((s) => s.statuteName === "Other CSP");
+        const CArray = CCur.practiceCategories;
+        const TotalArray = AArray.concat(BArray).concat(CArray);
         if (category === "2018 Practices") {
             categoryRecord = statuteRecord[0];
         } else if (category === "2014 Eligible Land") {
             categoryRecord = statuteRecord[1];
+        } else if (category === "Other CSP") {
+            categoryRecord = statuteRecord[2];
         } else {
             categoryRecord = TotalArray.find((s) => s.practiceCategoryName === category);
         }
@@ -201,7 +214,7 @@ const CategoryMap = ({
     if (category === "Land management") legendCategory = "Land management-CSP";
     if (category === "Forest management") legendCategory = "Forest management-CSP";
     if (category === "Soil testing") legendCategory = "Soil testing-CSP";
-    if (category === "Other improvement") legendCategory = "Other improvement-CSP";
+    if (category === "Other improvements") legendCategory = "Other improvements-CSP";
     const customScale = legendConfig[legendCategory];
     const colorScale = d3.scaleThreshold(customScale, mapColor);
     const classes = useStyles();

src/components/csp/CategoryTable.tsx

@@ -148,11 +148,15 @@ function App({
         const AArray = ACur.practiceCategories;
         const BCur = value.statutes.find((s) => s.statuteName === "2014 Eligible Land");
         const BArray = BCur.practiceCategories;
-        const TotalArray = AArray.concat(BArray);
+        const CCur = value.statutes.find((s) => s.statuteName === "Other CSP");
+        const CArray = CCur.practiceCategories;
+        const TotalArray = AArray.concat(BArray).concat(CArray);
         if (category === "2018 Practices") {
             categoryRecord = statuteRecord[0];
         } else if (category === "2014 Eligible Land") {
             categoryRecord = statuteRecord[1];
+        } else if (category === "Other CSP") {
+            categoryRecord = statuteRecord[2];
         } else {
             categoryRecord = TotalArray.find((s) => s.practiceCategoryName === category);
         }
@@ -171,7 +175,9 @@ function App({
                     categoryBenefit: `$${Number(totalPaymentInDollars).toLocaleString(undefined, {
                         minimumFractionDigits: 2
                     })}`,
-                    categoryPercentage: `${totalPaymentInPercentageWithinState.toString()}%`,
+                    categoryPercentage: totalPaymentInPercentageWithinState
+                        ? `${totalPaymentInPercentageWithinState.toString()}%`
+                        : "0%",
                     cspBenefit: `$${value.totalPaymentInDollars.toLocaleString(undefined, {
                         minimumFractionDigits: 2
                     })}`,