Net-zero Explore to only show individual EU members check if EU membe…

…rs displayed
ClimateWatch-Vizzuality · Jul 20, 2023 · 81677bd · 81677bd
1 parent 077ec53
commit 81677bd
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/app/javascript/app/components/ndcs/net-zero-map/net-zero-map-component.jsx b/app/javascript/app/components/ndcs/net-zero-map/net-zero-map-component.jsx
@@ -148,7 +148,8 @@ function NetZeroMap(props) {
     tooltipValues,
     donutActiveIndex,
     selectActiveDonutIndex,
-    pngDownloadId
+    pngDownloadId,
+    showEUCountriesCheckbox
   } = props;
   useEffect(() => {
     selectActiveDonutIndex(0);
@@ -305,12 +306,14 @@ function NetZeroMap(props) {
                         text="The map reflects latest communication of each country. Explore which countries have adopted a net-zero target below and click on a country to see its climate profile."
                       />
                       {renderMap({ isTablet })}
-                      <CheckInput
-                        theme={blueCheckboxTheme}
-                        label="Visualize individual targets of EU Members on the map"
-                        checked={checked}
-                        onChange={() => handleOnChangeChecked(!checked)}
-                      />
+                      {showEUCountriesCheckbox && (
+                        <CheckInput
+                          theme={blueCheckboxTheme}
+                          label="Visualize individual targets of EU Members on the map"
+                          checked={checked}
+                          onChange={() => handleOnChangeChecked(!checked)}
+                        />
+                      )}
                       {countryData && (
                         <ExploreMapTooltip
                           id={TOOLTIP_ID}
@@ -374,7 +377,8 @@ NetZeroMap.propTypes = {
   pngSelectionSubtitle: PropTypes.string,
   pngDownloadId: PropTypes.string.isRequired,
   selectActiveDonutIndex: PropTypes.func.isRequired,
-  donutActiveIndex: PropTypes.number
+  donutActiveIndex: PropTypes.number,
+  showEUCountriesCheckbox: PropTypes.bool
 };
 
 export default NetZeroMap;
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
@@ -24,6 +24,7 @@ import {
   selectedMapCountriesISOFunction,
   selectedCountriesISOFunction,
   selectedCountriesFunction,
+  getIsEUDisplayedFunction,
   categoryIndicatorsFunction,
   pathsWithStylesFunction,
   locationsNamesFunction,
@@ -144,6 +145,11 @@ export const getSelectedCountriesISO = createSelector(
   selectedCountriesISOFunction
 );
 
+export const getShowEUCountriesCheckbox = createSelector(
+  [getSelectedCountriesISO],
+  getIsEUDisplayedFunction
+);
+
 export const getSelectedMapCountriesISO = createSelector(
   [getIsShowEUCountriesChecked, getSelectedCountriesISO],
   selectedMapCountriesISOFunction

diff --git a/app/javascript/app/components/ndcs/net-zero-map/net-zero-map.js b/app/javascript/app/components/ndcs/net-zero-map/net-zero-map.js
@@ -31,7 +31,8 @@ import {
   getDonutActiveIndex,
   getPngSelectionSubtitle,
   getLocations,
-  getSelectedLocations
+  getSelectedLocations,
+  getShowEUCountriesCheckbox
 } from './net-zero-map-selectors';
 
 const actions = {
@@ -76,7 +77,8 @@ const mapStateToProps = (state, { location }) => {
     donutActiveIndex: getDonutActiveIndex(netZeroWithSelection),
     pngSelectionSubtitle: getPngSelectionSubtitle(netZeroWithSelection),
     selectedLocations: getSelectedLocations(netZeroWithSelection),
-    locations: getLocations(netZeroWithSelection)
+    locations: getLocations(netZeroWithSelection),
+    showEUCountriesCheckbox: getShowEUCountriesCheckbox(netZeroWithSelection)
   };
 };