@eeacms/volto-bise-policy 1.3.9 → 1.3.10

package/CHANGELOG.md

@@ -4,6 +4,21 @@ 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).
 
+### [1.3.10](https://github.com/eea/volto-bise-policy/compare/1.3.9...1.3.10) - 21 September 2026
+
+#### :rocket: New Features
+
+- feat(CaseStudyExplorer): add image and link icon to feature popup [laszlocseh - [`ceba7db`](https://github.com/eea/volto-bise-policy/commit/ceba7db816f00fd430edab13812aac348a3042c2)]
+- feat: replace NRR article with legislation and biogeographical region filters [laszlocseh - [`6f6c0b4`](https://github.com/eea/volto-bise-policy/commit/6f6c0b479f046977a8ff63524f7db32ebdb1ae03)]
+
+#### :nail_care: Enhancements
+
+- refactor(CaseStudyExplorer): use Image component in FeatureDisplay [laszlocseh - [`19e4a0f`](https://github.com/eea/volto-bise-policy/commit/19e4a0fa357391ab96a12c676ae79c3501f0a2ba)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`9df6965`](https://github.com/eea/volto-bise-policy/commit/9df696548aac424140d0db0b1f1181a19c8ba2a0)]
+
 ### [1.3.9](https://github.com/eea/volto-bise-policy/compare/1.3.8...1.3.9) - 27 August 2026
 
 #### :bug: Bug Fixes

package/package.json

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

package/src/components/Widgets/NRRWidgets.jsx

@@ -85,6 +85,34 @@ export const NRRArticleView = ({ value }) => {
   );
 };
 
+export const NRRLegislationView = ({ value }) => {
+  const items = parseItems(value);
+  if (items.length === 0) return null;
+
+  return (
+    <InlineList
+      label="NRR Legislation"
+      secondary
+      items={items}
+      render={(item) => item.title}
+    />
+  );
+};
+
+export const NRRBiogeographicalRegionView = ({ value }) => {
+  const items = parseItems(value);
+  if (items.length === 0) return null;
+
+  return (
+    <InlineList
+      label="Biogeographical region"
+      secondary
+      items={items}
+      render={(item) => item.title}
+    />
+  );
+};
+
 export const NRRrelatedCaseStudiesView = ({ value }) => {
   const items = parseItems(value);
   if (items.length === 0) return null;

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyExplorerView.jsx

@@ -21,11 +21,12 @@ export default function CaseStudyExplorerView(props) {
   const hideFilters = caseStudiesIds ? true : false;
 
   const [activeFilters, setActiveFilters] = React.useState({
+    nrr_legislation: [],
+    nrr_biogeographical_region: [],
     measures_implemented: [],
     typology_of_measures: [],
     current_status: [],
     habitat_ecosystem_type: [],
-    nrr_article: [],
     scale_of_planning: [],
   });
 

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyFilters.jsx

@@ -114,6 +114,16 @@ function CaseStudyFiltersComponent(props) {
 
   return (
     <>
+      <CaseStudyFilter
+        filterTitle="Legislation"
+        filterName="nrr_legislation"
+        {...props}
+      />
+      <CaseStudyFilter
+        filterTitle="Biogeographical region"
+        filterName="nrr_biogeographical_region"
+        {...props}
+      />
       <CaseStudyFilter
         filterTitle="Measures"
         filterName="measures_implemented"
@@ -144,11 +154,6 @@ function CaseStudyFiltersComponent(props) {
         filterName="habitat_ecosystem_type"
         {...props}
       />
-      <CaseStudyFilter
-        filterTitle="NRR Article"
-        filterName="nrr_article"
-        {...props}
-      />
       <CaseStudyFilter
         filterTitle="Scale of Planning"
         filterName="scale_of_planning"
@@ -347,9 +352,16 @@ function ActiveFiltersComponent(props) {
             onRemoveFilter={removeFilter}
           />
           <FilterGroup
-            filterName="nrr_article"
-            filterLabel="NRR Article:"
-            activeFilterCodes={activeFilters.nrr_article}
+            filterName="nrr_legislation"
+            filterLabel="Legislation:"
+            activeFilterCodes={activeFilters.nrr_legislation}
+            filters={filters}
+            onRemoveFilter={removeFilter}
+          />
+          <FilterGroup
+            filterName="nrr_biogeographical_region"
+            filterLabel="Biogeographical region:"
+            activeFilterCodes={activeFilters.nrr_biogeographical_region}
             filters={filters}
             onRemoveFilter={removeFilter}
           />

package/src/components/manage/Blocks/CaseStudyExplorer/FeatureDisplay.jsx

@@ -1,41 +1,24 @@
 import React from 'react';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 export default function FeatureDisplay({ feature }) {
   return feature ? (
     <div id="csepopup">
+      {feature.image ? (
+        <Image
+          className="csepopup-image"
+          src={feature.image}
+          alt={feature.title || ''}
+        />
+      ) : null}
       <h3>
         <strong>
           <a target="_blank" rel="noopener noreferrer" href={feature.path}>
             {feature.title}
+            <i class="ri-external-link-line"></i>
           </a>
         </strong>
       </h3>
-      {/* <div>
-        <h4>Measures implemented</h4>
-        <ul>
-          {feature.measures_implemented.map((item, index) => {
-            return (
-              <li key={index}>
-                <a
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  href={item['path']}
-                >
-                  {item['title']}
-                </a>
-              </li>
-            );
-          })}
-        </ul>
-      </div> */}
-      {/* <div>
-        <h4>typology_of_measures </h4>
-        <ul>
-          {feature.typology_of_measures.map((item, index) => {
-            return <li key={index}>{item}</li>;
-          })}
-        </ul>
-      </div> */}
     </div>
   ) : null;
 }

package/src/components/manage/Blocks/CaseStudyExplorer/FeatureDisplay.test.jsx

@@ -9,6 +9,7 @@ describe('FeatureDisplay Component', () => {
     const feature = {
       title: 'Sample Feature',
       path: 'https://example.com/sample-feature',
+      image: 'https://example.com/preview.jpg',
       measures_implemented: [
         { path: 'https://example.com/nwrm-1', title: 'NWRM 1' },
         { path: 'https://example.com/nwrm-2', title: 'NWRM 2' },
@@ -23,6 +24,22 @@ describe('FeatureDisplay Component', () => {
       'href',
       'https://example.com/sample-feature',
     );
+    expect(getByRole('img')).toHaveAttribute(
+      'src',
+      'https://example.com/preview.jpg',
+    );
+  });
+
+  it('does not render an image when the feature has none', () => {
+    const { queryByRole, getByRole } = render(
+      <FeatureDisplay feature={{ title: 'No image', path: '/no-image' }} />,
+    );
+
+    expect(queryByRole('img')).not.toBeInTheDocument();
+    expect(getByRole('link', { name: 'No image' })).toHaveAttribute(
+      'href',
+      '/no-image',
+    );
   });
 
   it('renders nothing when feature is null', () => {

package/src/components/manage/Blocks/CaseStudyExplorer/InfoOverlay.jsx

@@ -14,6 +14,17 @@ function InfoOverlay({
   const { map } = useMapContext();
   const [tooltip, setTooltipRef] = React.useState();
   const [showTooltip, setShowTooltip] = React.useState();
+  const overlayRef = React.useRef(null);
+
+  // `ol` is a fresh object literal on every render (see withOpenLayers) and
+  // `onFeatureSelect`/`hideFilters` can change identity; keep them in refs so
+  // the overlay and its map handler are created only once per mount.
+  const olRef = React.useRef(ol);
+  olRef.current = ol;
+  const onFeatureSelectRef = React.useRef(onFeatureSelect);
+  onFeatureSelectRef.current = onFeatureSelect;
+  const hideFiltersRef = React.useRef(hideFilters);
+  hideFiltersRef.current = hideFilters;
 
   const prevLayerId = usePrevious(layerId);
 
@@ -26,12 +37,13 @@ function InfoOverlay({
   React.useEffect(() => {
     if (!(map && tooltip)) return;
 
-    const overlay = new ol.Overlay({
-      element: document.getElementById('popup-overlay'),
+    const overlay = new olRef.current.Overlay({
+      element: tooltip,
       positioning: 'bottom-center',
       offset: [0, -10],
       stopEvent: false,
     });
+    overlayRef.current = overlay;
     map.addOverlay(overlay);
 
     function handler(evt) {
@@ -41,7 +53,7 @@ function InfoOverlay({
 
       if (
         features.length &&
-        !hideFilters // && !isCluster(features)
+        !hideFiltersRef.current // && !isCluster(features)
       ) {
         setShowTooltip(true);
       } else {
@@ -49,7 +61,7 @@ function InfoOverlay({
         if (evt.originalEvent.target.tagName === 'A') return;
         setShowTooltip(false);
         popupOverlay.style.display = 'none';
-        onFeatureSelect(null);
+        onFeatureSelectRef.current(null);
       }
     }
 
@@ -58,8 +70,25 @@ function InfoOverlay({
     return () => {
       map.un('click', handler);
       map.removeOverlay(overlay);
+      overlayRef.current = null;
     };
-  }, [map, tooltip, onFeatureSelect, hideFilters, ol]); //
+  }, [map, tooltip]);
+
+  // Anchor the popup to the selected case study and show it above the marker.
+  // Selecting a cluster (null feature) or clicking the map clears the popup.
+  React.useEffect(() => {
+    const overlay = overlayRef.current;
+    if (!overlay) return;
+
+    const coordinates = selectedFeature?.geometry?.flatCoordinates;
+    if (coordinates) {
+      overlay.setPosition(coordinates);
+      setShowTooltip(true);
+    } else {
+      overlay.setPosition(undefined);
+      setShowTooltip(false);
+    }
+  }, [selectedFeature, tooltip]);
 
   const [isClient, setIsClient] = React.useState(false);
   React.useEffect(() => setIsClient(true), []);

package/src/components/manage/Blocks/CaseStudyExplorer/InfoOverlay.test.jsx

@@ -31,6 +31,7 @@ jest.mock('ol/Overlay', () => {
 const mockOl = {
   Overlay: jest.fn((config) => ({
     element: config.element,
+    setPosition: jest.fn(),
   })),
 };
 
@@ -111,7 +112,8 @@ describe('InfoOverlay', () => {
     handler(evt);
 
     expect(onFeatureSelect).toHaveBeenCalledWith(null);
-    expect(document.getElementById('popup-overlay').style.display).toBe('none');
+    const overlay = mockOl.Overlay.mock.results[0].value;
+    expect(overlay.element.style.display).toBe('none');
   });
 
   it('ignores click when target is a link (A tag)', () => {
@@ -135,4 +137,23 @@ describe('InfoOverlay', () => {
 
     expect(onFeatureSelect).not.toHaveBeenCalled();
   });
+
+  it('positions the overlay over the selected feature', () => {
+    render(
+      <InfoOverlay
+        {...defaultProps}
+        selectedFeature={{ geometry: { flatCoordinates: [10, 20] } }}
+      />,
+    );
+
+    const overlay = mockOl.Overlay.mock.results[0].value;
+    expect(overlay.setPosition).toHaveBeenCalledWith([10, 20]);
+  });
+
+  it('clears the overlay position when no feature is selected', () => {
+    render(<InfoOverlay {...defaultProps} selectedFeature={null} />);
+
+    const overlay = mockOl.Overlay.mock.results[0].value;
+    expect(overlay.setPosition).toHaveBeenCalledWith(undefined);
+  });
 });

package/src/components/manage/Blocks/CaseStudyExplorer/styles.less

@@ -35,6 +35,14 @@
   opacity: 0.55;
 }
 
+.ol-overlaycontainer {
+  z-index: 1 !important;
+}
+
+.ol-viewport {
+  overflow: visible !important;
+}
+
 #csepopup > span {
   display: 'block';
   margin-bottom: '10px';
@@ -42,21 +50,30 @@
 }
 
 #csepopup {
-  // width: 300px;
-  width: 100%;
+  width: 300px;
   // height: 100%;
   padding: 1em;
+  background-color: #f9f9f9;
   // border: 1px solid black;
-  // font-size: 14px;
   // line-height: initial;
   font-size: 1rem;
 
+  .csepopup-image {
+    display: block;
+    width: 100%;
+    max-width: 260px;
+    max-height: 160px;
+    margin-bottom: 10px;
+    object-fit: cover;
+  }
+
   a:hover {
     color: #289588;
   }
 
   h3 {
-    font-size: 1.4rem;
+    margin: 0px;
+    font-size: 1rem;
   }
 
   h4 {
@@ -96,6 +113,10 @@
       max-height: 133px;
     }
   }
+
+  .ri-external-link-line {
+    margin-left: 0.25rem;
+  }
 }
 
 #external-popup-overlay {

package/src/components/manage/Blocks/CaseStudyExplorer/utils.js

@@ -104,7 +104,8 @@ export function getFeatures({ cases, ol }) {
           properties,
           'habitat_ecosystem_type',
         ),
-        nrr_article: properties.nrr_article,
+        nrr_legislation: properties.nrr_legislation,
+        nrr_biogeographical_region: properties.nrr_biogeographical_region,
         scale_of_planning: properties.scale_of_planning,
         description: properties.description,
         index,
@@ -143,11 +144,12 @@ function hasWholeWord(text, needle) {
 }
 
 const FILTER_FIELDS = [
+  'nrr_legislation',
+  'nrr_biogeographical_region',
   'measures_implemented',
   'typology_of_measures',
   'current_status',
   'habitat_ecosystem_type',
-  'nrr_article',
   'scale_of_planning',
 ];
 

package/src/components/manage/Blocks/CaseStudyExplorer/utils.test.js

@@ -96,11 +96,12 @@ describe('utils.js', () => {
       },
     ];
     const noFilters = {
+      nrr_legislation: [],
+      nrr_biogeographical_region: [],
       measures_implemented: [],
       typology_of_measures: [],
       current_status: [],
       habitat_ecosystem_type: [],
-      nrr_article: [],
       scale_of_planning: [],
     };
 
@@ -127,7 +128,8 @@ describe('utils.js', () => {
           url: '/planned-river-case',
           current_status: 'planned',
           ecosystem_typology: ['River', 'Wetland'],
-          nrr_article: [{ id: 'article-1', title: 'Article 1' }],
+          nrr_legislation: [{ id: 'article-1', title: 'Article 1' }],
+          nrr_biogeographical_region: [{ id: 'region-1', title: 'Alpine' }],
           scale_of_planning: 'Regional',
         },
       },
@@ -139,7 +141,8 @@ describe('utils.js', () => {
           url: '/future-case',
           current_status: 'Future',
           ecosystem_typology: ['Forest'],
-          nrr_article: ['article-2'],
+          nrr_legislation: ['article-2'],
+          nrr_biogeographical_region: ['region-2'],
           scale_of_planning: 'National',
         },
       },
@@ -147,18 +150,23 @@ describe('utils.js', () => {
 
     expect(
       filterCases(cases, {
+        nrr_legislation: ['article-1'],
+        nrr_biogeographical_region: ['region-1'],
         measures_implemented: [],
         typology_of_measures: [],
         current_status: ['planned'],
         habitat_ecosystem_type: ['River'],
-        nrr_article: ['article-1'],
         scale_of_planning: ['Regional'],
       }),
     ).toHaveLength(1);
-    expect(getFilters(cases).nrr_article).toEqual({
+    expect(getFilters(cases).nrr_legislation).toEqual({
       'article-1': 'Article 1',
       'article-2': 'article-2',
     });
+    expect(getFilters(cases).nrr_biogeographical_region).toEqual({
+      'region-1': 'Alpine',
+      'region-2': 'region-2',
+    });
   });
 
   test('getFilters', () => {
@@ -176,7 +184,8 @@ describe('utils.js', () => {
       },
       current_status: {},
       habitat_ecosystem_type: {},
-      nrr_article: {},
+      nrr_legislation: {},
+      nrr_biogeographical_region: {},
       scale_of_planning: {},
     });
   });

package/src/index.js

@@ -30,6 +30,8 @@ import {
   NRRTypologyOfMeasuresView,
   NRREcosystemTypologyView,
   NRRArticleView,
+  NRRLegislationView,
+  NRRBiogeographicalRegionView,
   NRRrelatedCaseStudiesView,
   NRRMeasuresImplementedView,
   NRRHabitatEcosystemTypeView,
@@ -284,14 +286,23 @@ const applyConfig = (config) => {
   }
 
   config.widgets.id.geolocation = GeolocationWidget;
+  // NRR Measure widgets
   config.widgets.views.id.nrr_typology_of_measures = NRRTypologyOfMeasuresView;
   config.widgets.views.id.nrr_ecosystem_typology = NRREcosystemTypologyView;
+  config.widgets.views.id.nrr_article = NRRArticleView;
+  config.widgets.views.id.related_case_studies = NRRrelatedCaseStudiesView;
+  // NRR Case study widgets
+  config.widgets.views.id.nrr_measures_implemented = NRRMeasuresImplementedView;
   config.widgets.views.id.nrr_habitat_ecosystem_type =
     NRRHabitatEcosystemTypeView;
   config.widgets.views.id.nrr_scale_of_planning = NRRScaleOfPlanningView;
-  config.widgets.views.id.nrr_article = NRRArticleView;
+  config.widgets.views.id.nrr_legislation = NRRLegislationView;
+  config.widgets.views.id.nrr_biogeographical_region =
+    NRRBiogeographicalRegionView;
   config.widgets.views.id.nrr_current_status = NRRCurrentStatusView;
-  // EUNIS Widgets
+  config.widgets.id.nrr_habitat_directive = EUNISHDWidget;
+  config.widgets.views.id.nrr_habitat_directive = EUNISHDView;
+  // Marine EUNIS habitat Widgets
   config.widgets.id.eunis_national_json = EUNISCountryCodeWidget;
   config.widgets.views.id.eunis_national_json = EUNISCountryCodeView;
   config.widgets.id.eunis_regional_sea_convention_value_json =
@@ -311,8 +322,7 @@ const applyConfig = (config) => {
   config.widgets.views.id.eunis_msfd_relevant_classification_json =
     EUNISMSFDView;
   config.widgets.views.id.eunis_code = EUNISCodeView;
-  config.widgets.views.id.related_case_studies = NRRrelatedCaseStudiesView;
-  config.widgets.views.id.nrr_measures_implemented = NRRMeasuresImplementedView;
+
   config.widgets.views.widget.richtext = RichTextWidget;
 
   return config;