@eeacms/volto-bise-policy 1.3.5 → 1.3.7

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

@@ -31,6 +31,7 @@ jest.mock('./CaseStudyListing', () => () => (
 
 jest.mock('./utils', () => ({
   getFeatures: jest.fn(),
+  getSelectInteraction: jest.fn(() => null),
   centerAndResetMapZoom: jest.fn(),
   scrollToElement: jest.fn(),
 }));
@@ -85,6 +86,42 @@ describe('CaseStudyMap', () => {
     ).not.toBeInTheDocument();
   });
 
+  it('does not refresh the points source when only the ol wrapper identity changes', () => {
+    getFeatures.mockReturnValue([{ id: 1 }]);
+    const activeItems = [{ id: 1 }];
+
+    const { rerender } = render(
+      <CaseStudyMap
+        items={[{ id: 1 }]}
+        activeItems={activeItems}
+        ol={mockOl}
+        setMap={jest.fn()}
+        map={mockMap}
+        onSelectedCase={jest.fn()}
+      />,
+    );
+
+    const pointsSource = mockOl.source.Vector.mock.results[0].value;
+    const clearCount = pointsSource.clear.mock.calls.length;
+    expect(clearCount).toBeGreaterThan(0);
+
+    // withOpenLayers builds a fresh `ol` object literal on every render;
+    // refreshing the points source would regenerate the cluster features and
+    // drop the currently selected feature from the rendered set.
+    rerender(
+      <CaseStudyMap
+        items={[{ id: 1 }]}
+        activeItems={activeItems}
+        ol={{ ...mockOl }}
+        setMap={jest.fn()}
+        map={mockMap}
+        onSelectedCase={jest.fn()}
+      />,
+    );
+
+    expect(pointsSource.clear.mock.calls.length).toBe(clearCount);
+  });
+
   it('clicking Reset map calls utils and clears features', () => {
     getFeatures.mockReturnValueOnce([{ id: 1 }]);
     const onSelectedCase = jest.fn();

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

@@ -18,79 +18,81 @@ export const useStyles = ({ ol }) => {
           }),
         }),
       }),
-    [ol],
+    [ol.style],
   );
 
-  const selectStyle = React.useCallback(
-    (feature) => {
-      // const color = feature.values_.features[0].values_['color'] || '#ccc';
-      const color = '#0A99FF'; // #004B7F #309ebc #0A99FF
-      // console.log(color);
-      selected.image_.getFill().setColor(color);
-      return selected;
-    },
-    [selected],
-  );
+  const selectStyle = React.useCallback(() => {
+    selected.image_.getFill().setColor('#0A99FF');
+    return selected;
+  }, [selected]);
 
   return { selected, selectStyle };
 };
 
-function FeatureInteraction({
-  onFeatureSelect,
-  hideFilters,
-  selectedCase,
-  ol,
-}) {
-  // console.log('featureinteraction', selectedCase);
+function FeatureInteraction({ onFeatureSelect, hideFilters, ol }) {
   const { map } = useMapContext();
   const { selectStyle } = useStyles({ ol });
 
-  const select = new ol.interaction.Select({
-    condition: ol.condition.click,
-    style: hideFilters ? null : selectStyle,
-  });
+  // Keep callbacks current without recreating the OpenLayers interaction.
+  const onFeatureSelectRef = React.useRef(onFeatureSelect);
+  onFeatureSelectRef.current = onFeatureSelect;
+  const hideFiltersRef = React.useRef(hideFilters);
+  hideFiltersRef.current = hideFilters;
+  const olRef = React.useRef(ol);
+  olRef.current = ol;
+
+  // Select stores the selected rendered cluster feature and applies its style
+  // directly to that feature. Recreating it after selectedCase changes clears
+  // that collection and restores the feature's original style.
+  const selectRef = React.useRef(null);
+  if (!selectRef.current) {
+    selectRef.current = new ol.interaction.Select({
+      condition: ol.condition.click,
+      style: hideFilters ? null : selectStyle,
+    });
+  }
+  const select = selectRef.current;
 
   React.useEffect(() => {
     if (!map) return;
 
-    select.on('select', function (e) {
+    const onSelect = (e) => {
       const features = e.target.getFeatures().getArray();
 
       features.forEach((feature) => {
         const subfeatures = feature.values_.features;
         if (subfeatures.length === 1) {
           const selectedFeature = subfeatures[0].values_;
-          if (hideFilters) {
+          if (hideFiltersRef.current) {
             const url = window.location.origin + selectedFeature.path;
             // window.open(url);
             window.location.href = url;
           }
-          onFeatureSelect(selectedFeature);
+          onFeatureSelectRef.current(selectedFeature);
           scrollToElement('ol-map-container');
-          // map.getView().animate({
-          //   duration: 10,
-          //   center: selectedFeature.geometry.flatCoordinates,
-          // });
         } else {
-          onFeatureSelect(null);
-          zoomMapToFeatures({ map, features: subfeatures, ol });
+          onFeatureSelectRef.current(null);
+          zoomMapToFeatures({ map, features: subfeatures, ol: olRef.current });
         }
       });
+    };
 
-      return null;
-    });
-
+    select.on('select', onSelect);
     map.addInteraction(select);
 
-    map.on('pointermove', (e) => {
+    const onPointerMove = (e) => {
       const pixel = map.getEventPixel(e.originalEvent);
       const hit = map.hasFeatureAtPixel(pixel);
       map.getViewport().style.cursor = hit ? 'pointer' : '';
-    });
+    };
+    map.on('pointermove', onPointerMove);
 
-    return () => map.removeInteraction(select);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [map, selectStyle, onFeatureSelect, hideFilters]);
+    return () => {
+      select.un('select', onSelect);
+      map.un('pointermove', onPointerMove);
+      map.removeInteraction(select);
+    };
+  }, [map, select]);
 
   return null;
 }

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

@@ -35,6 +35,7 @@ const mockOl = createMockOl({
           mockSelectCb = cb;
         }
       }),
+      un: jest.fn(),
     })),
   },
 });
@@ -43,6 +44,7 @@ const mockMap = {
   addInteraction,
   removeInteraction,
   on: onMap,
+  un: jest.fn(),
   getEventPixel,
   hasFeatureAtPixel,
   getViewport,
@@ -66,6 +68,43 @@ describe('FeatureInteraction', () => {
     mockSelectCb = null;
   });
 
+  it('configures the selection style when filters are visible', () => {
+    render(
+      <FeatureInteraction
+        onFeatureSelect={jest.fn()}
+        hideFilters={false}
+        selectedCase={null}
+        ol={mockOl}
+      />,
+    );
+
+    const options = mockOl.interaction.Select.mock.calls[0][0];
+    expect(options.style).toEqual(expect.any(Function));
+  });
+
+  it('keeps one Select interaction across rerenders', () => {
+    const { rerender } = render(
+      <FeatureInteraction
+        onFeatureSelect={jest.fn()}
+        hideFilters={false}
+        selectedCase={null}
+        ol={mockOl}
+      />,
+    );
+
+    rerender(
+      <FeatureInteraction
+        onFeatureSelect={jest.fn()}
+        hideFilters={false}
+        selectedCase={{ path: '/selected' }}
+        ol={{ ...mockOl }}
+      />,
+    );
+
+    expect(mockOl.interaction.Select).toHaveBeenCalledTimes(1);
+    expect(addInteraction).toHaveBeenCalledTimes(1);
+  });
+
   it('selects a single feature and calls onFeatureSelect + scrollToElement (hideFilters=false)', () => {
     const onFeatureSelect = jest.fn();
     const singleFeature = {

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

@@ -1,6 +1,7 @@
 import worldSVG from '@plone/volto/icons/world.svg';
 import CaseStudyExplorerEdit from './CaseStudyExplorerEdit';
 import CaseStudyExplorerView from './CaseStudyExplorerView';
+import schema from './schema';
 
 export default function installCaseStudyExplorerBlock(config) {
   config.blocks.blocksConfig.caseStudyExplorer = {
@@ -10,6 +11,7 @@ export default function installCaseStudyExplorerBlock(config) {
     group: 'custom_blocks',
     edit: CaseStudyExplorerEdit,
     view: CaseStudyExplorerView,
+    schema,
   };
 
   return config;

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

@@ -0,0 +1,19 @@
+const schema = {
+  title: 'NRR Case Study Explorer',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['filter_path'],
+    },
+  ],
+  properties: {
+    filter_path: {
+      title: 'Filter path',
+      type: 'string',
+    },
+  },
+  required: [],
+};
+
+export default schema;

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

@@ -2,6 +2,39 @@
   padding-top: 2em;
 }
 
+.nrr-case-study-map-container .case-study-status-legend {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  margin: 0.75rem 0;
+  font-size: 0.9rem;
+  gap: 0.75rem;
+}
+
+.nrr-case-study-map-container .legend-title {
+  font-weight: 600;
+}
+
+.nrr-case-study-map-container .legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  text-transform: capitalize;
+}
+
+.nrr-case-study-map-container .legend-dot {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+}
+
+.nrr-case-study-map-container .filter-wrapper .facet-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
 #csepopup > span {
   display: 'block';
   margin-bottom: '10px';

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

@@ -1,3 +1,50 @@
+export const STATUS_COLORS = {
+  planned: '#006bb8',
+  ongoing: '#ff9933',
+  completed: '#00a390',
+};
+
+export const FALLBACK_STATUS_COLOR = '#6B7280';
+export const CLUSTER_COLOR = '#007B6C';
+
+const FIELD_ALIASES = {
+  habitat_ecosystem_type: ['habitat_ecosystem_type', 'ecosystem_typology'],
+};
+
+export function getCaseProperty(properties, fieldName) {
+  if (properties?.[fieldName] !== undefined) return properties[fieldName];
+  return (FIELD_ALIASES[fieldName] || [])
+    .map((field) => properties?.[field])
+    .find((value) => value !== undefined);
+}
+
+export function asValues(value) {
+  if (value === undefined || value === null || value === '') return [];
+  return Array.isArray(value) ? value : [value];
+}
+
+export function valueCode(value) {
+  if (value && typeof value === 'object') {
+    return String(
+      value.id ?? value.value ?? value.token ?? value.title ?? value,
+    );
+  }
+  return String(value);
+}
+
+export function valueLabel(value) {
+  if (value && typeof value === 'object') {
+    return String(
+      value.title ?? value.name ?? value.label ?? value.value ?? value.id,
+    );
+  }
+  return String(value);
+}
+
+export function getStatusColor(status) {
+  return STATUS_COLORS[status] || FALLBACK_STATUS_COLOR;
+}
+
 export function centerAndResetMapZoom({ map, ol }) {
   map.getView().animate({
     zoom: 4,
@@ -8,9 +55,17 @@ export function centerAndResetMapZoom({ map, ol }) {
 
 export function scrollToElement(elementId) {
   const element = document.getElementById(elementId);
-  element.scrollIntoView({
-    behavior: 'smooth',
-  });
+  element?.scrollIntoView({ behavior: 'smooth' });
+}
+
+export function getSelectInteraction(map) {
+  const interactions = map?.getInteractions?.();
+  const interactionArray =
+    interactions?.getArray?.() || interactions?.array_ || [];
+
+  return interactionArray.find(
+    (interaction) => typeof interaction?.getFeatures === 'function',
+  );
 }
 
 export function getExtentOfFeatures({ features, ol }) {
@@ -31,24 +86,30 @@ export function getFeatures({ cases, ol }) {
   const Feature = ol.ol.Feature;
 
   return cases.map((c, index) => {
-    const {
-      geometry: { coordinates },
-    } = c;
     const point = new Feature(
-      new ol.geom.Point(ol.proj.fromLonLat(coordinates)),
+      new ol.geom.Point(ol.proj.fromLonLat(c.geometry.coordinates)),
     );
+    const properties = c.properties || {};
+    const status = properties.current_status;
     point.setId(index);
     point.setProperties(
       {
-        title: c.properties.title,
-        image: c.properties.image,
-        nwrm_type: c.properties.nwrm_type,
-        measures_implemented: c.properties.measures,
-        typology_of_measures: c.properties.typology_of_measures,
-        description: c.properties.description,
-        index: index,
-        path: c.properties.path,
-        color: c.properties.nwrm_type === 'Light' ? '#50B0A4' : '#0083E0',
+        title: properties.title,
+        image: properties.image,
+        nwrm_type: properties.nwrm_type,
+        measures_implemented: properties.measures,
+        typology_of_measures: properties.typology_of_measures,
+        current_status: status,
+        habitat_ecosystem_type: getCaseProperty(
+          properties,
+          'habitat_ecosystem_type',
+        ),
+        nrr_article: properties.nrr_article,
+        scale_of_planning: properties.scale_of_planning,
+        description: properties.description,
+        index,
+        path: properties.path,
+        color: getStatusColor(status),
       },
       false,
     );
@@ -56,89 +117,106 @@ export function getFeatures({ cases, ol }) {
   });
 }
 
-export function filterCases(cases, activeFilters, caseStudiesIds, searchInput) {
-  const data = cases.filter((_case) => {
-    let flag_searchInput = false;
-    let flag_implemented = false;
-    let flag_typology_of_measures = false;
-    let flag_case = caseStudiesIds
-      ? caseStudiesIds.includes(_case.properties.url.split('/').pop())
-      : true;
-
-    if (!searchInput) {
-      flag_searchInput = true;
-    } else {
-      if (_case.properties.title.toLowerCase().match(searchInput)) {
-        flag_searchInput = true;
-      } else if (
-        _case.properties.description.toLowerCase().match(searchInput)
-      ) {
-        flag_searchInput = true;
-      }
-    }
-
-    if (!activeFilters.measures_implemented.length) {
-      flag_implemented = true;
-    } else {
-      let measures_implemented = _case.properties.measures?.map((item) => {
-        return item['id'].toString();
-      });
+// Escape a string so it can be embedded in a RegExp pattern as a literal.
+// Prevents user-provided input from being interpreted as regex syntax
+// (avoids ReDoS via crafted patterns and SyntaxError from malformed ones).
+export function escapeRegExp(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
 
-      activeFilters.measures_implemented.forEach((filter) => {
-        if (measures_implemented?.includes(filter)) flag_implemented = true;
-      });
-    }
-
-    if (!activeFilters.typology_of_measures.length) {
-      flag_typology_of_measures = true;
-    } else {
-      let typology_of_measures = _case.properties.typology_of_measures?.map(
-        (item) => {
-          return item.toString();
-        },
-      );
-
-      activeFilters.typology_of_measures.forEach((filter) => {
-        if (typology_of_measures?.includes(filter))
-          flag_typology_of_measures = true;
-      });
-    }
-
-    return flag_case &&
-      flag_implemented &&
-      flag_typology_of_measures &&
-      flag_searchInput
-      ? _case
-      : false;
-  });
+const WORD_CHAR = /[A-Za-z0-9_]/;
+
+// Case-insensitive whole-word substring match implemented without regular
+// expressions, so the needle is always treated as literal text. Equivalent
+// to /\bneedle\b/i but runs in linear time (indexOf) and is immune to
+// catastrophic backtracking.
+function hasWholeWord(text, needle) {
+  let index = text.indexOf(needle);
+  while (index !== -1) {
+    const before = index === 0 ? '' : text[index - 1];
+    const after =
+      index + needle.length >= text.length ? '' : text[index + needle.length];
+    if (!WORD_CHAR.test(before) && !WORD_CHAR.test(after)) return true;
+    index = text.indexOf(needle, index + 1);
+  }
+  return false;
+}
 
-  return data;
+const FILTER_FIELDS = [
+  'measures_implemented',
+  'typology_of_measures',
+  'current_status',
+  'habitat_ecosystem_type',
+  'nrr_article',
+  'scale_of_planning',
+];
+
+export function filterCasesByPath(cases, filterPath) {
+  const path = filterPath?.trim();
+  if (!path) return cases;
+
+  return cases.filter((_case) =>
+    String(_case.properties?.path || '').includes(path),
+  );
 }
 
-export function getFilters(cases) {
-  let _filters = {
-    measures_implemented: {},
-    typology_of_measures: {},
-  };
-
-  for (let key of Object.keys(cases)) {
-    const _case = cases[key];
-    let measures_implemented = _case.properties.measures;
-    measures_implemented.map((item) => {
-      if (!_filters.measures_implemented.hasOwnProperty(item['id'])) {
-        _filters.measures_implemented[item['id']] = item['title'];
-      }
-      return [];
+export function filterCases(
+  cases,
+  activeFilters,
+  caseStudiesIds,
+  searchInput,
+  filterPath,
+) {
+  return filterCasesByPath(cases, filterPath).filter((_case) => {
+    const properties = _case.properties || {};
+    const flagCase = caseStudiesIds
+      ? caseStudiesIds.includes(properties.url?.split('/').pop())
+      : true;
+    const searchable = `${properties.title || ''} ${
+      properties.description || ''
+    }`;
+    const flagSearch =
+      !searchInput ||
+      hasWholeWord(searchable.toLowerCase(), searchInput.toLowerCase());
+
+    const matchesFilters = FILTER_FIELDS.every((filterName) => {
+      const selected = activeFilters[filterName] || [];
+      if (!selected.length) return true;
+      const values =
+        filterName === 'measures_implemented'
+          ? asValues(properties.measures).map((item) => valueCode(item))
+          : filterName === 'typology_of_measures'
+            ? asValues(properties.typology_of_measures).map((item) =>
+                valueCode(item),
+              )
+            : asValues(getCaseProperty(properties, filterName)).map((item) =>
+                valueCode(item),
+              );
+      return selected.some((filter) => values.includes(String(filter)));
     });
 
-    let typology_of_measures = _case.properties.typology_of_measures;
-    typology_of_measures.map((item) => {
-      if (!_filters.typology_of_measures.hasOwnProperty(item)) {
-        _filters.typology_of_measures[item] = item;
-      }
-      return [];
+    return flagCase && flagSearch && matchesFilters;
+  });
+}
+
+export function getFilters(cases) {
+  const filters = Object.fromEntries(FILTER_FIELDS.map((field) => [field, {}]));
+
+  Object.values(cases || {}).forEach((_case) => {
+    const properties = _case.properties || {};
+    FILTER_FIELDS.forEach((field) => {
+      const source =
+        field === 'measures_implemented'
+          ? properties.measures
+          : field === 'typology_of_measures'
+            ? properties.typology_of_measures
+            : getCaseProperty(properties, field);
+      asValues(source).forEach((item) => {
+        const code = valueCode(item);
+        if (!filters[field][code]) filters[field][code] = valueLabel(item);
+      });
     });
-  }
+  });
 
-  return _filters;
+  return filters;
 }