@eeacms/volto-marine-policy 2.0.25 → 2.0.27

package/CHANGELOG.md

@@ -4,6 +4,24 @@ 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.27](https://github.com/eea/volto-marine-policy/compare/2.0.26...2.0.27) - 5 September 2025
+
+#### :hammer_and_wrench: Others
+
+- fix eslint [laszlocseh - [`3f90c17`](https://github.com/eea/volto-marine-policy/commit/3f90c17f976fdf48a2e967d2997487ba87a3535d)]
+- Demo Sites Explorer filter Targets facet options by selected objective [laszlocseh - [`3b975ad`](https://github.com/eea/volto-marine-policy/commit/3b975ad4380196cfd71c8fd2919fc717f98528a5)]
+### [2.0.26](https://github.com/eea/volto-marine-policy/compare/2.0.25...2.0.26) - 29 August 2025
+
+#### :rocket: Dependency updates
+
+- Release @eeacms/volto-searchlib@2.1.10 [EEA Jenkins - [`17445e9`](https://github.com/eea/volto-marine-policy/commit/17445e91fa8ff3c66ebabdbc6f3e474f643f6d03)]
+
+#### :hammer_and_wrench: Others
+
+- Demo Sites Explorer show indicators link in popup [laszlocseh - [`5214931`](https://github.com/eea/volto-marine-policy/commit/52149317e361ce8bd9b4e0adc9c17ec61b35ecc1)]
+- Fix map popup [narcis2005 - [`dd99fd7`](https://github.com/eea/volto-marine-policy/commit/dd99fd7b3ff6327730690b6a5da262905e626593)]
+- lint ignore line [Claudia Ifrim - [`5de8369`](https://github.com/eea/volto-marine-policy/commit/5de8369f3470ef3bb592fc851a44c90489771f84)]
+- ol fix [Claudia Ifrim - [`8eacd1f`](https://github.com/eea/volto-marine-policy/commit/8eacd1f3121e593d645eaaa0e1b22fc84fe73ced)]
 ### [2.0.25](https://github.com/eea/volto-marine-policy/compare/2.0.24...2.0.25) - 27 August 2025
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-marine-policy",
-  "version": "2.0.25",
+  "version": "2.0.27",
   "description": "@eeacms/volto-marine-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -40,7 +40,7 @@
     "@eeacms/volto-globalsearch": "2.1.2",
     "@eeacms/volto-metadata-block": "*",
     "@eeacms/volto-openlayers-map": "1.0.1",
-    "@eeacms/volto-searchlib": "2.1.8",
+    "@eeacms/volto-searchlib": "2.1.10",
     "@eeacms/volto-tabs-block": "*",
     "@eeacms/volto-workflow-progress": "*",
     "@plone-collective/volto-authomatic": "2.0.1",

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

@@ -77,7 +77,7 @@ export default function DemoSitesExplorerView(props) {
           activeFilters={activeFilters}
           hideFilters={hideFilters}
           setActiveFilters={setActiveFilters}
-          map={map}
+          highlightedIndex={highlightedIndex}
         />
       </Grid.Row>
       <Grid.Row>

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

@@ -1,6 +1,30 @@
 import React from 'react';
 
 import { clearFilters } from './utils';
+import { objectivesCustomOrder } from './utils';
+
+const objectivesTargets = {
+  'Objective 1: Protect and restore marine and freshwater ecosystems and biodiversity':
+    [
+      'Contribute to relevant marine nature restoration targets including degraded seabed habitats and coastal ecosystems',
+      "Protect at least 30% of the EU's seas and integrate ecological corridors, as part of a true Trans-European Nature Network",
+      "Strictly protect at least 10% of the EU's seas",
+      'Restore at least 25,000 km of free/flowing rivers',
+    ],
+  'Objective 2: Prevent and eliminate pollution of our oceans, seas and waters':
+    [
+      'Reduce nutrient losses by 50%',
+      'Reduce the use and risk of chemical pesticides by 50%',
+      'Reduce plastic litter at sea by 50%',
+      'Reduce by 30% microplastics released into the environment',
+    ],
+  'Objective 3: Make the sustainable blue economy carbon-neutral and circular':
+    [
+      'Achieve net zero maritime emissions',
+      'Promote circular, low-carbon multi-purpose use of marine and water space',
+      'Develop zero-carbon and low-impact aquaculture',
+    ],
+};
 
 const normalizeSearchInput = (searchInput) => {
   let normInput = searchInput
@@ -13,6 +37,25 @@ const normalizeSearchInput = (searchInput) => {
   return '\\b' + normInput + '\\b';
 };
 
+const filterTargetsByObjective = (filters, filterName, highlightedIndex) => {
+  if (filterName !== 'target_filter') return filters;
+  if (highlightedIndex < 0 || highlightedIndex > 2) return filters;
+
+  let selectedObjective = objectivesCustomOrder[highlightedIndex];
+  let allowedTargets = objectivesTargets[selectedObjective] || [];
+
+  // Filter the targets based on the allowed ones
+  if (filters['target_filter']) {
+    filters['target_filter'] = Object.fromEntries(
+      Object.entries(filters['target_filter']).filter(([key]) =>
+        allowedTargets.includes(key),
+      ),
+    );
+  }
+
+  return filters;
+};
+
 export function DemoSitesFilter(props) {
   const {
     filterTitle,
@@ -20,11 +63,15 @@ export function DemoSitesFilter(props) {
     activeFilters,
     setActiveFilters,
     filterName,
-    // map,
+    highlightedIndex,
   } = props;
 
   const customOrder = props?.customOrder || [];
-  const entries = Object.entries(filters?.[filterName] || {});
+  const entries = Object.entries(
+    filterTargetsByObjective(filters, filterName, highlightedIndex)?.[
+      filterName
+    ] || {},
+  );
   let sortedEntries = [];
 
   if (customOrder.length > 0) {
@@ -112,7 +159,13 @@ export function DemoSitesFilter(props) {
 }
 
 export function DemoSitesFilters(props) {
-  const { filters, activeFilters, hideFilters, setActiveFilters, map } = props;
+  const {
+    filters,
+    activeFilters,
+    hideFilters,
+    setActiveFilters,
+    highlightedIndex,
+  } = props;
 
   React.useEffect(() => {
     window.addEventListener('click', (event) => {
@@ -148,7 +201,7 @@ export function DemoSitesFilters(props) {
           filters={filters}
           activeFilters={activeFilters}
           setActiveFilters={setActiveFilters}
-          map={map}
+          highlightedIndex={highlightedIndex}
         />
       ) : (
         ''
@@ -160,7 +213,7 @@ export function DemoSitesFilters(props) {
           filters={filters}
           activeFilters={activeFilters}
           setActiveFilters={setActiveFilters}
-          map={map}
+          highlightedIndex={highlightedIndex}
         />
       ) : (
         ''
@@ -171,7 +224,7 @@ export function DemoSitesFilters(props) {
         filters={filters}
         activeFilters={activeFilters}
         setActiveFilters={setActiveFilters}
-        map={map}
+        highlightedIndex={highlightedIndex}
       />
       <DemoSitesFilter
         filterTitle="Country"
@@ -179,7 +232,7 @@ export function DemoSitesFilters(props) {
         filters={filters}
         activeFilters={activeFilters}
         setActiveFilters={setActiveFilters}
-        map={map}
+        highlightedIndex={highlightedIndex}
       />
     </>
   );
@@ -326,7 +379,7 @@ export function ActiveFilters(props) {
               {activeFilters.objective_filter.map((filterCode) => {
                 const filterLabel = filters.objective_filter[filterCode];
                 return (
-                  <div className="ui basic label filter-value">
+                  <div key={filterCode} className="ui basic label filter-value">
                     <span>{filterLabel}</span>
                     <i
                       tabIndex="0"
@@ -352,7 +405,7 @@ export function ActiveFilters(props) {
               {activeFilters.target_filter.map((filterCode) => {
                 const filterLabel = filters.target_filter[filterCode];
                 return (
-                  <div className="ui basic label filter-value">
+                  <div key={filterCode} className="ui basic label filter-value">
                     <span>{filterLabel}</span>
                     <i
                       tabIndex="0"
@@ -377,7 +430,7 @@ export function ActiveFilters(props) {
               {activeFilters.indicator_filter.map((filterCode) => {
                 const filterLabel = filters.indicator_filter[filterCode];
                 return (
-                  <div className="ui basic label filter-value">
+                  <div key={filterCode} className="ui basic label filter-value">
                     <span>{filterLabel}</span>
                     <i
                       tabIndex="0"
@@ -402,7 +455,7 @@ export function ActiveFilters(props) {
               {activeFilters.project_filter.map((filterCode) => {
                 const filterLabel = filters.project_filter[filterCode];
                 return (
-                  <div className="ui basic label filter-value">
+                  <div key={filterCode} className="ui basic label filter-value">
                     <span>{filterLabel}</span>
                     <i
                       tabIndex="0"
@@ -427,7 +480,7 @@ export function ActiveFilters(props) {
               {activeFilters.country_filter.map((filterCode) => {
                 const filterLabel = filters.country_filter[filterCode];
                 return (
-                  <div className="ui basic label filter-value">
+                  <div key={filterCode} className="ui basic label filter-value">
                     <span>{filterLabel}</span>
                     <i
                       tabIndex="0"

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

@@ -102,13 +102,13 @@ export default function FeatureDisplay({ feature }) {
             {feature.indicators.map((item, index) => {
               return (
                 <li key={index}>
-                  <span
-                  // target="_blank"
-                  // rel="noopener noreferrer"
-                  // href={item['path']}
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href={item['path']}
                   >
                     {item['title']}
-                  </span>
+                  </a>
                 </li>
               );
             })}

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

@@ -4,18 +4,12 @@ import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 import FeatureDisplay from './FeatureDisplay';
 import { usePrevious } from '@plone/volto/helpers/Utils/usePrevious';
 
-function InfoOverlay({
-  selectedFeature,
-  onFeatureSelect,
-  layerId,
-  // hideFilters,
-  ol,
-}) {
+function InfoOverlay({ selectedFeature, onFeatureSelect, layerId, ol }) {
   const { map } = useMapContext();
-  const [tooltip, setTooltipRef] = React.useState();
-  const [showTooltip, setShowTooltip] = React.useState();
-
+  const [tooltip, setTooltipRef] = React.useState(null);
+  const overlayRef = React.useRef();
   const prevLayerId = usePrevious(layerId);
+  const [showTooltip, setShowTooltip] = React.useState(false);
 
   React.useEffect(() => {
     if (prevLayerId && layerId !== prevLayerId) {
@@ -24,10 +18,10 @@ function InfoOverlay({
   }, [layerId, prevLayerId]);
 
   React.useEffect(() => {
-    if (!(map && tooltip)) return;
+    if (!(map && tooltip && ol.Overlay)) return;
 
-    const overlay = new ol.Overlay({
-      element: document.getElementById('popup-overlay'),
+    overlayRef.current = new ol.Overlay({
+      element: tooltip,
       positioning: 'bottom-left',
       offset: [0, 0],
       stopEvent: false,
@@ -36,7 +30,7 @@ function InfoOverlay({
       //     duration: 250,
       // },
     });
-    map.addOverlay(overlay);
+    map.addOverlay(overlayRef.current);
 
     function handler(evt) {
       const { pixel, target } = evt;
@@ -45,15 +39,13 @@ function InfoOverlay({
 
       if (features.length) {
         const coordinate = evt.coordinate;
-        overlay.setPosition(coordinate);
+        overlayRef.current.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;
+        overlayRef.current.setPosition(undefined);
         setShowTooltip(false);
-        // popupOverlay.style.display = 'none';
         onFeatureSelect(null);
       }
     }
@@ -62,9 +54,11 @@ function InfoOverlay({
 
     return () => {
       map.un('click', handler);
-      map.removeOverlay(overlay);
+      if (overlayRef.current) {
+        map.removeOverlay(overlayRef.current);
+      }
     };
-  }, [map, tooltip, onFeatureSelect, ol]); //
+  }, [map, tooltip, onFeatureSelect, ol.Overlay]);
 
   const [isClient, setIsClient] = React.useState(false);
   React.useEffect(() => setIsClient(true), []);

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

@@ -259,6 +259,7 @@ const ObjectivesChart = ({
         <ul>
           {Object.entries(objectives).map(([item, count], index) => (
             <li
+              key={item?.id || index}
               className={cx(
                 index === highlightedIndex ? 'active' : '',
                 customColors[index].replace('#', 'C'),

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

@@ -231,7 +231,7 @@
 
         .filter-input {
           display: flex;
-          align-items: center;
+          align-items: baseline;
           justify-content: flex-start;
           cursor: pointer;
           font-size: 14px;

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

@@ -88,7 +88,7 @@ export function zoomMapToFeatures({ map, features, ol, threshold = 500 }) {
 }
 
 export function getFeatures({ cases, ol }) {
-  const Feature = ol.Feature;
+  const Feature = ol.Feature; // eslint-disable-line no-unused-vars
   const colors = {
     'Objective 1: Protect and restore marine and freshwater ecosystems and biodiversity':
       '#007b6c',
@@ -113,7 +113,7 @@ export function getFeatures({ cases, ol }) {
     const {
       geometry: { coordinates },
     } = c;
-    const point = new Feature(
+    const point = new ol.ol.Feature(
       new ol.geom.Point(ol.proj.fromLonLat(coordinates)),
     );
     point.setId(index);