Fix visualizing individual EU members on NDCS/LTS/Net-Zero explorers

[SARodrigues]

Description

This PR fixes a couple bugs affecting the following pages:

• Explore NDCS (/ndcs-explore)
• Explore LTS (/lts-explore)
• Net-Zero Tracker (/net-zero-tracker)

 

The issues

• Map
  • EU as a region and individual EU countries not correctly highlighted
    Eg: with location set to "World" and the "Visualize individual submissions of EU Members on the map" checkbox unchecked, the EU is not highlighted. Similarly, with the location set to "European Union (party to the UNFCCC)" and the checkbox checked, the individual EU countries are not highlighted
• Table
  • Similarly to what happens with the map, the table is not displaying the entries correctly and is responding to the checkbox's state

 

Investigation

There are two ways in which EU countries can be selected:

• By the EUU iso code
• By the EU countries' respective iso codes (PRT, ESP, etc)

pathsWithStylesFunction (components/ndcs/shared/selectors.js), responsible the paths displayed on the map as well highlighting countries/regions, does its thing based on an array of iso codes provided by selectedCountriesISO as well as the "Visualize individual submissions" checkbox.

There are a couple issues with this:

• If the EU countries are selected by the EUU iso code, and we want to display individual submissions, we lack the list of individual EU countries' iso codes
• If the EU countries are selected by their individual iso codes, but we want to display the EU as a whole, we lack the EUU iso code
• Basing the display solely on whether or not the checkbox is checked, can break the map when it doesn't make sense to display the EU as a whole eg: the user selected a single EU country.

Similarly, the documents displayed on the table are based on selectedCountriesISO. Note that this function is also used to process the data and display statistics, especially on the sidebar. There is currently no mechanism to allow us to display documents based on the checkbox's state.

 

Proposed solution

The first obvious place to manipulate the ISO in order to fix the map display would be selectedCountriesISOFunction (or perhaps selectedCountriesFunction where the list of selected countries is coming from in the first place)(components/ndcs/shared/selectors.js).

However, because these functions are complex and used to parse/manipulate data to display in the pages (eg: sidebar statistics), and we really only to manipulate the ISOs for the map display, it seems less bug prone to create a map specific selector which takes the resulting ISO array and manipulates it for the map display.

Map

Addition of a selectedMapCountriesISOFunction, to be used by the pathsWithStylesFunction instead of the original function.
It takes the list of ISOs from selectedCountriesISO as well as the checkbox's state, and manipulates it to address the issues described in the Investigation section:

• If EUU is selected and we need to display individual countries, we:
  • remove the EUU iso code and add the individual countries' ISO codes
• If the individual ISO codes are selected but we need to display the EU as a whole:
  • remove the individual ISO codes and add the EUU one
• We restrict this manipulation to only where it makes sense: when all EU countries are displayed, be it by the EUU iso code or their individual ones. This fixes the issue where a single EU country is selected and the checkbox breaks the display.

Table

Because the original data parsing is untouched, and we have a correct list of ISO codes to fix the map display, we can simply sync the table with the map display (which will include the checkbox's state) by simply using the new selectedMapCountriesISOFunction instead of selectedCountriesISOFunction one.

 

Testing

For each of the following:

• /ndcs-explore
• /lts-explore
• /net-zero-tracker

Test the following:

• Set Location to World:
  • When the "Visualize individual (...)" checkbox is unchecked, verify that:
    • the map displays the EU as a whole, correctly highlighted
    • the table contains an "European Union" entry
  • When the checkbox is checked, verify that:
    • the map displays individual EU countries
    • the table contains the individual countries' entries
• Set Location to European Union (region)
  • Same as above
• Set Location to Top Emitters
  • Same as above
• Set Location to European Union (party to the UNFCCC)
  • Same as above
• Set Location to one or more EU countries (eg: Portugal, Spain)
  • When the checkbox is checked, verify that:
    • The map displays the countries correctly
    • The table includes the countries' entries
  • When the checkbox is unchecked, verify that:
    • The map and table aren't affected
      (displaying the EU as whole doesn't make sense in this case)

 

Tracking

Basecamp

[what-the-diff]

PR Summary

• Integration of the EU countries option within the maps

This PR introduces a new feature where the EU countries option is incorporated in the maps across the software. Now, there's a provision for toggling the visibility of EU countries on our application through a checkboxes. This has been implemented in all map-related components including 'lts-explore', 'ndcs-explore', and 'net-zero'.

• Enhanced map selectivity

A new attribute has been added that calculates and outputs the precise ISO codes to represent the selected countries on the map. This new component cooperates with the EU countries checkbox to determine what exactly is to be shown on the map.

• Improving table data alignment

We have refurbished how data is being selected for display in our tables. Instead of using a former component getSelectedCountriesISO, it now has been updated to match with our new 'map selectivity' component. This ensures the displayed data and map selection are aligned, leading to a more accurate and consistent information display.

• Revamp of shared/selectors.js file

This file has received considerable changes. The key takeaway is the incorporation of a couple of new functions that manage the display of EU countries on the map and implement the selection of map countries based on the ISO codes. Additionally, we've updated some existing elements to work alongside the newly added ones, ensuring a seamless user experience.

• Temporary Removal of Malta

A decision has been made to temporarily exclude Malta (represented by ISO code MLT) from the Europe and Central Asia regional grouping. It's important to note, this change won't affect the overall user experience.

[Bluesmile82]

Thanks!