@eeacms/volto-marine-policy 2.0.25 → 2.0.26

package/CHANGELOG.md

@@ -4,6 +4,18 @@ 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.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.26",
   "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/DemoSitesFilters.jsx

@@ -326,7 +326,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 +352,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 +377,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 +402,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 +427,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/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);