@eeacms/volto-marine-policy 2.0.5 → 2.0.7

package/CHANGELOG.md

@@ -4,6 +4,27 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [2.0.7](https://github.com/eea/volto-marine-policy/compare/2.0.6...2.0.7) - 15 April 2025
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`cb0de80`](https://github.com/eea/volto-marine-policy/commit/cb0de8004429b3dbeee35a1a35c098bec9ee5f4c)]
+- style: Automated code fix [eea-jenkins - [`c91d18b`](https://github.com/eea/volto-marine-policy/commit/c91d18b6ee31c0a7406d41c69693f4cca87ffb2a)]
+
+#### :hammer_and_wrench: Others
+
+- pylint [laszlocseh - [`20a0b87`](https://github.com/eea/volto-marine-policy/commit/20a0b87ceda212c7cf9a6d2681e21dfe2546f881)]
+- improvements to demo sites map viewer [laszlocseh - [`501420b`](https://github.com/eea/volto-marine-policy/commit/501420b5c8373f6bc79f31947a2275921ccd9dcf)]
+### [2.0.6](https://github.com/eea/volto-marine-policy/compare/2.0.5...2.0.6) - 14 April 2025
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`ae829bf`](https://github.com/eea/volto-marine-policy/commit/ae829bf49e357dc02128ff0dc4227e146ed06c0d)]
+
+#### :hammer_and_wrench: Others
+
+- fix eslint [laszlocseh - [`6e84248`](https://github.com/eea/volto-marine-policy/commit/6e8424833cbe25badb6bc4ba040048422878895f)]
+- updates to demo sites map viewer [laszlocseh - [`19dc3da`](https://github.com/eea/volto-marine-policy/commit/19dc3dac8ac9ef8f91961d0ecf7878cf7b9660a4)]
 ### [2.0.5](https://github.com/eea/volto-marine-policy/compare/2.0.4...2.0.5) - 11 April 2025
 
 #### :house: Internal changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-marine-policy",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "@eeacms/volto-marine-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Blocks/DemoSitesExplorer/DemoSitesExplorerView.js

@@ -14,11 +14,12 @@ export default function DemoSitesExplorerView(props) {
   const cases_url = config.settings.prefixPath
     ? '/@@demo-sites-map.arcgis.json'
     : '/marine/@@demo-sites-map.arcgis.json';
-
   let cases = useCases(addAppURL(cases_url));
-  const { demoSitesIds } = props; // case studies from measure view
   const [selectedCase, onSelectedCase] = React.useState(null);
-  const hideFilters = demoSitesIds ? true : false;
+
+  const { properties } = props;
+  const hideFilters = properties['@type'] === 'indicator_mo' ? true : false;
+  const indicatorOnly = hideFilters ? properties['title'] : null;
 
   const [activeFilters, setActiveFilters] = React.useState({
     objective_filter: [],
@@ -32,7 +33,7 @@ export default function DemoSitesExplorerView(props) {
   const [map, setMap] = React.useState();
 
   React.useEffect(() => {
-    const _filters = getFilters(cases);
+    const _filters = getFilters(cases, indicatorOnly);
     setFilters(_filters);
   }, [
     cases,
@@ -41,41 +42,39 @@ export default function DemoSitesExplorerView(props) {
     activeFilters.project_filter,
     activeFilters.country_filter,
     activeItems.length,
+    indicatorOnly,
   ]);
 
   React.useEffect(() => {
-    let activeItems = filterCases(cases, activeFilters, demoSitesIds);
+    let activeItems = filterCases(cases, activeFilters, indicatorOnly);
 
     setActiveItems(activeItems);
-  }, [demoSitesIds, activeFilters, cases]);
+  }, [activeFilters, cases, indicatorOnly]);
 
   if (__SERVER__) return '';
 
   return (
     <div className="searchlib-block">
       <Grid.Row>
-        {hideFilters ? null : (
-          <ActiveFilters
-            filters={filters}
-            activeFilters={activeFilters}
-            setActiveFilters={setActiveFilters}
-          />
-        )}
+        <ActiveFilters
+          filters={filters}
+          activeFilters={activeFilters}
+          setActiveFilters={setActiveFilters}
+        />
       </Grid.Row>
       <Grid.Row stretched={true} id="cse-filter">
-        {hideFilters ? null : (
-          <DemoSitesFilters
-            filters={filters}
-            activeFilters={activeFilters}
-            setActiveFilters={setActiveFilters}
-            map={map}
-          />
-        )}
+        <DemoSitesFilters
+          filters={filters}
+          activeFilters={activeFilters}
+          hideFilters={hideFilters}
+          setActiveFilters={setActiveFilters}
+          map={map}
+        />
       </Grid.Row>
       <Grid.Row>
         {cases.length ? (
           <Grid columns={12}>
-            <Grid.Column mobile={12} tablet={12} computer={12}>
+            <Grid.Column mobile={10} tablet={10} computer={10}>
               <DemoSitesMap
                 items={cases}
                 activeItems={activeItems}
@@ -86,6 +85,23 @@ export default function DemoSitesExplorerView(props) {
                 setMap={setMap}
               />
             </Grid.Column>
+            <Grid.Column mobile={2} tablet={2} computer={2}>
+              <div className="legend">
+                <div className="legend-row legend-subtitle">Legend</div>
+                <div className="legend-row">
+                  <div className="circle">
+                    <div className="dot-demosite"></div>
+                  </div>
+                  <div>Demo site</div>
+                </div>
+                <div className="legend-row">
+                  <div className="circle">
+                    <div className="dot-region"></div>
+                  </div>
+                  <div>Associated region</div>
+                </div>
+              </div>
+            </Grid.Column>
           </Grid>
         ) : null}
       </Grid.Row>

package/src/components/Blocks/DemoSitesExplorer/DemoSitesFilters.jsx

@@ -23,6 +23,21 @@ export function DemoSitesFilter(props) {
     map,
   } = props;
 
+  const customOrder = props?.customOrder || [];
+  const entries = Object.entries(filters?.[filterName] || {});
+  let sortedEntries = [];
+
+  if (customOrder.length > 0) {
+    sortedEntries = entries.sort(
+      (a, b) => customOrder.indexOf(a[0]) - customOrder.indexOf(b[0]),
+    );
+    // if(entries.length > 0 ) debugger;
+  } else {
+    sortedEntries = entries.sort((a, b) => a[1].localeCompare(b[1]));
+  }
+  const sortedData = Object.fromEntries(sortedEntries);
+  filters[filterName] = sortedData;
+
   const showInputs = (event) => {
     event.currentTarget.parentElement.classList.add('active');
   };
@@ -65,7 +80,7 @@ export function DemoSitesFilter(props) {
 
         <div className="filter-inputs">
           {Object.entries(filters?.[filterName] || {})
-            .sort((item1, item2) => item1[1].localeCompare(item2[1]))
+            // .sort((item1, item2) => item1[1].localeCompare(item2[1]))
             .map(([value, label], index) => (
               <label
                 htmlFor={label + index}
@@ -101,7 +116,7 @@ export function DemoSitesFilter(props) {
 }
 
 export function DemoSitesFilters(props) {
-  const { filters, activeFilters, setActiveFilters, map } = props;
+  const { filters, activeFilters, hideFilters, setActiveFilters, map } = props;
 
   React.useEffect(() => {
     window.addEventListener('click', (event) => {
@@ -117,24 +132,37 @@ export function DemoSitesFilters(props) {
 
   return (
     <>
-      <DemoSitesFilter
-        filterTitle="Objective"
-        filterName="objective_filter"
-        filters={filters}
-        activeFilters={activeFilters}
-        setActiveFilters={setActiveFilters}
-        map={map}
-      />
-
-      <DemoSitesFilter
-        filterTitle="Indicator"
-        filterName="indicator_filter"
-        filters={filters}
-        activeFilters={activeFilters}
-        setActiveFilters={setActiveFilters}
-        map={map}
-      />
-
+      {!hideFilters ? (
+        <DemoSitesFilter
+          filterTitle="Objective/Enabler"
+          filterName="objective_filter"
+          filters={filters}
+          activeFilters={activeFilters}
+          setActiveFilters={setActiveFilters}
+          map={map}
+          customOrder={[
+            'Protect and restore marine and freshwater ecosystems',
+            'Prevent and eliminate pollution of waters',
+            'Carbon-neutral and circular blue economy',
+            'Digital twin of the ocean',
+            'Public mobilisation and engagement',
+          ]}
+        />
+      ) : (
+        ''
+      )}
+      {!hideFilters ? (
+        <DemoSitesFilter
+          filterTitle="Indicator"
+          filterName="indicator_filter"
+          filters={filters}
+          activeFilters={activeFilters}
+          setActiveFilters={setActiveFilters}
+          map={map}
+        />
+      ) : (
+        ''
+      )}
       <DemoSitesFilter
         filterTitle="Project"
         filterName="project_filter"
@@ -143,7 +171,6 @@ export function DemoSitesFilters(props) {
         setActiveFilters={setActiveFilters}
         map={map}
       />
-
       <DemoSitesFilter
         filterTitle="Country"
         filterName="country_filter"

package/src/components/Blocks/DemoSitesExplorer/DemoSitesMap.jsx

@@ -54,7 +54,7 @@ export default function DemoSitesMap(props) {
 
   const [clusterSource] = React.useState(
     new ol.source.Cluster({
-      distance: 19,
+      distance: 0,
       source: pointsSource,
     }),
   );
@@ -126,23 +126,21 @@ export default function DemoSitesMap(props) {
       >
         <Controls attribution={false} />
         <Layers>
-          {hideFilters ? null : (
-            <button
-              className={cx(
-                'reset-map-button ui button secondary',
-                String(resetMapButtonClass),
-              )}
-              onClick={() => {
-                // scrollToElement('search-input');
-                onSelectedCase(null);
-                centerAndResetMapZoom(map);
-                map.getInteractions().array_[9].getFeatures().clear();
-              }}
-            >
-              <span className="result-info-title">Reset map</span>
-              <i className="icon ri-map-2-line"></i>
-            </button>
-          )}
+          <button
+            className={cx(
+              'reset-map-button ui button secondary',
+              String(resetMapButtonClass),
+            )}
+            onClick={() => {
+              // scrollToElement('search-input');
+              onSelectedCase(null);
+              centerAndResetMapZoom(map);
+              map.getInteractions().array_[9].getFeatures().clear();
+            }}
+          >
+            <span className="result-info-title">Reset map</span>
+            <i className="icon ri-map-2-line"></i>
+          </button>
           <InfoOverlay
             selectedFeature={selectedCase}
             onFeatureSelect={onSelectedCase}
@@ -151,8 +149,8 @@ export default function DemoSitesMap(props) {
           />
           <FeatureInteraction
             onFeatureSelect={onSelectedCase}
-            hideFilters={hideFilters}
-            selectedCase={selectedCase}
+            // hideFilters={hideFilters}
+            // selectedCase={selectedCase}
           />
           <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
           <Layer.Vector
@@ -170,10 +168,10 @@ export default function DemoSitesMap(props) {
 const selectedClusterStyle = (selectedFeature) => {
   function _clusterStyle(feature, selectedFeature) {
     const size = feature.get('features').length;
-    let style = styleCache[size];
+    let clusterStyle = styleCache[size];
 
-    if (!style) {
-      style = new ol.style.Style({
+    if (!clusterStyle) {
+      clusterStyle = new ol.style.Style({
         image: new ol.style.Circle({
           radius: 12 + Math.min(Math.floor(size / 3), 10),
           stroke: new ol.style.Stroke({
@@ -191,10 +189,10 @@ const selectedClusterStyle = (selectedFeature) => {
           }),
         }),
       });
-      styleCache[size] = style;
+      styleCache[size] = clusterStyle;
     }
-
-    if (size === 1) {
+    // set size === 1 to enable clusterization
+    if (size) {
       let color = feature.values_.features[0].values_['color'];
       let width = feature.values_.features[0].values_['width'];
       let radius = feature.values_.features[0].values_['radius'];
@@ -214,7 +212,7 @@ const selectedClusterStyle = (selectedFeature) => {
         }),
       });
     } else {
-      return style;
+      return clusterStyle;
     }
   }
   return _clusterStyle;

package/src/components/Blocks/DemoSitesExplorer/FeatureDisplay.jsx

@@ -39,13 +39,25 @@ export default function FeatureDisplay({ feature }) {
       {feature.project ? (
         <div>
           <span className="popup-title blue">Project: </span>
-          <span>{feature.project}</span>
+          <span>
+            {isValidURL(feature.project_link) ? (
+              <a
+                href={feature.project_link}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {feature.project}
+              </a>
+            ) : (
+              <span>{feature.project}</span>
+            )}
+          </span>
         </div>
       ) : (
         ''
       )}
 
-      {feature.project_link ? (
+      {/* {feature.project_link ? (
         <div>
           <span className="popup-title blue">Project link: </span>
           <span>
@@ -64,10 +76,10 @@ export default function FeatureDisplay({ feature }) {
         </div>
       ) : (
         ''
-      )}
+      )} */}
 
       <div>
-        <h4>Indicators</h4>
+        <span className="popup-title blue">Indicators</span>
         <ul>
           {feature.indicators.map((item, index) => {
             return (

package/src/components/Blocks/DemoSitesExplorer/FeatureInteraction.jsx

@@ -35,18 +35,14 @@ export const useStyles = () => {
   return { selected, selectStyle };
 };
 
-export default function FeatureInteraction({
-  onFeatureSelect,
-  hideFilters,
-  selectedCase,
-}) {
+export default function FeatureInteraction({ onFeatureSelect }) {
   // console.log('featureinteraction', selectedCase);
   const { map } = useMapContext();
   const { selectStyle } = useStyles();
 
   const select = new ol.interaction.Select({
     condition: ol.condition.click,
-    style: hideFilters ? null : selectStyle,
+    style: selectStyle,
   });
 
   React.useEffect(() => {
@@ -59,11 +55,10 @@ export default function FeatureInteraction({
         const subfeatures = feature.values_.features;
         if (subfeatures.length === 1) {
           const selectedFeature = subfeatures[0].values_;
-          if (hideFilters) {
-            const url = window.location.origin + selectedFeature.path;
-            // window.open(url);
-            window.location.href = url;
-          }
+          // if (hideFilters) {
+          //   const url = window.location.origin + selectedFeature.path;
+          //   window.location.href = url;
+          // }
           onFeatureSelect(selectedFeature);
           // scrollToElement('ol-map-container');
           // map.getView().animate({
@@ -89,7 +84,7 @@ export default function FeatureInteraction({
 
     return () => map.removeInteraction(select);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [map, selectStyle, onFeatureSelect, hideFilters]);
+  }, [map, selectStyle, onFeatureSelect]);
 
   return null;
 }

package/src/components/Blocks/DemoSitesExplorer/InfoOverlay.jsx

@@ -8,7 +8,7 @@ export default function InfoOverlay({
   selectedFeature,
   onFeatureSelect,
   layerId,
-  hideFilters,
+  // hideFilters,
 }) {
   const { map } = useMapContext();
   const [tooltip, setTooltipRef] = React.useState();
@@ -27,9 +27,13 @@ export default function InfoOverlay({
 
     const overlay = new ol.Overlay({
       element: document.getElementById('popup-overlay'),
-      positioning: 'bottom-center',
-      offset: [0, -10],
+      positioning: 'bottom-left',
+      offset: [0, 0],
       stopEvent: false,
+      // autoPan: true,
+      // autoPanAnimation: {
+      //     duration: 250,
+      // },
     });
     map.addOverlay(overlay);
 
@@ -38,12 +42,13 @@ export default function InfoOverlay({
       const features = target.getFeaturesAtPixel(pixel);
       // const popupOverlay = overlay.element; // document.getElementById('popup-overlay');
 
-      if (
-        features.length &&
-        !hideFilters // && !isCluster(features)
-      ) {
+      if (features.length) {
+        const coordinate = evt.coordinate;
+        overlay.setPosition(coordinate);
         setShowTooltip(true);
       } else {
+        // const coordinate = evt.coordinate
+        // overlay.setPosition(coordinate);
         // handle a click in an overlay popup
         if (evt.originalEvent.target.tagName === 'A') return;
         setShowTooltip(false);
@@ -58,7 +63,7 @@ export default function InfoOverlay({
       map.un('click', handler);
       map.removeOverlay(overlay);
     };
-  }, [map, tooltip, onFeatureSelect, hideFilters]); //
+  }, [map, tooltip, onFeatureSelect]); //
 
   const [isClient, setIsClient] = React.useState(false);
   React.useEffect(() => setIsClient(true), []);
@@ -67,7 +72,7 @@ export default function InfoOverlay({
     <div
       id="popup-overlay"
       style={{
-        position: 'absolute',
+        // position: 'absolute', // TODO POPUP
         zIndex: 1,
         visibility: showTooltip ? 'visible' : 'hidden',
       }}

package/src/components/Blocks/DemoSitesExplorer/styles.less

@@ -16,9 +16,9 @@
 
 #csepopup {
   // width: 300px;
-  width: 100%;
+  // width: 100%;
   // height: 100%;
-  padding: 1em;
+  padding: 1em 1em 0 1em;
   // border: 1px solid black;
   // font-size: 14px;
   // line-height: initial;
@@ -37,7 +37,7 @@
   }
 
   div {
-    margin-bottom: 16px;
+    margin-bottom: 1em;
   }
 
   ul {
@@ -75,27 +75,35 @@
   }
 }
 
+.ol-viewport {
+  overflow: visible !important;
+}
+
 .ol-overlaycontainer {
   // width: 370px;
   // height: 100%;
+  z-index: 10 !important;
 
   .ol-overlay-container {
     // position: relative !important;
-    position: absolute !important;
-    right: 30px;
-    bottom: 30px;
-    display: block !important;
+    // TODO POPUP
+    // position: absolute !important;
+    // right: 30px;
+    // bottom: 30px;
+    // display: block !important;
     // width: 100%;
     // height: 100%;
-    background-color: #fefefe;
-
-    #popup-overlay {
-      position: relative !important;
-      display: flex;
-      width: 100%;
-      height: 100%;
-      align-items: center;
-    }
+    background-color: #fafafa;
+    // border: 1px solid #004B7F;
+
+    // TODO POPUP
+    // #popup-overlay {
+    //   position: relative !important;
+    //   display: flex;
+    //   width: 100%;
+    //   height: 100%;
+    //   align-items: center;
+    // }
   }
 }
 
@@ -132,7 +140,7 @@
 
     .ui.basic.button.facet-btn {
       position: relative !important;
-      z-index: 99999;
+      z-index: 9;
       display: inline-block;
       overflow: hidden;
       padding: 0.5em 0em;
@@ -154,7 +162,7 @@
 
       span {
         position: relative !important;
-        z-index: 99999;
+        z-index: 9;
         display: inline-block;
         overflow: hidden;
         padding: 0.5em 1em;
@@ -317,6 +325,10 @@
   }
 }
 
+.active-filter-list {
+  width: 100%;
+}
+
 .sui-search-box .search-input .terms-box .terms-box-left .search-icon img {
   fill: #004b7f !important;
 }
@@ -374,3 +386,56 @@
     background-color: rgba(0, 131, 224, 0.5);
   }
 }
+
+.legend {
+  position: absolute;
+  bottom: 2em;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5em;
+
+  .legend-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+  }
+
+  .legend-subtitle {
+    font-size: 1.3em;
+    font-weight: 500;
+  }
+
+  .circle {
+    position: relative;
+    width: 22px;
+    min-width: 22px;
+    height: 22px;
+    /* dark green shade */
+    border-radius: 50%;
+    background-color: #007265;
+    gap: 0.5em;
+  }
+
+  .dot-demosite {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: white;
+    transform: translate(-50%, -50%);
+  }
+
+  .dot-region {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 2px;
+    height: 2px;
+    border-radius: 50%;
+    background-color: white;
+    transform: translate(-50%, -50%);
+  }
+}

package/src/components/Blocks/DemoSitesExplorer/utils.js

@@ -48,11 +48,11 @@ export function zoomMapToFeatures(map, features, threshold = 500) {
 export function getFeatures(cases) {
   const Feature = ol.ol.Feature;
   const colors = {
-    'Carbon-neutral and circular blue economy': '#004b7f',
+    'Carbon-neutral and circular blue economy': '#f9eb8a',
     'Digital twin of the ocean': '#004b7f',
     'Prevent and eliminate pollution of waters': '#fdaf20',
     'Protect and restore marine and freshwater ecosystems': '#007b6c',
-    'Public mobilisation and engagement': '#004b7f',
+    'Public mobilisation and engagement': '#9e83b6',
   };
   const width = {
     'Demo site': 6,
@@ -98,15 +98,22 @@ export function getFeatures(cases) {
   });
 }
 
-export function filterCases(cases, activeFilters, demoSitesIds) {
+export function filterCases(cases, activeFilters, indicatorOnly) {
   const data = cases.filter((_case) => {
     let flag_objective = false;
     let flag_indicator = false;
     let flag_project = false;
     let flag_country = false;
-    let flag_case = demoSitesIds
-      ? demoSitesIds.includes(_case.properties.url.split('/').pop())
-      : true;
+    let flag_indicatorOnly = false;
+
+    if (indicatorOnly) {
+      let indicators = _case.properties.indicators?.map((item) => {
+        return item['title'].toString();
+      });
+      if (indicators?.includes(indicatorOnly)) flag_indicatorOnly = true;
+    } else {
+      flag_indicatorOnly = true;
+    }
 
     // debugger;
     if (!activeFilters.objective_filter.length) {
@@ -123,7 +130,7 @@ export function filterCases(cases, activeFilters, demoSitesIds) {
       flag_indicator = true;
     } else {
       let indicators = _case.properties.indicators?.map((item) => {
-        return item['id'].toString();
+        return '_' + item['id'].toString();
       });
 
       activeFilters.indicator_filter.forEach((filter) => {
@@ -153,7 +160,7 @@ export function filterCases(cases, activeFilters, demoSitesIds) {
       });
     }
 
-    return flag_case &&
+    return flag_indicatorOnly &&
       flag_objective &&
       flag_indicator &&
       flag_country &&
@@ -165,7 +172,7 @@ export function filterCases(cases, activeFilters, demoSitesIds) {
   return data;
 }
 
-export function getFilters(cases) {
+export function getFilters(cases, indicatorOnly) {
   let _filters = {
     objective_filter: {},
     indicator_filter: {},
@@ -181,9 +188,9 @@ export function getFilters(cases) {
     indicators.map((item) => {
       if (
         item['title'] &&
-        !_filters.indicator_filter.hasOwnProperty(item['id'])
+        !_filters.indicator_filter.hasOwnProperty('_' + item['id'])
       ) {
-        _filters.indicator_filter[item['id']] = item['title'];
+        _filters.indicator_filter['_' + item['id']] = item['title'];
       }
       return [];
     });
@@ -195,13 +202,33 @@ export function getFilters(cases) {
 
     let project = _case.properties.project;
     if (project && !_filters.project_filter.hasOwnProperty(project)) {
-      _filters.project_filter[project] = project;
+      if (!indicatorOnly) {
+        _filters.project_filter[project] = project;
+      } else {
+        let indicators = _case.properties.indicators?.map((item) => {
+          return item['title'].toString();
+        });
+        if (indicators?.includes(indicatorOnly)) {
+          _filters.project_filter[project] = project;
+        }
+      }
+      // _filters.project_filter[project] = project;
     }
 
     let countries = _case.properties.country || [];
     countries.map((item) => {
       if (item && !_filters.country_filter.hasOwnProperty(item)) {
-        _filters.country_filter[item] = item;
+        if (!indicatorOnly) {
+          _filters.country_filter[item] = item;
+        } else {
+          let indicators = _case.properties.indicators?.map((item) => {
+            return item['title'].toString();
+          });
+          if (indicators?.includes(indicatorOnly)) {
+            _filters.country_filter[item] = item;
+          }
+        }
+        // _filters.country_filter[item] = item;
       }
       return [];
     });