Merge pull request #1698 from ClimateWatch-Vizzuality/2025-ndc-tracke…

…r-feedback

Addressing 2025 NDC Tracker feedback

app/javascript/app/components/ndcs/ndc-2025-timeline/ndc-2025-timeline-component.jsx

@@ -73,7 +73,7 @@ class CountryTimeline extends PureComponent {
       >
         <div className={styles.timeline}>
           <h3 className={styles.timelineDescription}>
-            <AbbrReplace>Latest 2025 NDC Submitted</AbbrReplace>
+            <AbbrReplace>Latest NDC Submissions</AbbrReplace>
           </h3>
           {documentYears?.length > 0 ? (
             <HorizontalTimeline

app/javascript/app/components/ndcs/ndc-2025-timeline/ndc-2025-timeline-styles.scss

@@ -103,25 +103,27 @@
         }
 
         .links {
-          display: block !important;
-          width: max-content;
+          display: block;
+          min-width: 220px;
+          width: fit-content;
           position: absolute;
           bottom: 15px;
           border-radius: 4px;
           background-color: $gray3;
-          overflow: hidden;
+          overflow-y: auto;
+          max-height: 140px;
           padding: 4px;
 
           li {
             text-align: left;
             position: relative;
-            display: block !important;
             border-bottom: 1px solid rgba($white, 0.2);
             transition: color 0.1s linear;
             border-radius: 4px;
 
             a {
               padding: 10px 30px 10px 10px;
+              display: block;
               width: auto;
               height: auto;
               font-size: $font-size;

app/javascript/app/components/ndcs/ndcs-enhancements-2025-map/ndcs-enhancements-2025-map-component.jsx

@@ -65,6 +65,7 @@ const NDCSEnhancements2025Map = ({
                   <NDCSEnhancementsTooltip
                     id={TOOLTIP_ID}
                     tooltipValues={tooltipValues}
+                    is2025
                   />
                 )}
                 {indicator && renderMapLegend()}

app/javascript/app/components/ndcs/ndcs-enhancements-2025-map/ndcs-enhancements-2025-map-selectors.js

@@ -206,7 +206,9 @@ export const reduceLegendBuckets = createSelector(
       updatedIndicator.legendBuckets
     ).reduce((acc, [key, value]) => {
       if (value.name === 'No Information') {
-        acc[key] = { ...value, name: 'No 2025 NDC' };
+        acc[key] = { ...value, name: 'No New NDC' };
+      } else if (value.name === 'Submitted 2025 NDC') {
+        acc[key] = { ...value, name: 'New NDC' };
       } else {
         acc[key] = value;
       }
@@ -217,7 +219,9 @@ export const reduceLegendBuckets = createSelector(
       updatedIndicator.locations
     ).reduce((acc, [key, value]) => {
       if (value.name === 'No Information') {
-        acc[key] = { ...value, name: 'No 2025 NDC' };
+        acc[key] = { ...value, name: 'No New NDC' };
+      } else if (value.name === 'Submitted 2025 NDC') {
+        acc[key] = { ...value, name: 'New NDC' };
       } else {
         acc[key] = value;
       }
@@ -233,13 +237,7 @@ export const sortIndicatorLegend = createSelector(
   indicator => {
     if (!indicator) return null;
     const updatedIndicator = { ...indicator };
-    const namesLegendOrder = [
-      'Submitted 2025 NDC with 2030 and 2035 targets',
-      'Submitted 2025 NDC with 2030 target',
-      'Submitted 2025 NDC',
-      'No 2025 NDC',
-      'Not Applicable'
-    ];
+    const namesLegendOrder = ['New NDC', 'No New NDC', 'Not Applicable'];
     const updatedLegendBuckets = {};
 
     Object.entries(updatedIndicator.legendBuckets).forEach(([key, value]) => {

app/javascript/app/components/ndcs/ndcs-enhancements-2025-table/ndcs-enhancements-2025-table-selectors.js

@@ -38,6 +38,7 @@ export const getIndicatorsParsed = createSelector(
               value: i.slug,
               categoryIds: i.category_ids,
               locations: i.locations,
+              labels: i.labels,
               isPreviousComparison
             })),
           'value'
@@ -61,30 +62,39 @@ export const tableGetSelectedData = createSelector(
       return [];
     }
     const refIndicator = indicators.find(
-      ind => ind.value === INDICATOR_SLUGS.emissions
-    ); // Emissions indicator is used as reference to get all countries
-    return Object.keys(refIndicator.locations).map(iso => {
-      const countryData =
-        countries.find(country => country.iso_code3 === iso) || {};
-      const row = {
-        country: countryData.wri_standard_name || iso,
-        iso
-      };
-      indicators.forEach(ind => {
-        if (ind.locations[iso]) {
-          if (ind.value === INDICATOR_SLUGS.enhancements) {
-            row[ind.label] = {
-              slug: ind.locations[iso].label_slug,
-              label: ind.locations[iso].value
-            };
-          } else {
-            row[ind.isPreviousComparison ? ind.value : ind.label] =
-              ind.locations[iso].value;
-          }
+      ind => ind.value === INDICATOR_SLUGS.submitted2025
+    );
+    const noInformationLabelId = Object.entries(refIndicator.labels).find(
+      ([, { name }]) => name === 'No Information'
+    )?.[0];
+
+    return Object.keys(refIndicator.locations)
+      .map(iso => {
+        if (refIndicator.locations[iso]?.label_id === noInformationLabelId) {
+          return null;
         }
-      });
-      return row;
-    });
+        const countryData =
+          countries.find(country => country.iso_code3 === iso) || {};
+        const row = {
+          country: countryData.wri_standard_name || iso,
+          iso
+        };
+        indicators.forEach(ind => {
+          if (ind.locations[iso]) {
+            if (ind.value === INDICATOR_SLUGS.enhancements) {
+              row[ind.label] = {
+                slug: ind.locations[iso].label_slug,
+                label: ind.locations[iso].value
+              };
+            } else {
+              row[ind.isPreviousComparison ? ind.value : ind.label] =
+                ind.locations[iso].value;
+            }
+          }
+        });
+        return row;
+      })
+      .filter(Boolean);
   }
 );
 
@@ -117,9 +127,10 @@ export const tableRemoveIsoFromData = createSelector(
       updatedD['NDC Status'] = d['2025 NDC Submission'] && {
         color,
         text:
-          d['2025 NDC Submission'] === 'No Information'
-            ? 'No 2025 NDC'
-            : d['2025 NDC Submission'],
+          {
+            'Submitted 2025 NDC': 'New NDC',
+            'No Information': 'No New NDC'
+          }[d['2025 NDC Submission']] || d['2025 NDC Submission'],
         sortIndex: Object.values(NDC_2025_LABEL_SLUGS).indexOf(
           d['2025 NDC Submission']
         )

app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-chart-selectors.js

@@ -36,10 +36,15 @@ export const getData = createSelector(
     const data = Object.entries(emissionsIndicator.locations).map(
       ([iso, location]) => ({
         iso,
-        country: iso,
+        // Country property is only used to display the country name on the chart tooltips.
+        // We'll use the wri_standard_name as a standard, and default to the ISO code if one doesn't
+        // exist in order to fail safely. (IE: FE not crashing due to unexpected/missing data)
+        country:
+          countries.find(country => iso === country.iso_code3)
+            ?.wri_standard_name || iso,
         indc_submission:
           // ! TODO Default value conflicts with the one in the component. Needs to be addressed
-          statusIndicator.locations[iso]?.value || 'No 2025 NDC',
+          statusIndicator.locations[iso]?.value || 'No New NDC',
         submission_date:
           dateIndicator.locations[iso]?.value ||
           no2025DateIndicator.locations[iso]?.value,

app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-tracker-chart-component.jsx

@@ -14,6 +14,7 @@ import {
 } from 'recharts';
 import { Switch } from 'cw-components';
 import { Link } from 'react-router-dom';
+import Button from 'components/button';
 import ButtonGroup from 'components/button-group';
 import { generateLinkToDataExplorer } from 'utils/data-explorer';
 import ModalMetadata from 'components/modal-metadata';
@@ -25,7 +26,7 @@ const SUBMISSION_TYPES = {
   submittedWith2030: 'Submitted 2025 NDC with 2030 target',
   submitted2025: 'Submitted 2025 NDC',
   // ! TODO Default value conflicts with the the default on in the selector. Needs to be addressed
-  notSubmitted: 'No 2025 NDC'
+  notSubmitted: 'No New NDC'
 };
 
 const Ndc2025TrackerChartComponent = props => {
@@ -64,9 +65,9 @@ const Ndc2025TrackerChartComponent = props => {
   const countriesBySubmissionType = React.useMemo(() => {
     const findCountriesBySubmissionType = submissionType =>
       parsedData?.filter(
-        // Don't include EU countries in the chart; instead we account for EUU
-        ({ indc_submission, is_in_eu }) =>
-          !is_in_eu && indc_submission === submissionType
+        // Note: 'EUU' is not a country, we need to explicitly exclude it.
+        ({ indc_submission, iso }) =>
+          iso !== 'EUU' && indc_submission === submissionType
       );
 
     return Object.entries(SUBMISSION_TYPES).reduce(
@@ -135,19 +136,10 @@ const Ndc2025TrackerChartComponent = props => {
   // Parse data to create a chart display
   // We do not want to display EU countries in the chart; instead we do EUU.
   const chartData = React.useMemo(() => {
-    const parsedDataWithoutEuCountries = parsedData.filter(
-      country => country.is_in_eu === false
-    );
-
-    let sortedData = parsedDataWithoutEuCountries || [];
+    let sortedData = [];
     if (sortedBy === 'submission_date') {
       sortedData = sortedData.sort((a, b) => {
-        const indcSubmissionSortOrder = [
-          'Submitted 2025 NDC with 2030 target',
-          'Submitted 2025 NDC with 2030 and 2035 targets',
-          'Submitted 2025 NDC',
-          'No 2025 NDC'
-        ];
+        const indcSubmissionSortOrder = ['New NDC', 'No New NDC'];
         const sortByIndcSubmission =
           indcSubmissionSortOrder.indexOf(a.indc_submission) -
           indcSubmissionSortOrder.indexOf(b.indc_submission);
@@ -156,7 +148,7 @@ const Ndc2025TrackerChartComponent = props => {
         return parseFloat(b.ndce_ghg) - parseFloat(a.ndce_ghg);
       });
     } else if (sortedBy === 'emissions') {
-      sortedData = sortedData.sort((a, b) => b[sortedBy] - a[sortedBy]);
+      sortedData = parsedData.sort((a, b) => b[sortedBy] - a[sortedBy]);
     }
 
     const barsData = sortedData.map((country, idx) => ({
@@ -219,7 +211,7 @@ const Ndc2025TrackerChartComponent = props => {
       <div className={layout.content}>
         <div className={styles.summary}>
           <div className={styles.summaryHeader}>
-            <h2>What countries have submitted a 2025 NDC?</h2>
+            <h2>Which countries have submitted a new NDC?</h2>
             <ButtonGroup
               className={styles.buttonGroup}
               dataTour="ndc-enhancement-tracker-04"
@@ -250,39 +242,54 @@ const Ndc2025TrackerChartComponent = props => {
                 }
               ]}
             />
+            <Button
+              className={styles.exploreNdcContentButton}
+              variant="primary"
+              href="/ndcs-explore"
+              // TODO: Analytics? Category, etc
+            >
+              Explore NDC Content
+            </Button>
           </div>
           <p>
-            Track which countries are submitting an updated version of their
-            NDC--a 2025 NDC. You can compare countries’ submissions side by side{' '}
+            Track which countries have submitted a new NDC. You can compare
+            countries’ submissions side by side{' '}
             <Link
               to="custom-compare/overview"
               title="Compare submissions"
               target="_blank"
             >
               here
             </Link>{' '}
-            or by referring to the table below. To request changes or additions,
-            please contact{' '}
+            . To request changes or additions, please contact{' '}
             <a
               href="mailto:Mengpin.Ge@wri.org?subject=NDC 2025 Tracker Update"
               target="_blank"
               rel="noopener noreferrer"
             >
               Mengpin Ge
             </a>
+            . Find out more about our resources on NDCs{' '}
+            <a
+              href="https://www.wri.org/ndcs"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <u>here</u>
+            </a>
             .
           </p>
         </div>
         <div className={styles.cards}>
           <p />
           {/* {renderCardHead(
             'submittedWith2030And2035',
-            '2025 NDCs',
+            'New NDCs',
             'with 2030 and 2035 targets'
           )}
-          {renderCardHead('submittedWith2030', '2025 NDCs', 'with 2030 target')} */}
-          {renderCardHead('submitted2025', '2025 NDCs')}
-          {renderCardHead('notSubmitted', 'No 2025 NDCs')}
+          {renderCardHead('submittedWith2030', 'New NDCs', 'with 2030 target')} */}
+          {renderCardHead('submitted2025', 'New NDCs')}
+          {renderCardHead('notSubmitted', 'No New NDCs')}
           <p />
 
           <p>Total Countries</p>

app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-tracker-chart-styles.scss

@@ -10,13 +10,14 @@
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 34px;
-    gap: 8px;
+    gap: 20px;
   }
 
   h2 {
     font-size: $font-size-large;
     color: $theme-color;
     font-weight: $font-weight;
+    flex: 1;
   }
 }
 
@@ -34,14 +35,17 @@
   }
 }
 
+.exploreNdcContentButton {
+  width: auto;
+}
+
 .cards {
   display: grid;
   // For use when displaying extra indicator cards
-  // grid-template-columns: repeat(5, 1fr);
+  // grid-template-columns: 160px repeat(4, 1fr);
   // column-gap: 20px;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: 160px repeat(3, 1fr);
   column-gap: 32px;
-
   margin-block: 45px 30px;
   row-gap: 6px;
 
@@ -53,9 +57,9 @@
 
   @media #{$tablet-landscape} {
     // For use when displaying extra indicator cards
-    // grid-template-columns: repeat(5, 214px);
+    // grid-template-columns: 160px repeat(4, 214px);
     // column-gap: 14px;
-    grid-template-columns: repeat(4, 235);
+    grid-template-columns: 160px repeat(3, 235);
     column-gap: 52px;
   }
 
@@ -66,10 +70,10 @@
 
     &:nth-child(2),
     &:nth-child(3) {
-    // For use when displaying enhanced card
-    // &:nth-child(4),
-    // For use when displaying extra indicator cards
-    // &:nth-child(5) {
+      // For use when displaying enhanced card
+      // &:nth-child(4),
+      // For use when displaying extra indicator cards
+      // &:nth-child(5) {
       @media #{$tablet-portrait} {
         font-size: $font-size-large;
       }

app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-tracker-chart.js

@@ -25,7 +25,7 @@ function Ndc2025TrackerChartContainer(props) {
   const handleInfoClick = () => {
     setModalMetadata({
       category: 'NDC Content Map',
-      slugs: '2025_status',
+      slugs: '2025_ndc',
       open: true
     });
   };