@eeacms/volto-bise-policy 1.3.5 → 1.3.6

package/CHANGELOG.md

@@ -4,6 +4,34 @@ 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.6](https://github.com/eea/volto-bise-policy/compare/1.3.5...1.3.6) - 19 August 2026
+
+#### :rocket: New Features
+
+- feat: add dompurify dependency [laszlocseh - [`8e2eda4`](https://github.com/eea/volto-bise-policy/commit/8e2eda4eba5084e231e8457da1a98a47036bccb7)]
+- feat(CaseStudyExplorer): add path filter and edit form [laszlocseh - [`ef277dc`](https://github.com/eea/volto-bise-policy/commit/ef277dc8a60a8ae746e635e4da48dfefc67685dc)]
+- feat(CaseStudyExplorer): add status filters and map legend [laszlocseh - [`f2c28d2`](https://github.com/eea/volto-bise-policy/commit/f2c28d25d259d3d661cfbb261419ee435f7470d5)]
+
+#### :bug: Bug Fixes
+
+- fix(CaseStudyMap): properly display the selected case study style on map [laszlocseh - [`0b374a7`](https://github.com/eea/volto-bise-policy/commit/0b374a70803be40421e11de9776155299d1c0e22)]
+- fix(CaseStudyExplorer): sanitize HTML and escape regex input [laszlocseh - [`e6ab8e1`](https://github.com/eea/volto-bise-policy/commit/e6ab8e1bd7a2d4e6b9341b19eda440828715a4d9)]
+
+#### :nail_care: Enhancements
+
+- refactor(case-study-explorer): replace hardcoded interaction index with helper [laszlocseh - [`fb69ec0`](https://github.com/eea/volto-bise-policy/commit/fb69ec082ff5e468be0f6e872e6a45e9e7c3695f)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`66ec7fa`](https://github.com/eea/volto-bise-policy/commit/66ec7faab819bb27a0a786d459b6389a86bde21d)]
+- style(CaseStudyExplorer): update status colors and fix indentation [laszlocseh - [`54cb574`](https://github.com/eea/volto-bise-policy/commit/54cb574a4947580b19a01307484fcedbf23175a3)]
+- style: Automated code fix [eea-jenkins - [`5c742ae`](https://github.com/eea/volto-bise-policy/commit/5c742ae2581275f9c3bd83a8376d848bf5d33ead)]
+- style: Automated code fix [eea-jenkins - [`4441648`](https://github.com/eea/volto-bise-policy/commit/44416480a18e217db2ebaf86bc2aaa4f60d31787)]
+- style: Automated code fix [eea-jenkins - [`5eb0e32`](https://github.com/eea/volto-bise-policy/commit/5eb0e3284d2ef540c2cdc51984839cf50aad8b75)]
+
+#### :hammer_and_wrench: Others
+
+- test: fix case study utils.test.js [laszlocseh - [`adcffba`](https://github.com/eea/volto-bise-policy/commit/adcffba55f0cab391eef6db2b88880acffcea918)]
 ### [1.3.5](https://github.com/eea/volto-bise-policy/compare/1.3.4...1.3.5) - 5 August 2026
 
 #### :rocket: New Features
@@ -23,7 +51,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINSFILE] sanitize sonarqube command [valentinab25 - [`8e2dc1a`](https://github.com/eea/volto-bise-policy/commit/8e2dc1a14f3230f197f009a76bf87587724b6e3a)]
 
 #### :hammer_and_wrench: Others
 
@@ -127,8 +154,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINSFILE] add package version in sonarqube [valentinab25 - [`4c2d75b`](https://github.com/eea/volto-bise-policy/commit/4c2d75bbf6dca47929c6613749169b40ed483985)]
-- chore: [JENKINSFILE] use sonarqube branches [EEA Jenkins - [`f99c622`](https://github.com/eea/volto-bise-policy/commit/f99c622726cfd711704f50218a2f1fe833974ec3)]
 
 #### :hammer_and_wrench: Others
 
@@ -391,7 +416,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - chore: customize root theme to use volto-spotlight - refs #259794 [ana-oprea - [`347f96e`](https://github.com/eea/volto-bise-policy/commit/347f96e335139f9656abd34c308c531b05de85e7)]
 - chore: change the theme and alias to volto-spotlight and add volto-spotlight to package.json - refs #259794 [ana-oprea - [`52732a1`](https://github.com/eea/volto-bise-policy/commit/52732a17b3247a04ffae0a3f5118e173afa98157)]
 - chore: change theme to eea-volto-theme, change config.alias - refs #259794 [ana-oprea - [`c2d08ea`](https://github.com/eea/volto-bise-policy/commit/c2d08ea08a7f0e5f6f7d32149e60ea3f3e901923)]
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`a3c9488`](https://github.com/eea/volto-bise-policy/commit/a3c9488c5d09ba97fe5976675524d436080a2460)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`fddc30f`](https://github.com/eea/volto-bise-policy/commit/fddc30f11a1d8ec290edaca2d924282f5e113bc6)]
 - chore:volto 16 in tests, update docs, fix stylelint overrides [valentinab25 - [`005ce74`](https://github.com/eea/volto-bise-policy/commit/005ce742dbd014fde27e417059251233365766dd)]
 
@@ -404,17 +428,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`c1277ba`](https://github.com/eea/volto-bise-policy/commit/c1277bacf840ee9feccbfd6a2c85f0b25a9a9125)]
 - test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`c944153`](https://github.com/eea/volto-bise-policy/commit/c944153710fd53c5d48863cf363464273e25f52e)]
 - test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`d648d52`](https://github.com/eea/volto-bise-policy/commit/d648d525a2fc5076577fe0f75ff9782bf0d1d4e9)]
-- test: [JENKINS] fix jest config, fail with logs on coverage [valentinab25 - [`2a7affe`](https://github.com/eea/volto-bise-policy/commit/2a7affe33d737704bdba117c4a5c8c6748ef7a47)]
-- test: [JENKINS] fix jest config, fail with logs on coverage [valentinab25 - [`5929642`](https://github.com/eea/volto-bise-policy/commit/59296420105d0e8c1f1547aa0cd17a019e478c2b)]
-- test: [JENKINS] fix jest config, fail with logs on coverage [valentinab25 - [`b1142f1`](https://github.com/eea/volto-bise-policy/commit/b1142f1da3667a9f56720f65bebce897a5dd8005)]
 - test: cypress should not wait for navigation, actions, types - refs #259794 [ana-oprea - [`188637c`](https://github.com/eea/volto-bise-policy/commit/188637c78a0cae71b5ee48022507d559dfaceb3e)]
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`fa4e473`](https://github.com/eea/volto-bise-policy/commit/fa4e473018386ec3f09d7300d655c8cccdc19a0e)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`1d9135b`](https://github.com/eea/volto-bise-policy/commit/1d9135bb878b3c7a1b828085b99b9d27d78ce60e)]
 - remove cypress tests as it doesn t work on bise [Dobricean Ioan Dorian - [`ba7e2de`](https://github.com/eea/volto-bise-policy/commit/ba7e2defea2dcfd01537c3abb41fa9515ff0a3e3)]
 - add mega menu layout settings as #259794 said [dobri1408 - [`b9a3683`](https://github.com/eea/volto-bise-policy/commit/b9a3683e7d85f8c88ad8feac975c47c434f62c4a)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`9181908`](https://github.com/eea/volto-bise-policy/commit/9181908c7f4b51bdf83a34f8c7f25827de9b1cc6)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`099d796`](https://github.com/eea/volto-bise-policy/commit/099d79669471e6924bf1e0bc51a79d54379c3a1a)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`6d5d8e2`](https://github.com/eea/volto-bise-policy/commit/6d5d8e29b04ddb92628245570055067ca3dcbb6c)]
 - test: fix comment [valentinab25 - [`4f27d5a`](https://github.com/eea/volto-bise-policy/commit/4f27d5af2e8895c7af4f1157521ca42682b96e23)]
 - test: EN locales, pre-commit fix, feature PRs checks Refs #257193 [valentinab25 - [`4c2fcb0`](https://github.com/eea/volto-bise-policy/commit/4c2fcb01065e1ef962317ba7be788fd1df079618)]
 - test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`89afaa1`](https://github.com/eea/volto-bise-policy/commit/89afaa15892930452027ef8c8593fc6d193cda70)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-bise-policy",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "description": "@eeacms/volto-bise-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -33,6 +33,7 @@
     "@eeacms/volto-openlayers-map": "2.0.1",
     "@eeacms/volto-resize-helper": "*",
     "@plone-collective/volto-authomatic": "2.0.1",
+    "dompurify": "^3.3.1",
     "esri-loader": "3.7.0",
     "plotly.js": "^2.28.0",
     "querystring": "0.2.1",

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

@@ -1,5 +1,26 @@
+import React from 'react';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import CaseStudyExplorerView from './CaseStudyExplorerView';
+import schema from './schema';
 
 export default function CaseStudyExplorerEdit(props) {
-  return <CaseStudyExplorerView {...props} mode="edit" />;
+  return (
+    <>
+      <CaseStudyExplorerView {...props} mode="edit" />
+      <SidebarPortal selected={props.selected}>
+        <InlineForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          formData={props.data}
+        />
+      </SidebarPortal>
+    </>
+  );
 }

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

@@ -6,7 +6,7 @@ import CaseStudyMap from './CaseStudyMap';
 import { ActiveFilters, CaseStudyFilters, SearchBox } from './CaseStudyFilters';
 // import CaseStudyList from './CaseStudyListing';
 
-import { filterCases, getFilters } from './utils';
+import { filterCases, filterCasesByPath, getFilters } from './utils';
 import { useCases } from './hooks';
 
 import './styles.less';
@@ -14,7 +14,8 @@ import './styles.less';
 export default function CaseStudyExplorerView(props) {
   const cases_url = '/@@case-studies-map.arcgis.json';
   let cases = useCases(addAppURL(cases_url));
-  const { caseStudiesIds } = props; // case studies from measure view
+  const { caseStudiesIds, data } = props; // case studies from measure view
+  const { filter_path } = data || {};
   const [selectedCase, onSelectedCase] = React.useState(null);
   const [searchInput, setSearchInput] = React.useState('');
   const hideFilters = caseStudiesIds ? true : false;
@@ -22,21 +23,24 @@ export default function CaseStudyExplorerView(props) {
   const [activeFilters, setActiveFilters] = React.useState({
     measures_implemented: [],
     typology_of_measures: [],
+    current_status: [],
+    habitat_ecosystem_type: [],
+    nrr_article: [],
+    scale_of_planning: [],
   });
 
   const [activeItems, setActiveItems] = React.useState(cases);
   const [filters, setFilters] = React.useState([]);
   const [map, setMap] = React.useState();
+  const pathFilteredCases = React.useMemo(
+    () => filterCasesByPath(cases, filter_path),
+    [cases, filter_path],
+  );
 
   React.useEffect(() => {
-    const _filters = getFilters(cases);
+    const _filters = getFilters(pathFilteredCases);
     setFilters(_filters);
-  }, [
-    cases,
-    activeFilters.measures_implemented,
-    activeFilters.typology_of_measures,
-    activeItems.length,
-  ]);
+  }, [pathFilteredCases, activeFilters, activeItems.length]);
 
   React.useEffect(() => {
     let activeItems = filterCases(
@@ -44,10 +48,11 @@ export default function CaseStudyExplorerView(props) {
       activeFilters,
       caseStudiesIds,
       searchInput,
+      filter_path,
     );
 
     setActiveItems(activeItems);
-  }, [caseStudiesIds, activeFilters, cases, searchInput]);
+  }, [caseStudiesIds, activeFilters, cases, searchInput, filter_path]);
 
   if (__SERVER__) return '';
 
@@ -85,11 +90,11 @@ export default function CaseStudyExplorerView(props) {
         )}
       </Grid.Row>
       <Grid.Row>
-        {cases.length ? (
+        {pathFilteredCases.length ? (
           <Grid columns={12}>
             <Grid.Column mobile={12} tablet={12} computer={12}>
               <CaseStudyMap
-                items={cases}
+                items={pathFilteredCases}
                 activeItems={activeItems}
                 hideFilters={hideFilters}
                 selectedCase={selectedCase}

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

@@ -31,6 +31,7 @@ jest.mock('./CaseStudyFilters', () => ({
 
 jest.mock('./utils', () => ({
   filterCases: jest.fn(() => [{ id: 1, title: 'Filtered Case' }]),
+  filterCasesByPath: jest.fn((cases) => cases),
   getFilters: jest.fn(() => ['filter1', 'filter2']),
 }));
 

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

@@ -3,16 +3,7 @@ import React from 'react';
 import { centerAndResetMapZoom, scrollToElement } from './utils';
 import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 
-const normalizeSearchInput = (searchInput) => {
-  let normInput = searchInput
-    .toLowerCase()
-    .replace('(', '')
-    .replace(')', '')
-    .replace('?', '.')
-    .replace('*', '[^\\s]+');
-
-  return '\\b' + normInput + '\\b';
-};
+const normalizeSearchInput = (searchInput) => searchInput.trim().toLowerCase();
 
 export function CaseStudyFilter(props) {
   const {
@@ -24,6 +15,7 @@ export function CaseStudyFilter(props) {
     map,
     ol,
   } = props;
+  const filterEntries = Object.entries(filters?.[filterName] || {});
 
   const showInputs = (event) => {
     event.currentTarget.parentElement.classList.add('active');
@@ -33,6 +25,7 @@ export function CaseStudyFilter(props) {
     <div className="filter-wrapper">
       <button
         className="ui basic button facet-btn"
+        disabled={!filterEntries.length}
         onClick={(e) => showInputs(e)}
       >
         <span>
@@ -41,7 +34,9 @@ export function CaseStudyFilter(props) {
         </span>
       </button>
       <div className="filter-inputs-wrapper">
-        {Object.entries(filters?.[filterName] || {}).length > 7 ? (
+        {!filterEntries.length ? (
+          <div className="filter-empty">No options available</div>
+        ) : filterEntries.length > 7 ? (
           <input
             type="text"
             className="filterInputText"
@@ -66,7 +61,7 @@ export function CaseStudyFilter(props) {
         )}
 
         <div className="filter-inputs">
-          {Object.entries(filters?.[filterName] || {})
+          {filterEntries
             .sort((item1, item2) => item1[1].localeCompare(item2[1]))
             .map(([value, label], index) => (
               <label
@@ -138,6 +133,27 @@ function CaseStudyFiltersComponent(props) {
         map={map}
         ol={ol}
       />
+
+      <CaseStudyFilter
+        filterTitle="Current status"
+        filterName="current_status"
+        {...props}
+      />
+      <CaseStudyFilter
+        filterTitle="Habitat/ecosystem type"
+        filterName="habitat_ecosystem_type"
+        {...props}
+      />
+      <CaseStudyFilter
+        filterTitle="NRR Article"
+        filterName="nrr_article"
+        {...props}
+      />
+      <CaseStudyFilter
+        filterTitle="Scale of Planning"
+        filterName="scale_of_planning"
+        {...props}
+      />
     </>
   );
 }
@@ -266,7 +282,9 @@ function ActiveFiltersComponent(props) {
     for (let i = 0; i < filterInputs.length; i++) {
       filterInputs[i].checked = false;
     }
-    setActiveFilters({ measures_implemented: [], typology_of_measures: [] });
+    setActiveFilters(
+      Object.fromEntries(Object.keys(activeFilters).map((key) => [key, []])),
+    );
     scrollToElement('search-input');
   };
 
@@ -314,6 +332,34 @@ function ActiveFiltersComponent(props) {
             filters={filters}
             onRemoveFilter={removeFilter}
           />
+          <FilterGroup
+            filterName="current_status"
+            filterLabel="Current status:"
+            activeFilterCodes={activeFilters.current_status}
+            filters={filters}
+            onRemoveFilter={removeFilter}
+          />
+          <FilterGroup
+            filterName="habitat_ecosystem_type"
+            filterLabel="Habitat/ecosystem type:"
+            activeFilterCodes={activeFilters.habitat_ecosystem_type}
+            filters={filters}
+            onRemoveFilter={removeFilter}
+          />
+          <FilterGroup
+            filterName="nrr_article"
+            filterLabel="NRR Article:"
+            activeFilterCodes={activeFilters.nrr_article}
+            filters={filters}
+            onRemoveFilter={removeFilter}
+          />
+          <FilterGroup
+            filterName="scale_of_planning"
+            filterLabel="Scale of Planning:"
+            activeFilterCodes={activeFilters.scale_of_planning}
+            filters={filters}
+            onRemoveFilter={removeFilter}
+          />
         </div>
       </div>
     </div>

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

@@ -1,8 +1,11 @@
 import React from 'react';
+import DOMPurify from 'dompurify';
 import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 
 import {
   centerAndResetMapZoom,
+  escapeRegExp,
+  getSelectInteraction,
   scrollToElement,
   zoomMapToFeatures,
 } from './utils';
@@ -33,7 +36,9 @@ const showPageNr = (pageNr, currentPage, numberOfPages) => {
 function CaseStudyList(props) {
   const { selectedCase, onSelectedCase, pointsSource, map, searchInput, ol } =
     props;
-  const reSearch = new RegExp(`\\b(${searchInput})\\b`, 'gi');
+  const reSearch = searchInput
+    ? new RegExp(`\\b(${escapeRegExp(searchInput)})\\b`, 'gi')
+    : null;
   const [currentPage, setCurrentPage] = React.useState(1);
 
   const features = pointsSource
@@ -132,7 +137,7 @@ function CaseStudyList(props) {
                         // reset map zoom
                         onSelectedCase(null);
                         centerAndResetMapZoom({ map, ol });
-                        map.getInteractions().array_[9].getFeatures().clear();
+                        getSelectInteraction(map)?.getFeatures().clear();
                       }}
                     >
                       <span
@@ -167,12 +172,17 @@ function CaseStudyList(props) {
                     <p
                       className="listing-description"
                       dangerouslySetInnerHTML={{
-                        __html: searchInput
-                          ? item.values_.description.replaceAll(
-                              reSearch,
-                              '<b>$1</b>',
-                            )
-                          : item.values_.description,
+                        // description is server data and may contain HTML;
+                        // sanitize the highlighted result so no scripts or
+                        // event handlers can reach the DOM
+                        __html: DOMPurify.sanitize(
+                          searchInput && reSearch && item.values_.description
+                            ? item.values_.description.replaceAll(
+                                reSearch,
+                                '<b>$1</b>',
+                              )
+                            : item.values_.description || '',
+                        ),
                       }}
                     ></p>
                     <div className="slot-bottom">
@@ -212,10 +222,9 @@ function CaseStudyList(props) {
                           role="button"
                           onKeyDown={() => {}}
                           onClick={() => {
-                            map
-                              .getInteractions()
-                              .array_[9].getFeatures()
-                              .clear();
+                            const selectInteraction = getSelectInteraction(map);
+                            selectInteraction?.getFeatures().clear();
+
                             // scroll to the map
                             scrollToElement('ol-map-container');
 
@@ -231,10 +240,13 @@ function CaseStudyList(props) {
                               const coords =
                                 item.values_.geometry.flatCoordinates;
                               const pixel = map.getPixelFromCoordinate(coords);
-                              map
-                                .getInteractions()
-                                .array_[9].getFeatures()
-                                .push(map.getFeaturesAtPixel(pixel)[0]);
+                              const selectedFeature =
+                                map.getFeaturesAtPixel(pixel)[0];
+                              if (selectedFeature) {
+                                selectInteraction
+                                  ?.getFeatures()
+                                  .push(selectedFeature);
+                              }
                             }, 1100);
                           }}
                         >

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

@@ -14,6 +14,7 @@ jest.mock('@eeacms/volto-openlayers-map', () => ({
 }));
 
 jest.mock('./utils', () => ({
+  ...jest.requireActual('./utils'),
   centerAndResetMapZoom: jest.fn(),
   scrollToElement: jest.fn(),
   zoomMapToFeatures: jest.fn(),
@@ -119,6 +120,59 @@ describe('CaseStudyList', () => {
     expect(getByText('Feature 1').getAttribute('href')).toBe('/feature1');
   });
 
+  it('does not crash on regex metacharacters in search input', () => {
+    const { getByText } = render(
+      <CaseStudyList
+        selectedCase={null}
+        onSelectedCase={jest.fn()}
+        pointsSource={mockPointsSource}
+        map={mockMap}
+        searchInput="("
+        ol={{}}
+      />,
+    );
+
+    // must not throw (previously: SyntaxError from invalid RegExp)
+    expect(getByText('Feature 1')).toBeInTheDocument();
+    expect(getByText('Description 1')).toBeInTheDocument();
+  });
+
+  it('sanitizes description HTML and keeps search highlights', () => {
+    const evilPointsSource = createMockPointsSource([
+      {
+        values_: {
+          title: 'Evil Case',
+          path: '/evil',
+          description:
+            '<img src=x onerror=alert(1)> <script>alert(2)</script> a river bed',
+          typology_of_measures: ['SectorA'],
+          measures_implemented: [{ title: 'M1', path: '/m1' }],
+          geometry: { flatCoordinates: [0, 0] },
+        },
+      },
+    ]);
+
+    const { container } = render(
+      <CaseStudyList
+        selectedCase={null}
+        onSelectedCase={jest.fn()}
+        pointsSource={evilPointsSource}
+        map={mockMap}
+        searchInput="river"
+        ol={{}}
+      />,
+    );
+
+    // XSS payloads must not survive into the DOM
+    expect(container.querySelector('img[onerror]')).toBeNull();
+    expect(container.querySelector('script')).toBeNull();
+    // harmless text still renders and the highlight survives sanitization
+    expect(container.textContent).toContain('a river bed');
+    const highlight = container.querySelector('b');
+    expect(highlight).not.toBeNull();
+    expect(highlight.textContent).toBe('river');
+  });
+
   it('calls zoomMapToFeatures and onSelectedCase when clicking Show on map', async () => {
     const onSelectedCase = jest.fn();
 

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

@@ -16,7 +16,13 @@ import InfoOverlay from './InfoOverlay';
 import FeatureInteraction from './FeatureInteraction';
 import CaseStudyList from './CaseStudyListing';
 
-import { centerAndResetMapZoom, getFeatures, scrollToElement } from './utils';
+import {
+  centerAndResetMapZoom,
+  CLUSTER_COLOR,
+  getFeatures,
+  getSelectInteraction,
+  scrollToElement,
+} from './utils';
 
 const styleCache = {};
 const MapContextGateway = ({ setMap }) => {
@@ -69,32 +75,43 @@ function CaseStudyMap(props) {
     }),
   );
 
+  // `ol` is a fresh object literal on every render (see withOpenLayers); keep
+  // the latest reference in a ref so effects can depend only on values that
+  // actually change. Refreshing the points source regenerates the cluster
+  // features, which drops the currently selected feature from the rendered set.
+  const olRef = React.useRef(ol);
+  olRef.current = ol;
+
   React.useEffect(() => {
     if (activeItems) {
       pointsSource.clear();
-      pointsSource.addFeatures(getFeatures({ cases: activeItems, ol }));
+      pointsSource.addFeatures(
+        getFeatures({ cases: activeItems, ol: olRef.current }),
+      );
     }
-  }, [activeItems, pointsSource, ol]);
+  }, [activeItems, pointsSource]);
 
   React.useEffect(() => {
     if (!map) return;
 
-    const moveendListener = (e) => {
-      // console.log('map.getView()', map.getView());
-      // console.log('selectedCase', selectedCase);
+    const moveendListener = () => {
       const mapZoom = Math.round(map.getView().getZoom() * 10) / 10;
       const mapCenter = map.getView().getCenter();
+      const selectInteraction = getSelectInteraction(map);
 
-      if (selectedCase) {
-        const coords = selectedCase.geometry.flatCoordinates;
-        const pixel = map.getPixelFromCoordinate(coords);
-        map.getInteractions().array_[9].getFeatures().clear();
-        map
-          .getInteractions()
-          .array_[9].getFeatures()
-          .push(map.getFeaturesAtPixel(pixel)[0]);
-      } else {
-        map.getInteractions().array_[9].getFeatures().clear();
+      if (selectInteraction) {
+        if (selectedCase) {
+          const coords = selectedCase.geometry.flatCoordinates;
+          const pixel = map.getPixelFromCoordinate(coords);
+          const selectedFeature = map.getFeaturesAtPixel(pixel)[0];
+
+          selectInteraction.getFeatures().clear();
+          if (selectedFeature) {
+            selectInteraction.getFeatures().push(selectedFeature);
+          }
+        } else {
+          selectInteraction.getFeatures().clear();
+        }
       }
 
       if (
@@ -113,12 +130,9 @@ function CaseStudyMap(props) {
     return () => {
       map.un('moveend', moveendListener);
     };
-  }, [map, selectedCase, resetMapButtonClass, setResetMapButtonClass, ol]);
+  }, [map, selectedCase, ol.proj, setResetMapButtonClass]);
 
-  const clusterStyle = React.useMemo(
-    () => selectedClusterStyle({ selectedCase, ol }),
-    [selectedCase, ol],
-  );
+  const clusterStyle = React.useMemo(() => selectedClusterStyle({ ol }), [ol]);
 
   const MapWithSelection = React.useMemo(() => Map, []);
   // console.log('render');
@@ -148,7 +162,7 @@ function CaseStudyMap(props) {
                 scrollToElement('search-input');
                 onSelectedCase(null);
                 centerAndResetMapZoom({ map, ol });
-                map.getInteractions().array_[9].getFeatures().clear();
+                getSelectInteraction(map)?.getFeatures().clear();
               }}
             >
               <span className="result-info-title">Reset map</span>
@@ -164,7 +178,6 @@ function CaseStudyMap(props) {
           <FeatureInteraction
             onFeatureSelect={onSelectedCase}
             hideFilters={hideFilters}
-            selectedCase={selectedCase}
           />
           <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
           <Layer.Vector
@@ -176,20 +189,41 @@ function CaseStudyMap(props) {
         </Layers>
       </MapWithSelection>
       {hideFilters ? null : (
-        <CaseStudyList
-          map={map}
-          activeItems={activeItems}
-          selectedCase={selectedCase}
-          onSelectedCase={onSelectedCase}
-          pointsSource={pointsSource}
-          searchInput={searchInput}
-        />
+        <>
+          <div
+            className="case-study-status-legend"
+            aria-label="Case study status legend"
+          >
+            <span className="legend-title">Current status</span>
+            {[
+              ['planned', '#006bb8'],
+              ['ongoing', '#ff9933'],
+              ['completed', '#00a390'],
+            ].map(([status, color]) => (
+              <span className="legend-item" key={status}>
+                <span
+                  className="legend-dot"
+                  style={{ backgroundColor: color }}
+                />
+                {status}
+              </span>
+            ))}
+          </div>
+          <CaseStudyList
+            map={map}
+            activeItems={activeItems}
+            selectedCase={selectedCase}
+            onSelectedCase={onSelectedCase}
+            pointsSource={pointsSource}
+            searchInput={searchInput}
+          />
+        </>
       )}
     </div>
   ) : null;
 }
 
-const selectedClusterStyle = ({ selectedFeature, ol }) => {
+const selectedClusterStyle = ({ ol }) => {
   function _clusterStyle(feature) {
     const size = feature.get('features').length;
     let style = styleCache[size];
@@ -202,7 +236,7 @@ const selectedClusterStyle = ({ selectedFeature, ol }) => {
             color: '#fff',
           }),
           fill: new ol.style.Fill({
-            color: '#007B6C', // #006BB8 #309ebc
+            color: CLUSTER_COLOR,
           }),
         }),
         text: new ol.style.Text({
@@ -216,8 +250,7 @@ const selectedClusterStyle = ({ selectedFeature, ol }) => {
     }
 
     if (size === 1) {
-      // let color = feature.values_.features[0].values_['color'];
-      let color = '#289588'; // #0083E0 #50B0A4
+      const color = feature.values_.features[0].get('color');
 
       return new ol.style.Style({
         image: new ol.style.Circle({