diff --git a/app/javascript/app/components/ndcs/lts-explore-map/lts-explore-map-selectors.js b/app/javascript/app/components/ndcs/lts-explore-map/lts-explore-map-selectors.js index f084cc973..651f732dd 100644 --- a/app/javascript/app/components/ndcs/lts-explore-map/lts-explore-map-selectors.js +++ b/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 diff --git a/app/javascript/app/components/ndcs/lts-explore-table/lts-explore-table-selectors.js b/app/javascript/app/components/ndcs/lts-explore-table/lts-explore-table-selectors.js index 0e46cde95..caf0329d1 100644 --- a/app/javascript/app/components/ndcs/lts-explore-table/lts-explore-table-selectors.js +++ b/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 = { diff --git a/app/javascript/app/components/ndcs/ndcs-explore-map/ndcs-explore-map-selectors.js b/app/javascript/app/components/ndcs/ndcs-explore-map/ndcs-explore-map-selectors.js index 1d8683225..332af354e 100644 --- a/app/javascript/app/components/ndcs/ndcs-explore-map/ndcs-explore-map-selectors.js +++ b/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 diff --git a/app/javascript/app/components/ndcs/ndcs-explore-table/ndcs-explore-table-selectors.js b/app/javascript/app/components/ndcs/ndcs-explore-table/ndcs-explore-table-selectors.js index d9464dc51..f93b8bdbf 100644 --- a/app/javascript/app/components/ndcs/ndcs-explore-table/ndcs-explore-table-selectors.js +++ b/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 = { diff --git a/app/javascript/app/components/ndcs/net-zero-map/net-zero-map-selectors.js b/app/javascript/app/components/ndcs/net-zero-map/net-zero-map-selectors.js index 8e0ae90c8..7a3f36d8f 100644 --- a/app/javascript/app/components/ndcs/net-zero-map/net-zero-map-selectors.js +++ b/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 diff --git a/app/javascript/app/components/ndcs/net-zero-table/net-zero-table-selectors.js b/app/javascript/app/components/ndcs/net-zero-table/net-zero-table-selectors.js index f4c8d3b35..5fadf36c4 100644 --- a/app/javascript/app/components/ndcs/net-zero-table/net-zero-table-selectors.js +++ b/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 = { diff --git a/app/javascript/app/components/ndcs/shared/selectors.js b/app/javascript/app/components/ndcs/shared/selectors.js index f7dc56aad..b5058adb8 100644 --- a/app/javascript/app/components/ndcs/shared/selectors.js +++ b/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;