@eeacms/volto-marine-policy 2.0.8 → 2.0.10

package/CHANGELOG.md

@@ -4,6 +4,51 @@ 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.10](https://github.com/eea/volto-marine-policy/compare/2.0.9...2.0.10) - 9 May 2025
+
+#### :rocket: Dependency updates
+
+- Release @eeacms/volto-globalsearch@2.1.0 [EEA Jenkins - [`3b20bc2`](https://github.com/eea/volto-marine-policy/commit/3b20bc292d04ab81385732840ffe2c469f83fbd6)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`69cc9c8`](https://github.com/eea/volto-marine-policy/commit/69cc9c86e32d35cce4f979b36bc7d20cc4b01e8f)]
+- style: Automated code fix [eea-jenkins - [`d1a8da0`](https://github.com/eea/volto-marine-policy/commit/d1a8da01dfc0ddcc24058ba5aafb5d76be0d2ffc)]
+
+#### :hammer_and_wrench: Others
+
+- eslint [laszlocseh - [`8c27f84`](https://github.com/eea/volto-marine-policy/commit/8c27f84fcdc8adf9b12746b585c66f34b9e785a4)]
+- further improvements to demo sites map [laszlocseh - [`b15e205`](https://github.com/eea/volto-marine-policy/commit/b15e2053256552c30f26fdab581330cba420b412)]
+- eslint [laszlocseh - [`4514ee0`](https://github.com/eea/volto-marine-policy/commit/4514ee0a409e8dfe0d6975da989228f39033b343)]
+- no results message [laszlocseh - [`06b7ae6`](https://github.com/eea/volto-marine-policy/commit/06b7ae62eb7b27a2ec9e2d3f9ec62aed42a85045)]
+- fix eslint [laszlocseh - [`2a4605a`](https://github.com/eea/volto-marine-policy/commit/2a4605ac45b141d5e3f2b737a24c6afca0b5d884)]
+- optimize demo sites map rendering [laszlocseh - [`2345b60`](https://github.com/eea/volto-marine-policy/commit/2345b609a95a00a53c46ce9b92686eeb598a14a6)]
+### [2.0.9](https://github.com/eea/volto-marine-policy/compare/2.0.8...2.0.9) - 7 May 2025
+
+#### :rocket: Dependency updates
+
+- Release @eeacms/volto-searchlib@2.0.16 [EEA Jenkins - [`9d425b4`](https://github.com/eea/volto-marine-policy/commit/9d425b44fa813cf7d08d95d36af6c0f01d0e52ce)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`1c3cbdc`](https://github.com/eea/volto-marine-policy/commit/1c3cbdcc74127d45e46db9ae4fd1ac3b237ad32c)]
+- style: Automated code fix [eea-jenkins - [`b00b251`](https://github.com/eea/volto-marine-policy/commit/b00b2515e54b8ffdbc51bf301f0b0bb232b83efe)]
+- style: Automated code fix [eea-jenkins - [`e02c515`](https://github.com/eea/volto-marine-policy/commit/e02c5156ac34e4cf2fef61a27dfe64d60aad97af)]
+- style: Automated code fix [eea-jenkins - [`678b9bf`](https://github.com/eea/volto-marine-policy/commit/678b9bf2b8f83f9b3a6facaa42f5851a013462ad)]
+- style: Automated code fix [eea-jenkins - [`b1cccfb`](https://github.com/eea/volto-marine-policy/commit/b1cccfbd674890392948ad5227bfe334f55a2721)]
+
+#### :hammer_and_wrench: Others
+
+- small fixes demmo sites map [laszlocseh - [`f83d070`](https://github.com/eea/volto-marine-policy/commit/f83d070d0b1c7a5bdf1136eb542782477c9266b0)]
+- update objectives [laszlocseh - [`0c09eb1`](https://github.com/eea/volto-marine-policy/commit/0c09eb1b093ffba34deafa079127175629f3f2b9)]
+- fix eslint [laszlocseh - [`128fbb0`](https://github.com/eea/volto-marine-policy/commit/128fbb04277cc11bc6406df8cc815ea4a41291d0)]
+- fix eslint [laszlocseh - [`68e7168`](https://github.com/eea/volto-marine-policy/commit/68e7168d6322cb07fe7df7c2376a26e297cb015f)]
+- fix eslint [laszlocseh - [`1be214a`](https://github.com/eea/volto-marine-policy/commit/1be214accdac3657f156691f09c149f9f678d344)]
+- fix eslint [laszlocseh - [`fbed39c`](https://github.com/eea/volto-marine-policy/commit/fbed39c59d7841234cd8ffe699a9e84766a501bc)]
+- fix eslint [laszlocseh - [`ed3a2d2`](https://github.com/eea/volto-marine-policy/commit/ed3a2d26194d18aed50b1781e2d84a3d1482b0ab)]
+- fix eslint [laszlocseh - [`15805ce`](https://github.com/eea/volto-marine-policy/commit/15805ce9adb0ca66a99368a432d54d74fcbc8077)]
+- WiP demo sites map [laszlocseh - [`ca84585`](https://github.com/eea/volto-marine-policy/commit/ca84585f692b03c7011d46393fa5b937fa985e4d)]
+- WiP demo sites map [laszlocseh - [`b51ca84`](https://github.com/eea/volto-marine-policy/commit/b51ca842dba4fe0700100b5a6328d1bd4b962acb)]
 ### [2.0.8](https://github.com/eea/volto-marine-policy/compare/2.0.7...2.0.8) - 16 April 2025
 
 #### :house: Internal changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-marine-policy",
-  "version": "2.0.8",
+  "version": "2.0.10",
   "description": "@eeacms/volto-marine-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -34,15 +34,16 @@
     "@eeacms/volto-eea-design-system": "*",
     "@eeacms/volto-eea-website-theme": "*",
     "@eeacms/volto-embed": "*",
-    "@eeacms/volto-globalsearch": "2.0.11",
+    "@eeacms/volto-globalsearch": "2.1.0",
     "@eeacms/volto-openlayers-map": "0.3.2",
-    "@eeacms/volto-searchlib": "2.0.15",
+    "@eeacms/volto-searchlib": "2.0.16",
     "@eeacms/volto-tabs-block": "*",
     "axios": "0.30.0",
     "d3-array": "^2.12.1",
     "jquery": "3.6.0",
     "razzle-plugin-scss": "^4.2.18",
     "react-lazy-load-image-component": "^1.4.0",
+    "react-plotly.js": "2.6.0",
     "react-slick": "^0.24.0",
     "slick-carousel": "^1.8.1"
   },

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

@@ -2,9 +2,11 @@ import React from 'react';
 import { Grid } from 'semantic-ui-react'; // Dropdown,
 import { addAppURL } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
+import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
+
 import DemoSitesMap from './DemoSitesMap';
 import { ActiveFilters, DemoSitesFilters } from './DemoSitesFilters';
-
+import ObjectivesChart from './ObjectivesChart';
 import { filterCases, getFilters } from './utils';
 import { useCases } from './hooks';
 
@@ -23,6 +25,7 @@ export default function DemoSitesExplorerView(props) {
 
   const [activeFilters, setActiveFilters] = React.useState({
     objective_filter: [],
+    target_filter: [],
     indicator_filter: [],
     project_filter: [],
     country_filter: [],
@@ -31,6 +34,7 @@ export default function DemoSitesExplorerView(props) {
   const [activeItems, setActiveItems] = React.useState(cases);
   const [filters, setFilters] = React.useState([]);
   const [map, setMap] = React.useState();
+  const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
 
   React.useEffect(() => {
     const _filters = getFilters(cases, indicatorOnly);
@@ -38,6 +42,7 @@ export default function DemoSitesExplorerView(props) {
   }, [
     cases,
     activeFilters.objective_filter,
+    activeFilters.target_filter,
     activeFilters.indicator_filter,
     activeFilters.project_filter,
     activeFilters.country_filter,
@@ -74,33 +79,62 @@ export default function DemoSitesExplorerView(props) {
       <Grid.Row>
         {cases.length ? (
           <Grid columns={12}>
-            <Grid.Column mobile={10} tablet={10} computer={10}>
+            <Grid.Column mobile={8} tablet={8} computer={8}>
               <DemoSitesMap
                 items={cases}
                 activeItems={activeItems}
+                setActiveFilters={setActiveFilters}
                 hideFilters={hideFilters}
                 selectedCase={selectedCase}
                 onSelectedCase={onSelectedCase}
                 map={map}
                 setMap={setMap}
+                highlightedIndex={highlightedIndex}
+                setHighlightedIndex={setHighlightedIndex}
               />
             </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>
+            <Grid.Column
+              mobile={4}
+              tablet={4}
+              computer={4}
+              className="right-side-filters"
+            >
+              <Grid.Row>
+                {!hideFilters ? (
+                  <VisibilitySensor>
+                    <ObjectivesChart
+                      items={cases}
+                      // activeItems={activeItems}
+                      // filters={filters}
+                      activeFilters={activeFilters}
+                      setActiveFilters={setActiveFilters}
+                      // hideFilters={hideFilters}
+                      // map={map}
+                      highlightedIndex={highlightedIndex}
+                      setHighlightedIndex={setHighlightedIndex}
+                    />
+                  </VisibilitySensor>
+                ) : (
+                  ''
+                )}
+              </Grid.Row>
+              <Grid.Row>
+                <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>Demo site</div>
-                </div>
-                <div className="legend-row">
-                  <div className="circle">
-                    <div className="dot-region"></div>
+                  <div className="legend-row">
+                    <div className="circle">
+                      <div className="dot-region"></div>
+                    </div>
+                    <div>Associated region</div>
                   </div>
-                  <div>Associated region</div>
                 </div>
-              </div>
+              </Grid.Row>
             </Grid.Column>
           </Grid>
         ) : null}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { centerAndResetMapZoom } from './utils';
+import { clearFilters } from './utils';
 
 const normalizeSearchInput = (searchInput) => {
   let normInput = searchInput
@@ -20,7 +20,7 @@ export function DemoSitesFilter(props) {
     activeFilters,
     setActiveFilters,
     filterName,
-    map,
+    // map,
   } = props;
 
   const customOrder = props?.customOrder || [];
@@ -103,7 +103,7 @@ export function DemoSitesFilter(props) {
                     }
                     setActiveFilters(temp);
                     // scrollToElement('search-input');
-                    centerAndResetMapZoom(map);
+                    // centerAndResetMapZoom(map);
                   }}
                 />
                 <span>{label}</span>
@@ -132,7 +132,7 @@ export function DemoSitesFilters(props) {
 
   return (
     <>
-      {!hideFilters ? (
+      {/* {!hideFilters ? (
         <DemoSitesFilter
           filterTitle="Objective/Enabler"
           filterName="objective_filter"
@@ -140,13 +140,19 @@ export function DemoSitesFilters(props) {
           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',
-          ]}
+          customOrder={objectivesCustomOrder}
+        />
+      ) : (
+        ''
+      )} */}
+      {!hideFilters ? (
+        <DemoSitesFilter
+          filterTitle="Target"
+          filterName="target_filter"
+          filters={filters}
+          activeFilters={activeFilters}
+          setActiveFilters={setActiveFilters}
+          map={map}
         />
       ) : (
         ''
@@ -184,7 +190,7 @@ export function DemoSitesFilters(props) {
 }
 
 export function SearchBox(props) {
-  const { setSearchInput, map, onSelectedCase } = props;
+  const { setSearchInput, onSelectedCase } = props;
   const [showClearButton, setShowClearButton] = React.useState(false);
 
   return (
@@ -209,7 +215,7 @@ export function SearchBox(props) {
                 // popupOverlay.style.visibility = 'hidden';
                 setSearchInput(searchInput);
                 // scrollToElement('search-input');
-                centerAndResetMapZoom(map);
+                // centerAndResetMapZoom(map);
               }}
             ></input>
             <div className="terms-box-left">
@@ -227,7 +233,7 @@ export function SearchBox(props) {
                         setSearchInput('');
                         setShowClearButton(false);
                         // scrollToElement('search-input');
-                        centerAndResetMapZoom(map);
+                        // centerAndResetMapZoom(map);
                       }}
                     ></i>
                   </div>
@@ -247,7 +253,7 @@ export function SearchBox(props) {
 
                   setSearchInput(searchInputVal);
                   // scrollToElement('search-input');
-                  centerAndResetMapZoom(map);
+                  // centerAndResetMapZoom(map);
                 }}
                 onKeyDown={() => {}}
                 tabIndex="0"
@@ -266,30 +272,16 @@ export function SearchBox(props) {
 
 export function ActiveFilters(props) {
   const { filters, activeFilters, setActiveFilters } = props;
-  const hasActiveFilters = Object.entries(activeFilters).some(
-    ([filterName, filterList]) => {
-      if (filterList.length > 0) {
-        return true;
-      }
-      return false;
-    },
-  );
-
-  const clearFilters = () => {
-    const filterInputs = document.querySelectorAll(
-      '#cse-filter .filter-input input',
-    );
-    for (let i = 0; i < filterInputs.length; i++) {
-      filterInputs[i].checked = false;
-    }
-    setActiveFilters({
-      objective_filter: [],
-      indicator_filter: [],
-      project_filter: [],
-      country_filter: [],
-    });
-    // scrollToElement('search-input');
-  };
+  const hasActiveFilters = false;
+  // const hasActiveFilters = Object.entries(activeFilters).some(
+  //   ([filterName, filterList]) => {
+  //     return false;
+  //     if (filterList.length > 0) {
+  //       return true;
+  //     }
+  //     return false;
+  //   },
+  // );
 
   const removeFilter = (filterName, filterCode) => {
     const temp = JSON.parse(JSON.stringify(activeFilters));
@@ -316,7 +308,7 @@ export function ActiveFilters(props) {
       <div className="filter-list-header">
         <h4 className="filter-list-title">Active filters</h4>
         <button
-          onClick={clearFilters}
+          onClick={() => clearFilters(setActiveFilters)}
           className="ui mini basic compact button clear-btn"
         >
           clear all
@@ -349,6 +341,31 @@ export function ActiveFilters(props) {
           ) : (
             ''
           )}
+          {activeFilters.target_filter.length > 0 ? (
+            <div className="filter-wrapper">
+              <div className="filter-label">Target:</div>
+              {activeFilters.target_filter.map((filterCode) => {
+                const filterLabel = filters.target_filter[filterCode];
+                return (
+                  <div className="ui basic label filter-value">
+                    <span>{filterLabel}</span>
+                    <i
+                      tabIndex="0"
+                      onKeyPress={() => {}}
+                      onClick={() => {
+                        removeFilter('target_filter', filterCode);
+                        // scrollToElement('search-input');
+                      }}
+                      role="button"
+                      className="close icon"
+                    ></i>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            ''
+          )}
           {activeFilters.indicator_filter.length > 0 ? (
             <div className="filter-wrapper">
               <div className="filter-label">Indicator:</div>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { centerAndResetMapZoom, zoomMapToFeatures, isValidURL } from './utils';
+import { centerAndResetMapZoom, isValidURL } from './utils';
 
 const showPageNr = (pageNr, currentPage, numberOfPages) => {
   // show first 5 pages
@@ -271,7 +271,7 @@ export default function DemoSitesList(props) {
                             // scroll to the map
                             // scrollToElement('ol-map-container');
 
-                            zoomMapToFeatures(map, [item], 5000);
+                            // zoomMapToFeatures(map, [item], 5000);
                             onSelectedCase(item.values_);
 
                             const popupOverlay =

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

@@ -9,7 +9,12 @@ import InfoOverlay from './InfoOverlay';
 import FeatureInteraction from './FeatureInteraction';
 import { useMapContext } from '@eeacms/volto-openlayers-map/api';
 
-import { centerAndResetMapZoom, getFeatures, zoomMapToFeatures } from './utils';
+import {
+  centerAndResetMapZoom,
+  clearFilters,
+  getFeatures,
+  // zoomMapToFeatures,
+} from './utils';
 
 const styleCache = {};
 const MapContextGateway = ({ setMap }) => {
@@ -24,11 +29,14 @@ export default function DemoSitesMap(props) {
   const {
     items,
     activeItems,
+    setActiveFilters,
     hideFilters,
     selectedCase,
     onSelectedCase,
     map,
     setMap,
+    highlightedIndex,
+    setHighlightedIndex,
   } = props;
   const features = getFeatures(items);
   const [resetMapButtonClass, setResetMapButtonClass] =
@@ -65,7 +73,8 @@ export default function DemoSitesMap(props) {
     if (activeItems) {
       pointsSource.clear();
       pointsSource.addFeatures(getFeatures(activeItems));
-      hideFilters && zoomMapToFeatures(map, getFeatures(activeItems));
+      // hideFilters && zoomMapToFeatures(map, getFeatures(activeItems));
+      // zoomMapToFeatures(map, getFeatures(activeItems));
     }
   }, [map, activeItems, pointsSource, hideFilters]);
 
@@ -122,13 +131,18 @@ export default function DemoSitesMap(props) {
         view={{
           center: ol.proj.fromLonLat([10, 54]),
           showFullExtent: true,
-          zoom: 2.5,
+          zoom: 3.4,
         }}
         pixelRatio={1}
         // controls={ol.control.defaults({ attribution: false })}
       >
         <Controls attribution={false} />
         <Layers>
+          {highlightedIndex > 0 && !activeItems.length && (
+            <div className="no-results-message">
+              No results found. Please refine your filters.
+            </div>
+          )}
           <button
             className={cx(
               'reset-map-button ui button secondary',
@@ -137,15 +151,19 @@ export default function DemoSitesMap(props) {
             onClick={() => {
               // scrollToElement('search-input');
               onSelectedCase(null);
+              clearFilters(setActiveFilters);
+              setHighlightedIndex(5);
               if (hideFilters) {
-                zoomMapToFeatures(map, getFeatures(activeItems));
+                // zoomMapToFeatures(map, getFeatures(activeItems));
+                centerAndResetMapZoom(map);
               } else {
                 centerAndResetMapZoom(map);
+                // zoomMapToFeatures(map, getFeatures(activeItems));
               }
               map.getInteractions().array_[9].getFeatures().clear();
             }}
           >
-            <span className="result-info-title">Reset map</span>
+            <span className="result-info-title">Reset filters</span>
             <i className="icon ri-map-2-line"></i>
           </button>
           <InfoOverlay
@@ -200,7 +218,8 @@ const selectedClusterStyle = (selectedFeature) => {
     }
     // set size === 1 to enable clusterization
     if (size) {
-      let color = feature.values_.features[0].values_['color'];
+      // let color = feature.values_.features[0].values_['color'];
+      let color = '#0179cf';
       let width = feature.values_.features[0].values_['width'];
       let radius = feature.values_.features[0].values_['radius'];
       // console.log(color)

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

@@ -6,9 +6,13 @@ export default function FeatureDisplay({ feature }) {
     <div id="csepopup">
       <h3>
         <strong>
-          <a target="_blank" rel="noopener noreferrer" href={feature.path}>
+          <span
+          // target="_blank"
+          // rel="noopener noreferrer"
+          // href={feature.path}
+          >
             {truncateText(feature.title)}
-          </a>
+          </span>
         </strong>
       </h3>
       {feature.info ? (
@@ -57,6 +61,19 @@ export default function FeatureDisplay({ feature }) {
         ''
       )}
 
+      {feature.objective.length > 0 ? (
+        <div>
+          <span className="popup-title blue">Objective/Enabler</span>
+          <ul>
+            {feature.objective.map((item, index) => {
+              return <li key={index}>{item}</li>;
+            })}
+          </ul>
+        </div>
+      ) : (
+        ''
+      )}
+
       {/* {feature.project_link ? (
         <div>
           <span className="popup-title blue">Project link: </span>
@@ -85,13 +102,13 @@ export default function FeatureDisplay({ feature }) {
             {feature.indicators.map((item, index) => {
               return (
                 <li key={index}>
-                  <a
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href={item['path']}
+                  <span
+                  // target="_blank"
+                  // rel="noopener noreferrer"
+                  // href={item['path']}
                   >
                     {item['title']}
-                  </a>
+                  </span>
                 </li>
               );
             })}
@@ -100,14 +117,6 @@ export default function FeatureDisplay({ feature }) {
       ) : (
         ''
       )}
-      {/* <div>
-        <h4>Indicators</h4>
-        <ul>
-          {feature.sectors.map((item, index) => {
-            return <li key={index}>{item}</li>;
-          })}
-        </ul>
-      </div> */}
     </div>
   ) : null;
 }

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 { zoomMapToFeatures } from './utils';
+// import { zoomMapToFeatures } from './utils';
 
 export const useStyles = () => {
   const selected = React.useMemo(
@@ -67,7 +67,7 @@ export default function FeatureInteraction({ onFeatureSelect }) {
           // });
         } else {
           onFeatureSelect(null);
-          zoomMapToFeatures(map, subfeatures);
+          // zoomMapToFeatures(map, subfeatures);
         }
       });
 

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

@@ -0,0 +1,255 @@
+import React, { useRef } from 'react';
+import cx from 'classnames';
+import loadable from '@loadable/component';
+import { Grid } from 'semantic-ui-react'; // Dropdown,
+
+import { objectivesCustomOrder } from './utils';
+
+const Plot = loadable(() => import('react-plotly.js'));
+
+const ObjectivesChart = ({
+  items,
+  // activeItems,
+  //   filters,
+  activeFilters,
+  setActiveFilters,
+  //   hideFilters,
+  //   map,
+  highlightedIndex,
+  setHighlightedIndex,
+}) => {
+  const initialized = useRef(false);
+  const chartRef = useRef(null);
+  const objectiveCounts = {};
+
+  for (const item of items) {
+    item.properties.objective.map((obj) => {
+      objectiveCounts[obj] = (objectiveCounts[obj] || 0) + 1;
+      return [];
+    });
+  }
+  const _sorted = Object.entries(objectiveCounts).sort(
+    (a, b) =>
+      objectivesCustomOrder.indexOf(a[0]) - objectivesCustomOrder.indexOf(b[0]),
+  );
+  const objectives = Object.fromEntries(_sorted);
+  const objectivesLength = Object.keys(objectives).length;
+
+  React.useEffect(() => {
+    // set the objectives and the count
+    if (!items) return;
+    if (initialized.current) return;
+
+    const interval = setInterval(() => {
+      setHighlightedIndex((prevIndex) => {
+        if (prevIndex + 1 >= objectivesLength + 1) {
+          clearInterval(interval); // Stop after last item
+          initialized.current = true;
+          return prevIndex;
+        }
+        return prevIndex + 1;
+      });
+    }, 2000);
+    // console.log('init');
+    return () => clearInterval(interval); // Cleanup on unmount
+  }, [items, objectivesLength, highlightedIndex, setHighlightedIndex]);
+
+  React.useEffect(() => {
+    // if (!objectives) return;
+    const filterKey = 'objective_filter';
+
+    if (highlightedIndex === -1) {
+      const newValue = [undefined];
+
+      setActiveFilters((prev) => {
+        const currentValues = prev[filterKey];
+        // Don't update if no change
+        const isSame =
+          currentValues.length === newValue.length &&
+          currentValues.every((v, i) => v === newValue[i]);
+
+        if (isSame) return prev;
+
+        return {
+          ...prev,
+          [filterKey]: newValue,
+        };
+      });
+      return;
+    }
+
+    const currentObjective = Object.keys(objectives)[highlightedIndex];
+    const newValue = currentObjective ? [currentObjective] : [];
+
+    setActiveFilters((prev) => {
+      const currentValues = prev[filterKey];
+      // Don't update if no change
+      const isSame =
+        currentValues.length === newValue.length &&
+        currentValues.every((v, i) => v === newValue[i]);
+
+      if (isSame) return prev;
+
+      return {
+        ...prev,
+        [filterKey]: newValue,
+      };
+    });
+    // console.log(highlightedIndex, activeFilters);
+  }, [objectives, activeFilters, setActiveFilters, highlightedIndex]);
+
+  const handleClick = (event) => {
+    let label = '';
+
+    if (event.points) {
+      const point = event.points[0];
+      label = point.label;
+      // const value = point.value;
+    } else {
+      label = event.target.textContent;
+    }
+
+    const tempFilters = JSON.parse(JSON.stringify(activeFilters));
+    if (tempFilters['objective_filter'].includes(label)) {
+      tempFilters['objective_filter'] = tempFilters['objective_filter'].filter(
+        (i) => i !== label,
+      );
+      setHighlightedIndex(5);
+    } else {
+      tempFilters['objective_filter'] = [];
+      tempFilters['objective_filter'].push(label);
+      setHighlightedIndex(Object.keys(objectives).indexOf(label));
+    }
+    setActiveFilters(tempFilters);
+  };
+
+  const handleHover = () => {
+    if (chartRef.current) {
+      chartRef.current.style.cursor = 'pointer'; // Change cursor on hover
+    }
+  };
+
+  const handleUnhover = () => {
+    if (chartRef.current) {
+      chartRef.current.style.cursor = 'default'; // Reset cursor
+    }
+  };
+
+  const labels = Object.keys(objectives);
+  const values = Object.values(objectives);
+  const totalCount = values.reduce((acc, curr) => acc + curr, 0);
+  const customColors = ['#007b6c', '#fdaf20', '#004b7f', '#f9eb8a', '#9e83b6']; // Adjust colors as needed
+  const grayColor = '#d3d3d3';
+  //   const pull = labels.map((_, i) => (i === highlightedIndex ? 0.1 : 0));
+  const inactiveColors = labels.map((_, i) =>
+    i === highlightedIndex ? customColors[i % customColors.length] : grayColor,
+  );
+
+  // console.log(highlightedIndex);
+
+  return highlightedIndex >= -1 ? (
+    <div className="objectives-chart fade-in">
+      <Grid.Row className="chart-title">
+        Demo sites and Associated regions
+      </Grid.Row>
+      <Grid.Row className="chart-title">Objective/Enabler</Grid.Row>
+      <Grid.Row className="chart-container">
+        <div ref={chartRef}>
+          <Plot
+            useResizeHandler
+            data={[
+              {
+                type: 'pie',
+                labels: labels,
+                values: values,
+                textinfo: 'none',
+                // textinfo: highlightedIndex === 5 ? 'value' : 'none',
+                hole: 0.4,
+                insidetextorientation: 'radial',
+                hoverinfo: 'label+value',
+                marker: {
+                  colors:
+                    highlightedIndex === 5 ? customColors : inactiveColors, // Apply custom colors here
+                  line: {
+                    color: '#e0e0e0', // light gray
+                    width: 1, // thin border
+                  },
+                },
+                direction: 'clockwise',
+                // pull,
+              },
+            ]}
+            layout={{
+              width: 300,
+              height: 300,
+              // title: 'Objectives Distribution',
+              showlegend: false,
+              margin: {
+                t: 20, // Top margin
+                b: 20, // Bottom margin
+                l: 0, // Left margin
+                r: 0, // Right margin
+              },
+              annotations: [
+                {
+                  text:
+                    highlightedIndex === 5
+                      ? `${totalCount}`
+                      : values[highlightedIndex] || '', // Display total count in the center
+                  font: {
+                    family:
+                      "'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif",
+                    size: 24, // Adjust font size as needed
+                    weight: 'bold',
+                  },
+                  showarrow: false, // No arrow pointing to the center
+                  x: 0.5, // Position in the center (horizontal)
+                  y: 0.5, // Position in the center (vertical)
+                  align: 'center',
+                  valign: 'middle',
+                  bgcolor: 'rgba(255, 255, 255, 0.6)', // Optional background color
+                  borderpad: 10, // Padding around the text
+                },
+              ],
+            }}
+            config={{
+              responsive: true,
+              displayModeBar: true,
+              modeBarButtonsToRemove: ['toImage'], // Removes download button
+              displaylogo: false, // Removes "Produced with Plotly.js"
+            }}
+            onClick={handleClick}
+            onHover={handleHover}
+            onUnhover={handleUnhover}
+          />
+        </div>
+      </Grid.Row>
+      <Grid.Row>
+        <ul>
+          {Object.entries(objectives).map(([item, count], index) => (
+            <li
+              className={cx(
+                index === highlightedIndex ? 'active' : '',
+                customColors[index].replace('#', 'C'),
+              )}
+            >
+              <div
+                onClick={handleClick}
+                onKeyDown={() => {}}
+                tabIndex={index}
+                role="button"
+                key={item}
+              >
+                {item}
+              </div>
+            </li>
+          ))}
+        </ul>
+      </Grid.Row>
+    </div>
+  ) : (
+    ''
+  );
+};
+
+export default ObjectivesChart;

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

@@ -12,6 +12,23 @@
 .ol-map {
   height: 600px;
   min-height: 600px;
+  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
+
+  .no-results-message {
+    position: absolute;
+    z-index: 9;
+    top: 46%;
+    right: 28%;
+    bottom: 47%;
+    left: 27%;
+    padding: 0.5em 1em;
+    border: 4px solid #dfdfdf;
+    border-radius: 2px;
+    background-color: #0088e9;
+    color: #ffffff;
+    opacity: 0.6;
+    text-shadow: none;
+  }
 }
 
 #csepopup {
@@ -29,6 +46,7 @@
   }
 
   h3 {
+    color: #069;
     font-size: 1.4rem;
   }
 
@@ -388,12 +406,12 @@
 }
 
 .legend {
-  position: absolute;
+  // position: absolute;
   bottom: 2em;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: flex-start;
-  gap: 0.5em;
+  gap: 1em;
 
   .legend-row {
     display: flex;
@@ -411,9 +429,9 @@
     width: 22px;
     min-width: 22px;
     height: 22px;
-    /* dark green shade */
     border-radius: 50%;
-    background-color: #007265;
+    // background-color: #007265;
+    background-color: #0179cf;
     gap: 0.5em;
   }
 
@@ -439,3 +457,111 @@
     transform: translate(-50%, -50%);
   }
 }
+
+.right-side-filters {
+  display: flex !important;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.objectives-chart {
+  font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
+
+  .js-plotly-plot .plotly,
+  .js-plotly-plot .plotly div {
+    font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
+  }
+
+  &.fade-in {
+    animation: fadeIn 1s ease-in forwards;
+    opacity: 0;
+    /* Start invisible */
+  }
+
+  @keyframes fadeIn {
+    to {
+      opacity: 1;
+    }
+  }
+
+  .main-svg {
+    overflow: visible !important;
+  }
+
+  .hoverlayer {
+    overflow: visible !important;
+  }
+
+  .chart-title {
+    font-size: 1em;
+    font-weight: 500;
+    text-align: center;
+  }
+
+  .chart-container {
+    text-align: center;
+  }
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    padding-left: 1.3em;
+    gap: 0.5em;
+    list-style: none;
+  }
+
+  li {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 0.8em;
+    line-height: 1.5em;
+
+    &:hover {
+      cursor: pointer;
+      font-weight: 500;
+    }
+
+    &.C007b6c::before {
+      background-color: #007b6c;
+    }
+
+    &.Cfdaf20::before {
+      background-color: #fdaf20;
+    }
+
+    &.C004b7f::before {
+      background-color: #004b7f;
+    }
+
+    &.Cf9eb8a::before {
+      background-color: #f9eb8a;
+    }
+
+    &.C9e83b6::before {
+      background-color: #9e83b6;
+    }
+
+    &::before {
+      width: 0.7em;
+      height: 0.7em;
+      flex-shrink: 0;
+      border-radius: 2px;
+      /* change as needed */
+      margin-right: 8px;
+      content: '';
+    }
+
+    &.active {
+      font-size: 1em;
+      // color: red;
+      font-weight: 500;
+
+      &::before {
+        width: 1em;
+        height: 1em;
+      }
+    }
+  }
+}

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

@@ -1,5 +1,30 @@
 import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 
+export const objectivesCustomOrder = [
+  'Objective 1: Protect and restore marine and freshwater ecosystems and biodiversity',
+  'Objective 2: Prevent and eliminate pollution of our oceans, seas and waters',
+  'Objective 3: Make the sustainable blue economy carbon-neutral and circular',
+  'Enabler 1: Digital twin of the ocean',
+  'Enabler 2: Public mobilisation and engagement',
+];
+
+export const clearFilters = (setActiveFilters) => {
+  const filterInputs = document.querySelectorAll(
+    '#cse-filter .filter-input input',
+  );
+  for (let i = 0; i < filterInputs.length; i++) {
+    filterInputs[i].checked = false;
+  }
+  setActiveFilters({
+    objective_filter: [],
+    target_filter: [],
+    indicator_filter: [],
+    project_filter: [],
+    country_filter: [],
+  });
+  // scrollToElement('search-input');
+};
+
 export const truncateText = (str, max = 50) => {
   if (str.length <= max) {
     return str;
@@ -18,7 +43,7 @@ export function isValidURL(string) {
 
 export function centerAndResetMapZoom(map) {
   map.getView().animate({
-    zoom: 2.5,
+    zoom: 3.4,
     duration: 1000,
     center: ol.proj.transform([10, 54], 'EPSG:4326', 'EPSG:3857'),
   });
@@ -39,20 +64,42 @@ export function getExtentOfFeatures(features) {
 
 export function zoomMapToFeatures(map, features, threshold = 500) {
   const extent = getExtentOfFeatures(features);
-  let extentBuffer = (extent[3] - extent[1] + extent[2] - extent[0]) / 4;
+
+  // let extentBuffer = (extent[3] - extent[1] + extent[2] - extent[0]) / 4;
+  // extentBuffer = extentBuffer < threshold ? threshold : extentBuffer;
+  // const paddedExtent = ol.extent.buffer(extent, extentBuffer);
+
+  const width = extent[2] - extent[0];
+  const height = extent[3] - extent[1];
+  const bufferFactor = 0.05; // 5% buffer
+
+  let extentBuffer = Math.max(width, height) * bufferFactor;
   extentBuffer = extentBuffer < threshold ? threshold : extentBuffer;
   const paddedExtent = ol.extent.buffer(extent, extentBuffer);
-  map.getView().fit(paddedExtent, { ...map.getSize(), duration: 1000 });
+
+  try {
+    // map.getView().fit(paddedExtent, { ...map.getSize(), duration: 1000 });
+    map.getView().fit(paddedExtent, {
+      size: map.getSize(), // pass size explicitly
+      // padding: [0, 0, 0, 0], // top, right, bottom, left
+      duration: 1000,
+    });
+  } catch (error) {
+    // no features available, zooming fails
+  }
 }
 
 export function getFeatures(cases) {
   const Feature = ol.ol.Feature;
   const colors = {
-    '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': '#9e83b6',
+    'Objective 1: Protect and restore marine and freshwater ecosystems and biodiversity':
+      '#007b6c',
+    'Objective 2: Prevent and eliminate pollution of our oceans, seas and waters':
+      '#fdaf20',
+    'Objective 3: Make the sustainable blue economy carbon-neutral and circular':
+      '#004b7f',
+    'Enabler 1: Digital twin of the ocean': '#f9eb8a',
+    'Enabler 2: Public mobilisation and engagement': '#9e83b6',
   };
   const width = {
     'Demo site': 6,
@@ -85,10 +132,11 @@ export function getFeatures(cases) {
         info: c.properties.info,
         website: c.properties.website,
         objective: c.properties.objective,
+        target: c.properties.target,
         description: c.properties.description,
         index: index,
         path: c.properties.path,
-        color: colors[c.properties.objective] || '#B83230',
+        color: colors[c.properties.objective[0]] || '#B83230',
         width: width[c.properties.type_is_region],
         radius: radius[c.properties.type_is_region],
       },
@@ -101,6 +149,7 @@ export function getFeatures(cases) {
 export function filterCases(cases, activeFilters, indicatorOnly) {
   const data = cases.filter((_case) => {
     let flag_objective = false;
+    let flag_target = false;
     let flag_indicator = false;
     let flag_project = false;
     let flag_country = false;
@@ -122,7 +171,17 @@ export function filterCases(cases, activeFilters, indicatorOnly) {
       let objective = _case.properties.objective;
 
       activeFilters.objective_filter.forEach((filter) => {
-        if (objective === filter) flag_objective = true;
+        if (objective?.includes(filter)) flag_objective = true;
+      });
+    }
+
+    if (!activeFilters.target_filter.length) {
+      flag_target = true;
+    } else {
+      let target = _case.properties.target;
+
+      activeFilters.target_filter.forEach((filter) => {
+        if (target?.includes(filter)) flag_target = true;
       });
     }
 
@@ -162,6 +221,7 @@ export function filterCases(cases, activeFilters, indicatorOnly) {
 
     return flag_indicatorOnly &&
       flag_objective &&
+      flag_target &&
       flag_indicator &&
       flag_country &&
       flag_project
@@ -175,6 +235,7 @@ export function filterCases(cases, activeFilters, indicatorOnly) {
 export function getFilters(cases, indicatorOnly) {
   let _filters = {
     objective_filter: {},
+    target_filter: {},
     indicator_filter: {},
     project_filter: {},
     country_filter: {},
@@ -197,9 +258,20 @@ export function getFilters(cases, indicatorOnly) {
     });
 
     let objective = _case.properties.objective;
-    if (objective && !_filters.objective_filter.hasOwnProperty(objective)) {
-      _filters.objective_filter[objective] = objective;
-    }
+    objective.map((item) => {
+      if (item && !_filters.objective_filter.hasOwnProperty(item)) {
+        _filters.objective_filter[item] = item;
+      }
+      return [];
+    });
+
+    let target = _case.properties.target;
+    target.map((item) => {
+      if (item && !_filters.target_filter.hasOwnProperty(item)) {
+        _filters.target_filter[item] = item;
+      }
+      return [];
+    });
 
     let project = _case.properties.project;
     if (project && !_filters.project_filter.hasOwnProperty(project)) {