@eeacms/volto-bise-policy 1.3.4 → 1.3.6

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({

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';