LTS Explore to only show individual EU members check if EU members di…

…splayed
ClimateWatch-Vizzuality · Jul 20, 2023 · 077ec53 · 077ec53
1 parent feb9b52
commit 077ec53
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/app/javascript/app/components/ndcs/lts-explore-map/lts-explore-map-component.jsx b/app/javascript/app/components/ndcs/lts-explore-map/lts-explore-map-component.jsx
@@ -151,7 +151,8 @@ function LTSExploreMap(props) {
     handlePngDownloadModal,
     pngSelectionSubtitle,
     selectActiveDonutIndex,
-    pngDownloadId
+    pngDownloadId,
+    showEUCountriesCheckbox
   } = props;
   useEffect(() => {
     selectActiveDonutIndex(0);
@@ -306,12 +307,14 @@ function LTSExploreMap(props) {
                       <span data-tour="lts-explore-03">
                         {renderMap({ isTablet })}
                       </span>
-                      <CheckInput
-                        theme={blueCheckboxTheme}
-                        label="Visualize individual submissions of EU Members on the map"
-                        checked={checked}
-                        onChange={() => handleOnChangeChecked(!checked)}
-                      />
+                      {showEUCountriesCheckbox && (
+                        <CheckInput
+                          theme={blueCheckboxTheme}
+                          label="Visualize individual submissions of EU Members on the map"
+                          checked={checked}
+                          onChange={() => handleOnChangeChecked(!checked)}
+                        />
+                      )}
                       {countryData && (
                         <ExploreMapTooltip
                           id={TOOLTIP_ID}
@@ -375,7 +378,8 @@ LTSExploreMap.propTypes = {
   handlePngDownloadModal: PropTypes.func.isRequired,
   pngSelectionSubtitle: PropTypes.string,
   pngDownloadId: PropTypes.string.isRequired,
-  donutActiveIndex: PropTypes.number
+  donutActiveIndex: PropTypes.number,
+  showEUCountriesCheckbox: PropTypes.bool
 };
 
 export default LTSExploreMap;
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
@@ -22,6 +22,7 @@ import {
   selectedCountriesISOFunction,
   selectedMapCountriesISOFunction,
   selectedCountriesFunction,
+  getIsEUDisplayedFunction,
   categoryIndicatorsFunction,
   pathsWithStylesFunction,
   locationsNamesFunction,
@@ -138,6 +139,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/lts-explore-map/lts-explore-map.js b/app/javascript/app/components/ndcs/lts-explore-map/lts-explore-map.js
@@ -31,7 +31,8 @@ import {
   getDonutActiveIndex,
   getPngSelectionSubtitle,
   getLocations,
-  getSelectedLocations
+  getSelectedLocations,
+  getShowEUCountriesCheckbox
 } from './lts-explore-map-selectors';
 
 const actions = {
@@ -76,7 +77,8 @@ const mapStateToProps = (state, { location }) => {
     donutActiveIndex: getDonutActiveIndex(LTSWithSelection),
     pngSelectionSubtitle: getPngSelectionSubtitle(LTSWithSelection),
     locations: getLocations(LTSWithSelection),
-    selectedLocations: getSelectedLocations(LTSWithSelection)
+    selectedLocations: getSelectedLocations(LTSWithSelection),
+    showEUCountriesCheckbox: getShowEUCountriesCheckbox(LTSWithSelection)
   };
 };