@eeacms/volto-marine-policy 2.0.4 → 2.0.6

package/CHANGELOG.md

@@ -4,6 +4,29 @@ 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.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
+
+- style: Automated code fix [eea-jenkins - [`3f5d2ae`](https://github.com/eea/volto-marine-policy/commit/3f5d2ae0b755628580ddb0976c113be5300f2bfc)]
+- style: Automated code fix [eea-jenkins - [`6b67afb`](https://github.com/eea/volto-marine-policy/commit/6b67afba55d6aeefc36af776e33833f40552f3c6)]
+- style: Automated code fix [eea-jenkins - [`532ca8a`](https://github.com/eea/volto-marine-policy/commit/532ca8afa6cc4a6f9e93a09bc107eef37328b326)]
+
+#### :hammer_and_wrench: Others
+
+- eslint [laszlocseh - [`188282d`](https://github.com/eea/volto-marine-policy/commit/188282d7d80201395f7025eb3540a2df8bf70275)]
+- demo sites map indicators filter [laszlocseh - [`7d97ac7`](https://github.com/eea/volto-marine-policy/commit/7d97ac772e308c0b18a49034067925fb72abecc0)]
+- updates to demo sites map [laszlocseh - [`ab5ac18`](https://github.com/eea/volto-marine-policy/commit/ab5ac1874f97ceeafce6c639ec033b9f7dde09ab)]
 ### [2.0.4](https://github.com/eea/volto-marine-policy/compare/2.0.3...2.0.4) - 8 April 2025
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-marine-policy",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "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

@@ -3,8 +3,7 @@ import { Grid } from 'semantic-ui-react'; // Dropdown,
 import { addAppURL } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 import DemoSitesMap from './DemoSitesMap';
-import { ActiveFilters, DemoSitesFilters, SearchBox } from './DemoSitesFilters';
-// import DemoSitesList from './DemoSitesListing';
+import { ActiveFilters, DemoSitesFilters } from './DemoSitesFilters';
 
 import { filterCases, getFilters } from './utils';
 import { useCases } from './hooks';
@@ -15,12 +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 [searchInput, setSearchInput] = React.useState('');
-  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: [],
@@ -34,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,
@@ -43,54 +42,34 @@ export default function DemoSitesExplorerView(props) {
     activeFilters.project_filter,
     activeFilters.country_filter,
     activeItems.length,
+    indicatorOnly,
   ]);
 
   React.useEffect(() => {
-    let activeItems = filterCases(
-      cases,
-      activeFilters,
-      demoSitesIds,
-      searchInput,
-    );
+    let activeItems = filterCases(cases, activeFilters, indicatorOnly);
 
     setActiveItems(activeItems);
-  }, [demoSitesIds, activeFilters, cases, searchInput]);
+  }, [activeFilters, cases, indicatorOnly]);
 
   if (__SERVER__) return '';
 
   return (
     <div className="searchlib-block">
       <Grid.Row>
-        {hideFilters ? null : (
-          <SearchBox
-            filters={filters}
-            activeFilters={activeFilters}
-            setActiveFilters={setActiveFilters}
-            searchInput={searchInput}
-            setSearchInput={setSearchInput}
-            onSelectedCase={onSelectedCase}
-            map={map}
-          />
-        )}
-      </Grid.Row>
-      <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 ? (
@@ -102,7 +81,6 @@ export default function DemoSitesExplorerView(props) {
                 hideFilters={hideFilters}
                 selectedCase={selectedCase}
                 onSelectedCase={onSelectedCase}
-                searchInput={searchInput}
                 map={map}
                 setMap={setMap}
               />

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { centerAndResetMapZoom, scrollToElement } from './utils';
+import { centerAndResetMapZoom } from './utils';
 
 const normalizeSearchInput = (searchInput) => {
   let normInput = searchInput
@@ -87,7 +87,7 @@ export function DemoSitesFilter(props) {
                       });
                     }
                     setActiveFilters(temp);
-                    scrollToElement('search-input');
+                    // scrollToElement('search-input');
                     centerAndResetMapZoom(map);
                   }}
                 />
@@ -101,7 +101,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 +117,30 @@ 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"
+          filterName="objective_filter"
+          filters={filters}
+          activeFilters={activeFilters}
+          setActiveFilters={setActiveFilters}
+          map={map}
+        />
+      ) : (
+        ''
+      )}
+      {!hideFilters ? (
+        <DemoSitesFilter
+          filterTitle="Indicator"
+          filterName="indicator_filter"
+          filters={filters}
+          activeFilters={activeFilters}
+          setActiveFilters={setActiveFilters}
+          map={map}
+        />
+      ) : (
+        ''
+      )}
       <DemoSitesFilter
         filterTitle="Project"
         filterName="project_filter"
@@ -143,7 +149,6 @@ export function DemoSitesFilters(props) {
         setActiveFilters={setActiveFilters}
         map={map}
       />
-
       <DemoSitesFilter
         filterTitle="Country"
         filterName="country_filter"
@@ -181,7 +186,7 @@ export function SearchBox(props) {
                 // const popupOverlay = document.getElementById('popup-overlay');
                 // popupOverlay.style.visibility = 'hidden';
                 setSearchInput(searchInput);
-                scrollToElement('search-input');
+                // scrollToElement('search-input');
                 centerAndResetMapZoom(map);
               }}
             ></input>
@@ -199,7 +204,7 @@ export function SearchBox(props) {
                         searchInputElement.value = '';
                         setSearchInput('');
                         setShowClearButton(false);
-                        scrollToElement('search-input');
+                        // scrollToElement('search-input');
                         centerAndResetMapZoom(map);
                       }}
                     ></i>
@@ -219,7 +224,7 @@ export function SearchBox(props) {
                   );
 
                   setSearchInput(searchInputVal);
-                  scrollToElement('search-input');
+                  // scrollToElement('search-input');
                   centerAndResetMapZoom(map);
                 }}
                 onKeyDown={() => {}}
@@ -261,7 +266,7 @@ export function ActiveFilters(props) {
       project_filter: [],
       country_filter: [],
     });
-    scrollToElement('search-input');
+    // scrollToElement('search-input');
   };
 
   const removeFilter = (filterName, filterCode) => {
@@ -310,7 +315,7 @@ export function ActiveFilters(props) {
                       onKeyPress={() => {}}
                       onClick={() => {
                         removeFilter('objective_filter', filterCode);
-                        scrollToElement('search-input');
+                        // scrollToElement('search-input');
                       }}
                       role="button"
                       className="close icon"
@@ -335,7 +340,7 @@ export function ActiveFilters(props) {
                       onKeyPress={() => {}}
                       onClick={() => {
                         removeFilter('indicator_filter', filterCode);
-                        scrollToElement('search-input');
+                        // scrollToElement('search-input');
                       }}
                       role="button"
                       className="close icon"
@@ -360,7 +365,7 @@ export function ActiveFilters(props) {
                       onKeyPress={() => {}}
                       onClick={() => {
                         removeFilter('project_filter', filterCode);
-                        scrollToElement('search-input');
+                        // scrollToElement('search-input');
                       }}
                       role="button"
                       className="close icon"
@@ -385,7 +390,7 @@ export function ActiveFilters(props) {
                       onKeyPress={() => {}}
                       onClick={() => {
                         removeFilter('country_filter', filterCode);
-                        scrollToElement('search-input');
+                        // scrollToElement('search-input');
                       }}
                       role="button"
                       className="close icon"

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

@@ -1,10 +1,5 @@
 import React from 'react';
-import {
-  centerAndResetMapZoom,
-  scrollToElement,
-  zoomMapToFeatures,
-  isValidURL,
-} from './utils';
+import { centerAndResetMapZoom, zoomMapToFeatures, isValidURL } from './utils';
 
 const showPageNr = (pageNr, currentPage, numberOfPages) => {
   // show first 5 pages
@@ -157,7 +152,7 @@ export default function DemoSitesList(props) {
                       onKeyDown={() => {}}
                       onClick={() => {
                         // scroll to the map
-                        scrollToElement('search-input');
+                        // scrollToElement('search-input');
                         // reset map zoom
                         onSelectedCase(null);
                         centerAndResetMapZoom(map);
@@ -274,7 +269,7 @@ export default function DemoSitesList(props) {
                               .array_[9].getFeatures()
                               .clear();
                             // scroll to the map
-                            scrollToElement('ol-map-container');
+                            // scrollToElement('ol-map-container');
 
                             zoomMapToFeatures(map, [item], 5000);
                             onSelectedCase(item.values_);

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

@@ -7,10 +7,9 @@ import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 
 import InfoOverlay from './InfoOverlay';
 import FeatureInteraction from './FeatureInteraction';
-import DemoSitesList from './DemoSitesListing';
 import { useMapContext } from '@eeacms/volto-openlayers-map/api';
 
-import { centerAndResetMapZoom, getFeatures, scrollToElement } from './utils';
+import { centerAndResetMapZoom, getFeatures } from './utils';
 
 const styleCache = {};
 const MapContextGateway = ({ setMap }) => {
@@ -28,7 +27,6 @@ export default function DemoSitesMap(props) {
     hideFilters,
     selectedCase,
     onSelectedCase,
-    searchInput,
     map,
     setMap,
   } = props;
@@ -128,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}
@@ -153,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
@@ -165,22 +161,12 @@ export default function DemoSitesMap(props) {
           <MapContextGateway setMap={setMap} />
         </Layers>
       </MapWithSelection>
-      {hideFilters ? null : (
-        <DemoSitesList
-          map={map}
-          activeItems={activeItems}
-          selectedCase={selectedCase}
-          onSelectedCase={onSelectedCase}
-          pointsSource={pointsSource}
-          searchInput={searchInput}
-        />
-      )}
     </div>
   ) : null;
 }
 
 const selectedClusterStyle = (selectedFeature) => {
-  function _clusterStyle(feature) {
+  function _clusterStyle(feature, selectedFeature) {
     const size = feature.get('features').length;
     let style = styleCache[size];
 
@@ -193,7 +179,7 @@ const selectedClusterStyle = (selectedFeature) => {
           }),
           fill: new ol.style.Fill({
             // 309ebc blue 3 + green 3 mix
-            color: '#309ebc', // #006BB8 #309ebc
+            color: '#006BB8', // #006BB8 #309ebc
           }),
         }),
         text: new ol.style.Text({
@@ -207,18 +193,21 @@ const selectedClusterStyle = (selectedFeature) => {
     }
 
     if (size === 1) {
-      // let color = feature.values_.features[0].values_['color'];
-      let color = '#50B0A4'; // #0083E0 #50B0A4
+      let color = feature.values_.features[0].values_['color'];
+      let width = feature.values_.features[0].values_['width'];
+      let radius = feature.values_.features[0].values_['radius'];
+      // console.log(color)
+      // let color = '#0083E0'; // #0083E0 #50B0A4
 
       return new ol.style.Style({
         image: new ol.style.Circle({
-          radius: 6,
+          radius: radius,
           fill: new ol.style.Fill({
             color: '#fff',
           }),
           stroke: new ol.style.Stroke({
             color: color,
-            width: 6,
+            width: width,
           }),
         }),
       });

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { isValidURL } from './utils';
+import { isValidURL, truncateText } from './utils';
 
 export default function FeatureDisplay({ feature }) {
   return feature ? (
@@ -7,7 +7,7 @@ export default function FeatureDisplay({ feature }) {
       <h3>
         <strong>
           <a target="_blank" rel="noopener noreferrer" href={feature.path}>
-            {feature.title}
+            {truncateText(feature.title)}
           </a>
         </strong>
       </h3>
@@ -66,10 +66,10 @@ export default function FeatureDisplay({ feature }) {
         ''
       )}
 
-      {/* <div>
-        <h4>NWRMs implemented</h4>
+      <div>
+        <span className="popup-title blue">Indicators</span>
         <ul>
-          {feature.nwrms_implemented.map((item, index) => {
+          {feature.indicators.map((item, index) => {
             return (
               <li key={index}>
                 <a
@@ -83,9 +83,9 @@ export default function FeatureDisplay({ feature }) {
             );
           })}
         </ul>
-      </div> */}
+      </div>
       {/* <div>
-        <h4>Sectors </h4>
+        <h4>Indicators</h4>
         <ul>
           {feature.sectors.map((item, index) => {
             return <li key={index}>{item}</li>;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 import { useMapContext } from '@eeacms/volto-openlayers-map/api';
-import { scrollToElement, zoomMapToFeatures } from './utils';
+import { zoomMapToFeatures } from './utils';
 
 export const useStyles = () => {
   const selected = React.useMemo(
@@ -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,13 +55,12 @@ 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');
+          // scrollToElement('ol-map-container');
           // map.getView().animate({
           //   duration: 10,
           //   center: selectedFeature.geometry.flatCoordinates,
@@ -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();
@@ -38,10 +38,7 @@ 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) {
         setShowTooltip(true);
       } else {
         // handle a click in an overlay popup
@@ -58,7 +55,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), []);

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

@@ -87,7 +87,7 @@
     display: block !important;
     // width: 100%;
     // height: 100%;
-    background-color: #dae8f4;
+    background-color: #fefefe;
 
     #popup-overlay {
       position: relative !important;

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

@@ -1,5 +1,12 @@
 import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 
+export const truncateText = (str, max = 50) => {
+  if (str.length <= max) {
+    return str;
+  }
+  return str.substring(0, max) + '...';
+};
+
 export function isValidURL(string) {
   try {
     new URL(string);
@@ -40,6 +47,22 @@ 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',
+    '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',
+  };
+  const width = {
+    'Demo site': 6,
+    'Associated region': 8,
+  };
+
+  const radius = {
+    'Demo site': 6,
+    'Associated region': 5,
+  };
 
   return cases.map((c, index) => {
     const {
@@ -65,7 +88,9 @@ export function getFeatures(cases) {
         description: c.properties.description,
         index: index,
         path: c.properties.path,
-        color: c.properties.nwrm_type === 'Light' ? '#50B0A4' : '#0083E0',
+        color: colors[c.properties.objective] || '#B83230',
+        width: width[c.properties.type_is_region],
+        radius: radius[c.properties.type_is_region],
       },
       false,
     );
@@ -73,53 +98,45 @@ export function getFeatures(cases) {
   });
 }
 
-export function filterCases(cases, activeFilters, demoSitesIds, searchInput) {
+export function filterCases(cases, activeFilters, indicatorOnly) {
   const data = cases.filter((_case) => {
-    let flag_searchInput = false;
     let flag_objective = false;
-    // let flag_indicator = 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 (!searchInput) {
-      flag_searchInput = true;
+    if (indicatorOnly) {
+      let indicators = _case.properties.indicators?.map((item) => {
+        return item['title'].toString();
+      });
+      if (indicators?.includes(indicatorOnly)) flag_indicatorOnly = true;
     } else {
-      if (_case.properties.title.toLowerCase().match(searchInput)) {
-        flag_searchInput = true;
-        // } else if (
-        //   _case.properties.description.toLowerCase().match(searchInput)
-        // ) {
-        //   flag_searchInput = true;
-      }
+      flag_indicatorOnly = true;
     }
 
     // debugger;
     if (!activeFilters.objective_filter.length) {
       flag_objective = true;
     } else {
-      let objective = _case.properties.objective?.map((item) => {
-        return item['id'].toString();
-      });
+      let objective = _case.properties.objective;
 
       activeFilters.objective_filter.forEach((filter) => {
-        if (objective?.includes(filter)) flag_objective = true;
+        if (objective === filter) flag_objective = true;
       });
     }
 
-    // if (!activeFilters.sectors.length) {
-    //   flag_sectors = true;
-    // } else {
-    //   let sectors = _case.properties.sectors?.map((item) => {
-    //     return item.toString();
-    //   });
+    if (!activeFilters.indicator_filter.length) {
+      flag_indicator = true;
+    } else {
+      let indicators = _case.properties.indicators?.map((item) => {
+        return item['id'].toString();
+      });
 
-    //   activeFilters.sectors.forEach((filter) => {
-    //     if (sectors?.includes(filter)) flag_sectors = true;
-    //   });
-    // }
+      activeFilters.indicator_filter.forEach((filter) => {
+        if (indicators?.includes(filter)) flag_indicator = true;
+      });
+    }
 
     if (!activeFilters.project_filter.length) {
       flag_project = true;
@@ -143,11 +160,11 @@ export function filterCases(cases, activeFilters, demoSitesIds, searchInput) {
       });
     }
 
-    return flag_case &&
+    return flag_indicatorOnly &&
       flag_objective &&
+      flag_indicator &&
       flag_country &&
-      flag_project &&
-      flag_searchInput
+      flag_project
       ? _case
       : false;
   });
@@ -155,7 +172,7 @@ export function filterCases(cases, activeFilters, demoSitesIds, searchInput) {
   return data;
 }
 
-export function getFilters(cases) {
+export function getFilters(cases, indicatorOnly) {
   let _filters = {
     objective_filter: {},
     indicator_filter: {},
@@ -166,24 +183,52 @@ export function getFilters(cases) {
   for (let key of Object.keys(cases)) {
     const _case = cases[key];
     // debugger;
-    //   let nwrms_implemented = _case.properties.measures;
-    //   nwrms_implemented.map((item) => {
-    //     if (!_filters.nwrms_implemented.hasOwnProperty(item['id'])) {
-    //       _filters.nwrms_implemented[item['id']] = item['title'];
-    //     }
-    //     return [];
-    //   });
 
-    let project = _case.properties.project;
+    let indicators = _case.properties.indicators;
+    indicators.map((item) => {
+      if (
+        item['title'] &&
+        !_filters.indicator_filter.hasOwnProperty(item['id'])
+      ) {
+        _filters.indicator_filter[item['id']] = item['title'];
+      }
+      return [];
+    });
+
+    let objective = _case.properties.objective;
+    if (objective && !_filters.objective_filter.hasOwnProperty(objective)) {
+      _filters.objective_filter[objective] = objective;
+    }
 
-    if (!_filters.project_filter.hasOwnProperty(project)) {
-      _filters.project_filter[project] = project;
+    let project = _case.properties.project;
+    if (project && !_filters.project_filter.hasOwnProperty(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;
+    let countries = _case.properties.country || [];
     countries.map((item) => {
-      if (!_filters.country_filter.hasOwnProperty(item)) {
-        _filters.country_filter[item] = item;
+      if (item && !_filters.country_filter.hasOwnProperty(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 [];
     });