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

app/javascript/app/components/ndcs/lts-explore-map/lts-explore-map-selectors.js

@@ -20,6 +20,7 @@ import { TOP_EMITTERS_OPTION } from 'data/constants';
 import {
   selectedLocationsFunction,
   selectedCountriesISOFunction,
+  selectedMapCountriesISOFunction,
   selectedCountriesFunction,
   categoryIndicatorsFunction,
   pathsWithStylesFunction,
@@ -137,6 +138,11 @@ export const getSelectedCountriesISO = createSelector(
   selectedCountriesISOFunction
 );
 
+export const getSelectedMapCountriesISO = createSelector(
+  [getIsShowEUCountriesChecked, getSelectedCountriesISO],
+  selectedMapCountriesISOFunction
+);
+
 export const getCategories = createSelector(getCategoriesData, categories =>
   !categories
     ? null

app/javascript/app/components/ndcs/lts-explore-table/lts-explore-table-selectors.js

@@ -6,7 +6,7 @@ import isEmpty from 'lodash/isEmpty';
 import { replaceStringAbbr } from 'components/abbr-replace';
 import {
   getMapIndicator,
-  getSelectedCountriesISO
+  getSelectedMapCountriesISO
 } from 'components/ndcs/lts-explore-map/lts-explore-map-selectors';
 
 const getCountries = state => state.countries || null;
@@ -35,8 +35,8 @@ export const getIndicatorsParsed = createSelector(
 );
 
 export const tableGetSelectedData = createSelector(
-  [getIndicatorsParsed, getCountries, getSelectedCountriesISO],
-  (indicators, countries, selectedCountriesISO) => {
+  [getIndicatorsParsed, getCountries, getSelectedMapCountriesISO],
+  (indicators, countries, selectedMapCountriesISO) => {
     if (!indicators || !indicators.length || !indicators[0].locations) {
       return [];
     }
@@ -45,7 +45,7 @@ export const tableGetSelectedData = createSelector(
 
     return Object.keys(refIndicator.locations)
       .map(iso => {
-        if (!selectedCountriesISO.includes(iso)) return null;
+        if (!selectedMapCountriesISO.includes(iso)) return null;
         const countryData =
           countries.find(country => country.iso_code3 === iso) || {};
         const row = {

app/javascript/app/components/ndcs/ndcs-explore-map/ndcs-explore-map-selectors.js

@@ -35,6 +35,7 @@ import { getSubmitted2020Isos } from 'utils/indicatorCalculations';
 import {
   selectedLocationsFunction,
   selectedCountriesISOFunction,
+  selectedMapCountriesISOFunction,
   selectedCountriesFunction,
   categoryIndicatorsFunction,
   pathsWithStylesFunction,
@@ -227,6 +228,11 @@ export const getSelectedCountriesISO = createSelector(
   selectedCountriesISOFunction
 );
 
+export const getSelectedMapCountriesISO = createSelector(
+  [getIsShowEUCountriesChecked, getSelectedCountriesISO],
+  selectedMapCountriesISOFunction
+);
+
 export const getMaximumCountries = createSelector(
   getSelectedCountriesISO,
   countries => countries.length

app/javascript/app/components/ndcs/ndcs-explore-table/ndcs-explore-table-selectors.js

@@ -5,7 +5,7 @@ import { filterQuery } from 'app/utils';
 import { replaceStringAbbr } from 'components/abbr-replace';
 import {
   getMapIndicator,
-  getSelectedCountriesISO
+  getSelectedMapCountriesISO
 } from 'components/ndcs/ndcs-explore-map/ndcs-explore-map-selectors';
 import {
   getIndicatorsParsed,
@@ -51,8 +51,8 @@ export const getDefaultColumns = createSelector(
 );
 
 export const tableGetSelectedData = createSelector(
-  [getIndicatorsParsed, getCountries, getSelectedCountriesISO],
-  (indicators, countries, selectedCountriesISO) => {
+  [getIndicatorsParsed, getCountries, getSelectedMapCountriesISO],
+  (indicators, countries, selectedMapCountriesISO) => {
     if (
       !indicators ||
       !indicators.length ||
@@ -68,7 +68,7 @@ export const tableGetSelectedData = createSelector(
     if (!refIndicator) return null;
     return Object.keys(refIndicator.locations)
       .map(iso => {
-        if (!selectedCountriesISO.includes(iso)) return null;
+        if (!selectedMapCountriesISO.includes(iso)) return null;
         const countryData =
           countries.find(country => country.iso_code3 === iso) || {};
         const row = {

app/javascript/app/components/ndcs/net-zero-map/net-zero-map-selectors.js

@@ -21,6 +21,7 @@ import { getIsShowEUCountriesChecked } from 'components/ndcs/shared/explore-map/
 import { NET_ZERO_POSITIVE_LABELS, TOP_EMITTERS_OPTION } from 'data/constants';
 import {
   selectedLocationsFunction,
+  selectedMapCountriesISOFunction,
   selectedCountriesISOFunction,
   selectedCountriesFunction,
   categoryIndicatorsFunction,
@@ -143,6 +144,11 @@ export const getSelectedCountriesISO = createSelector(
   selectedCountriesISOFunction
 );
 
+export const getSelectedMapCountriesISO = createSelector(
+  [getIsShowEUCountriesChecked, getSelectedCountriesISO],
+  selectedMapCountriesISOFunction
+);
+
 const getisDefaultLocationSelected = createSelector(
   [getSelectedLocations],
   isDefaultLocationSelectedFunction

app/javascript/app/components/ndcs/net-zero-table/net-zero-table-selectors.js

@@ -4,7 +4,7 @@ import sortBy from 'lodash/sortBy';
 import isEmpty from 'lodash/isEmpty';
 import {
   getMapIndicator,
-  getSelectedCountriesISO
+  getSelectedMapCountriesISO
 } from 'components/ndcs/net-zero-map/net-zero-map-selectors';
 import { replaceStringAbbr } from 'components/abbr-replace';
 
@@ -31,8 +31,8 @@ export const getIndicatorsParsed = createSelector(
 );
 
 export const tableGetSelectedData = createSelector(
-  [getIndicatorsParsed, getCountries, getSelectedCountriesISO],
-  (indicators, countries, selectedCountriesISO) => {
+  [getIndicatorsParsed, getCountries, getSelectedMapCountriesISO],
+  (indicators, countries, selectedMapCountriesISO) => {
     if (!indicators || !indicators.length || !indicators[0].locations) {
       return [];
     }
@@ -42,7 +42,7 @@ export const tableGetSelectedData = createSelector(
 
     return Object.keys(refIndicator.locations)
       .map(iso => {
-        if (!selectedCountriesISO.includes(iso)) return null;
+        if (!selectedMapCountriesISO.includes(iso)) return null;
         const countryData =
           countries.find(country => country.iso_code3 === iso) || {};
         const row = {

app/javascript/app/components/ndcs/shared/selectors.js

@@ -1,5 +1,5 @@
 import uniq from 'lodash/uniq';
-import { europeanCountries } from 'app/data/european-countries';
+import { europeanCountries, europeSlug } from 'app/data/european-countries';
 import {
   NO_DOCUMENT_SUBMITTED_COUNTRIES,
   COUNTRY_STYLES
@@ -120,6 +120,69 @@ export const categoryIndicatorsFunction = (indicatorsParsed, category) => {
   return categoryIndicators;
 };
 
+// Get whether the EU countries are selected, checking by the 'EUU' iso code.
+// eg: ['EUU', ...]
+const getIsEUGroupSelected = selectedCountriesISO =>
+  selectedCountriesISO.includes(europeSlug);
+
+// Get whether all EU countries are selected, checking by all their individual iso codes.
+// eg: ['PRT', 'ESP', ...])
+const getAreAllEuCountriesSelected = selectedCountriesISO =>
+  europeanCountries.every(c => selectedCountriesISO.includes(c));
+
+// Get whether all EU countries are selected, either by the 'EUU' iso code or
+// all their individual iso codes.
+export const getIsEUSelectedFunction = selectedCountriesISO =>
+  getIsEUGroupSelected(selectedCountriesISO) ||
+  getAreAllEuCountriesSelected(selectedCountriesISO);
+
+// Get wether individual EU countries paths should be removed from the map, based on both
+// the "Visualize individual submissions of EU Members" checkbox and on whether all EU
+// countries are selected.
+const getRemoveEuCountriesFromPaths = (
+  showEUCountriesChecked,
+  selectedCountriesISO
+) => !showEUCountriesChecked && getIsEUSelectedFunction(selectedCountriesISO);
+
+// This function takes the array from selectedCountriesISO as well as the value from the
+// "Visualize individual submissions of EU Members" and creates a new array of iso codes
+// that can be used to correctly highlight the selected countries on the map.
+export const selectedMapCountriesISOFunction = (
+  showEUCountriesChecked,
+  selectedCountriesISO
+) => {
+  // EU countries selected as a group ('EUU' iso code)
+  const euGroupSelected = getIsEUGroupSelected(selectedCountriesISO);
+
+  // All EU countries selected by their individual ISO codes
+  const allEuCountriesSelected = getAreAllEuCountriesSelected(
+    selectedCountriesISO
+  );
+
+  let countriesToDisplay = selectedCountriesISO;
+
+  // If the EU countries are displayed as a group and we want to display them individually
+  // on the map, then we remove the 'EUU' iso code and add the countries' individual iso codes.
+  if (euGroupSelected && showEUCountriesChecked) {
+    countriesToDisplay = selectedCountriesISO.filter(iso => iso !== europeSlug);
+    countriesToDisplay.push(...europeanCountries);
+  }
+
+  // If the EU countries are displayed individually by their iso codes but we would like
+  // to display them as the EU group, we remove their individual iso codes and add the 'EUU' one.
+  if (allEuCountriesSelected && !showEUCountriesChecked) {
+    countriesToDisplay = selectedCountriesISO.filter(
+      iso => !europeanCountries.includes(iso)
+    );
+    countriesToDisplay.push(europeSlug);
+  }
+
+  return countriesToDisplay;
+};
+
+// Based on the indicator, zoom level, the selected countries and the "Visualize individual
+// submissions of EU Members" checkbox, return the paths to the map with the correct countries
+// highlighted.
 export const pathsWithStylesFunction = (
   indicator,
   zoom,
@@ -129,12 +192,25 @@ export const pathsWithStylesFunction = (
 ) => {
   if (!indicator || !worldPaths) return [];
   const paths = [];
-  const selectedWorldPaths = showEUCountriesChecked
-    ? worldPaths
-    : worldPaths.filter(p => !europeanCountries.includes(p.properties.id));
+
+  const removeEuCountriesFromPaths = getRemoveEuCountriesFromPaths(
+    showEUCountriesChecked,
+    selectedCountriesISO
+  );
+
+  const countriesToDisplayISO = selectedMapCountriesISOFunction(
+    showEUCountriesChecked,
+    selectedCountriesISO
+  );
+
+  const selectedWorldPaths = removeEuCountriesFromPaths
+    ? worldPaths.filter(p => !europeanCountries.includes(p.properties.id))
+    : worldPaths;
+
   selectedWorldPaths.forEach(path => {
     if (shouldShowPath(path, zoom)) {
       const { locations, legendBuckets } = indicator;
+
       if (!locations) {
         paths.push({
           ...path,
@@ -161,7 +237,7 @@ export const pathsWithStylesFunction = (
         }
       };
 
-      if (!selectedCountriesISO.includes(iso)) {
+      if (!countriesToDisplayISO.includes(iso)) {
         const color = '#e8ecf5';
         style.default.fill = color;
         style.hover.fill = color;