@eeacms/volto-bise-policy 1.2.32 → 1.2.34

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

@@ -0,0 +1,237 @@
+import React from 'react';
+
+import cx from 'classnames';
+
+import {
+  Map,
+  Layer,
+  Layers,
+  Controls,
+  useMapContext,
+} from '@eeacms/volto-openlayers-map/api';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
+
+import InfoOverlay from './InfoOverlay';
+import FeatureInteraction from './FeatureInteraction';
+import CaseStudyList from './CaseStudyListing';
+
+import { centerAndResetMapZoom, getFeatures, scrollToElement } from './utils';
+
+const styleCache = {};
+const MapContextGateway = ({ setMap }) => {
+  const { map } = useMapContext();
+  React.useEffect(() => {
+    setMap(map);
+  }, [map, setMap]);
+  return null;
+};
+
+function CaseStudyMap(props) {
+  const {
+    items,
+    activeItems,
+    hideFilters,
+    selectedCase,
+    onSelectedCase,
+    searchInput,
+    map,
+    setMap,
+    ol,
+  } = props;
+  const features = getFeatures({ cases: items, ol });
+  const [resetMapButtonClass, setResetMapButtonClass] =
+    React.useState('inactive');
+
+  const [tileWMSSources] = React.useState([
+    new ol.source.TileWMS({
+      url: 'https://gisco-services.ec.europa.eu/maps/service',
+      params: {
+        // LAYERS: 'OSMBlossomComposite', OSMCartoComposite, OSMPositronComposite
+        LAYERS: 'OSMPositronComposite',
+        TILED: true,
+      },
+      serverType: 'geoserver',
+      transition: 0,
+    }),
+  ]);
+  const [pointsSource] = React.useState(
+    new ol.source.Vector({
+      features,
+    }),
+  );
+
+  const [clusterSource] = React.useState(
+    new ol.source.Cluster({
+      distance: 19,
+      source: pointsSource,
+    }),
+  );
+
+  React.useEffect(() => {
+    if (activeItems) {
+      pointsSource.clear();
+      pointsSource.addFeatures(getFeatures({ cases: activeItems, ol }));
+    }
+  }, [activeItems, pointsSource, ol]);
+
+  React.useEffect(() => {
+    if (!map) return null;
+
+    const moveendListener = (e) => {
+      // console.log('map.getView()', map.getView());
+      // console.log('selectedCase', selectedCase);
+      const mapZoom = Math.round(map.getView().getZoom() * 10) / 10;
+      const mapCenter = map.getView().getCenter();
+
+      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 (
+        mapZoom === 4 &&
+        JSON.stringify(mapCenter) ===
+          JSON.stringify(ol.proj.transform([10, 49], 'EPSG:4326', 'EPSG:3857'))
+      ) {
+        setResetMapButtonClass('inactive');
+      } else {
+        setResetMapButtonClass('active');
+      }
+    };
+
+    map.on('moveend', moveendListener);
+
+    return () => {
+      map.un('moveend', moveendListener);
+    };
+  }, [map, selectedCase, resetMapButtonClass, setResetMapButtonClass, ol]);
+
+  const clusterStyle = React.useMemo(
+    () => selectedClusterStyle({ selectedCase, ol }),
+    [selectedCase, ol],
+  );
+
+  const MapWithSelection = React.useMemo(() => Map, []);
+  // console.log('render');
+
+  return features.length > 0 ? (
+    <div id="ol-map-container" className="nrr-case-study-map-container">
+      <MapWithSelection
+        view={{
+          center: ol.proj.fromLonLat([10, 49]),
+          showFullExtent: true,
+          zoom: 4,
+        }}
+        pixelRatio={1}
+        // controls={ol.control.defaults({ attribution: false })}
+      >
+        <Controls attribution={false} />
+        <Layers>
+          {hideFilters ? null : (
+            <button
+              className={cx(
+                'reset-map-button ui button secondary',
+                String(resetMapButtonClass),
+              )}
+              onClick={() => {
+                scrollToElement('search-input');
+                onSelectedCase(null);
+                centerAndResetMapZoom({ map, ol });
+                map.getInteractions().array_[9].getFeatures().clear();
+              }}
+            >
+              <span className="result-info-title">Reset map</span>
+              <i className="icon ri-map-2-line"></i>
+            </button>
+          )}
+          <InfoOverlay
+            selectedFeature={selectedCase}
+            onFeatureSelect={onSelectedCase}
+            layerId={tileWMSSources[0]}
+            hideFilters={hideFilters}
+          />
+          <FeatureInteraction
+            onFeatureSelect={onSelectedCase}
+            hideFilters={hideFilters}
+            selectedCase={selectedCase}
+          />
+          <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
+          <Layer.Vector
+            style={clusterStyle}
+            source={clusterSource}
+            zIndex={1}
+          />
+          <MapContextGateway setMap={setMap} />
+        </Layers>
+      </MapWithSelection>
+      {hideFilters ? null : (
+        <CaseStudyList
+          map={map}
+          activeItems={activeItems}
+          selectedCase={selectedCase}
+          onSelectedCase={onSelectedCase}
+          pointsSource={pointsSource}
+          searchInput={searchInput}
+        />
+      )}
+    </div>
+  ) : null;
+}
+
+const selectedClusterStyle = ({ selectedFeature, ol }) => {
+  function _clusterStyle(feature) {
+    const size = feature.get('features').length;
+    let style = styleCache[size];
+
+    if (!style) {
+      style = new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 12 + Math.min(Math.floor(size / 3), 10),
+          stroke: new ol.style.Stroke({
+            color: '#fff',
+          }),
+          fill: new ol.style.Fill({
+            color: '#007B6C', // #006BB8 #309ebc
+          }),
+        }),
+        text: new ol.style.Text({
+          text: size.toString(),
+          fill: new ol.style.Fill({
+            color: '#fff',
+          }),
+        }),
+      });
+      styleCache[size] = style;
+    }
+
+    if (size === 1) {
+      // let color = feature.values_.features[0].values_['color'];
+      let color = '#289588'; // #0083E0 #50B0A4
+
+      return new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 6,
+          fill: new ol.style.Fill({
+            color: '#fff',
+          }),
+          stroke: new ol.style.Stroke({
+            color: color,
+            width: 6,
+          }),
+        }),
+      });
+    } else {
+      return style;
+    }
+  }
+  return _clusterStyle;
+};
+
+export default withOpenLayers(CaseStudyMap);

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

@@ -0,0 +1,176 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CaseStudyMap from './CaseStudyMap';
+import { getFeatures, centerAndResetMapZoom, scrollToElement } from './utils';
+
+jest.mock('@eeacms/volto-openlayers-map', () => ({
+  withOpenLayers: (Comp) => Comp,
+}));
+
+jest.mock('@eeacms/volto-openlayers-map/api', () => ({
+  Map: ({ children }) => <div data-testid="mock-map">{children}</div>,
+  Layer: {
+    Tile: ({ source }) => <div data-testid="mock-tile-layer" />,
+    Vector: ({ source }) => <div data-testid="mock-vector-layer" />,
+  },
+  Layers: ({ children }) => <div data-testid="mock-layers">{children}</div>,
+  Controls: () => <div data-testid="mock-controls" />,
+  useMapContext: () => ({ map: mockMap }),
+}));
+
+// Mock child components so we don't render full DOM
+jest.mock('./InfoOverlay', () => () => <div data-testid="mock-info-overlay" />);
+jest.mock('./FeatureInteraction', () => () => (
+  <div data-testid="mock-feature-interaction" />
+));
+jest.mock('./CaseStudyListing', () => () => (
+  <div data-testid="mock-case-study-list" />
+));
+
+jest.mock('./utils', () => ({
+  getFeatures: jest.fn(),
+  centerAndResetMapZoom: jest.fn(),
+  scrollToElement: jest.fn(),
+}));
+
+const mockOl = {
+  source: {
+    TileWMS: jest.fn(() => ({ type: 'TileWMS' })),
+    Vector: jest.fn(() => ({
+      clear: jest.fn(),
+      addFeatures: jest.fn(),
+    })),
+    Cluster: jest.fn(() => ({})),
+  },
+  style: {
+    Style: jest.fn(() => ({})),
+    Circle: jest.fn(() => ({})),
+    Stroke: jest.fn(() => ({})),
+    Fill: jest.fn(() => ({})),
+    Text: jest.fn(() => ({})),
+  },
+  proj: {
+    transform: jest.fn(() => [111, 222]),
+    fromLonLat: jest.fn(() => [333, 444]),
+  },
+};
+
+const mockMap = {
+  on: jest.fn(),
+  un: jest.fn(),
+  getView: jest.fn(() => ({
+    getZoom: () => 4,
+    getCenter: () => [111, 222],
+  })),
+  getInteractions: jest.fn(() => ({
+    array_: [
+      {},
+      {},
+      {},
+      {},
+      {},
+      {},
+      {},
+      {},
+      {},
+      {
+        getFeatures: jest.fn(() => ({
+          clear: jest.fn(),
+          push: jest.fn(),
+        })),
+      },
+    ],
+  })),
+  getPixelFromCoordinate: jest.fn(() => [10, 20]),
+  getFeaturesAtPixel: jest.fn(() => ['f']),
+};
+
+describe('CaseStudyMap', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders nothing when no features', () => {
+    getFeatures.mockReturnValueOnce([]);
+    const { container } = render(
+      <CaseStudyMap items={[]} ol={mockOl} setMap={jest.fn()} />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders map and layers when features exist', () => {
+    getFeatures.mockReturnValueOnce([{ id: 1 }]);
+    render(
+      <CaseStudyMap
+        items={[{ id: 1 }]}
+        ol={mockOl}
+        setMap={jest.fn()}
+        map={mockMap}
+        onSelectedCase={jest.fn()}
+      />,
+    );
+    expect(screen.getByTestId('mock-map')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-tile-layer')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-vector-layer')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-case-study-list')).toBeInTheDocument();
+  });
+
+  it('does not render CaseStudyList when hideFilters is true', () => {
+    getFeatures.mockReturnValueOnce([{ id: 1 }]);
+    render(
+      <CaseStudyMap
+        items={[{ id: 1 }]}
+        ol={mockOl}
+        hideFilters
+        setMap={jest.fn()}
+        map={mockMap}
+        onSelectedCase={jest.fn()}
+      />,
+    );
+    expect(
+      screen.queryByTestId('mock-case-study-list'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('clicking Reset map calls utils and clears features', () => {
+    getFeatures.mockReturnValueOnce([{ id: 1 }]);
+    const onSelectedCase = jest.fn();
+    render(
+      <CaseStudyMap
+        items={[{ id: 1 }]}
+        ol={mockOl}
+        setMap={jest.fn()}
+        map={mockMap}
+        onSelectedCase={onSelectedCase}
+      />,
+    );
+
+    fireEvent.click(screen.getByText('Reset map'));
+    expect(scrollToElement).toHaveBeenCalledWith('search-input');
+    expect(onSelectedCase).toHaveBeenCalledWith(null);
+    expect(centerAndResetMapZoom).toHaveBeenCalledWith({
+      map: mockMap,
+      ol: mockOl,
+    });
+  });
+
+  it('map moveend listener toggles resetMapButtonClass', () => {
+    getFeatures.mockReturnValueOnce([{ id: 1 }]);
+    render(
+      <CaseStudyMap
+        items={[{ id: 1 }]}
+        ol={mockOl}
+        setMap={jest.fn()}
+        map={mockMap}
+        onSelectedCase={jest.fn()}
+      />,
+    );
+
+    const moveendCb = mockMap.on.mock.calls.find((c) => c[0] === 'moveend')[1];
+
+    moveendCb();
+
+    expect(mockMap.getView).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+export default function FeatureDisplay({ feature }) {
+  return feature ? (
+    <div id="csepopup">
+      <h3>
+        <strong>
+          <a target="_blank" rel="noopener noreferrer" href={feature.path}>
+            {feature.title}
+          </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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import FeatureDisplay from './FeatureDisplay';
+
+describe('FeatureDisplay Component', () => {
+  it('renders correctly with feature data', () => {
+    const feature = {
+      title: 'Sample Feature',
+      path: 'https://example.com/sample-feature',
+      measures_implemented: [
+        { path: 'https://example.com/nwrm-1', title: 'NWRM 1' },
+        { path: 'https://example.com/nwrm-2', title: 'NWRM 2' },
+      ],
+      typology_of_measures: ['Sector 1', 'Sector 2'],
+    };
+
+    const { getByRole } = render(<FeatureDisplay feature={feature} />);
+
+    const titleLink = getByRole('link', { name: 'Sample Feature' });
+    expect(titleLink).toHaveAttribute(
+      'href',
+      'https://example.com/sample-feature',
+    );
+  });
+
+  it('renders nothing when feature is null', () => {
+    const { container } = render(<FeatureDisplay feature={null} />);
+    expect(container.firstChild).toBeNull();
+  });
+});

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
+import { useMapContext } from '@eeacms/volto-openlayers-map/api';
+import { scrollToElement, zoomMapToFeatures } from './utils';
+
+export const useStyles = ({ ol }) => {
+  const selected = React.useMemo(
+    () =>
+      new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 12,
+          fill: new ol.style.Fill({
+            color: '#ccc',
+          }),
+          stroke: new ol.style.Stroke({
+            color: '#fff',
+            width: 0,
+          }),
+        }),
+      }),
+    [ol],
+  );
+
+  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],
+  );
+
+  return { selected, selectStyle };
+};
+
+function FeatureInteraction({
+  onFeatureSelect,
+  hideFilters,
+  selectedCase,
+  ol,
+}) {
+  // console.log('featureinteraction', selectedCase);
+  const { map } = useMapContext();
+  const { selectStyle } = useStyles({ ol });
+
+  const select = new ol.interaction.Select({
+    condition: ol.condition.click,
+    style: hideFilters ? null : selectStyle,
+  });
+
+  React.useEffect(() => {
+    if (!map) return;
+
+    select.on('select', function (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) {
+            const url = window.location.origin + selectedFeature.path;
+            // window.open(url);
+            window.location.href = url;
+          }
+          onFeatureSelect(selectedFeature);
+          scrollToElement('ol-map-container');
+          // map.getView().animate({
+          //   duration: 10,
+          //   center: selectedFeature.geometry.flatCoordinates,
+          // });
+        } else {
+          onFeatureSelect(null);
+          zoomMapToFeatures({ map, features: subfeatures, ol });
+        }
+      });
+
+      return null;
+    });
+
+    map.addInteraction(select);
+
+    map.on('pointermove', (e) => {
+      const pixel = map.getEventPixel(e.originalEvent);
+      const hit = map.hasFeatureAtPixel(pixel);
+      map.getViewport().style.cursor = hit ? 'pointer' : '';
+    });
+
+    return () => map.removeInteraction(select);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [map, selectStyle, onFeatureSelect, hideFilters]);
+
+  return null;
+}
+
+export default withOpenLayers(FeatureInteraction);