@eeacms/volto-cca-policy 0.2.69 → 0.2.70

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

@@ -0,0 +1,131 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import CaseStudyMap from './CaseStudyMap';
+import * as utils from './utils';
+
+const mockStore = configureStore();
+
+jest.mock('./utils', () => ({
+  getFeatures: jest.fn(),
+}));
+
+// Mock the OpenLayers API
+jest.mock('@eeacms/volto-openlayers-map/api', () => ({
+  Map: jest.fn(({ children }) => <div>{children}</div>),
+  Layer: {
+    Tile: jest.fn(() => <div />),
+  },
+  Layers: jest.fn(({ children }) => <div>{children}</div>),
+}));
+
+// Mock additional OpenLayers functionality
+jest.mock('@eeacms/volto-openlayers-map', () => ({
+  openlayers: {
+    source: {
+      TileWMS: jest.fn().mockImplementation(() => ({})),
+    },
+    proj: {
+      fromLonLat: jest.fn().mockReturnValue([0, 0]),
+    },
+    control: {
+      defaults: jest.fn().mockReturnValue([]),
+    },
+  },
+}));
+
+jest.mock('./FeatureInteraction', () => () => (
+  <div>Mock Feature Interaction</div>
+));
+
+const store = mockStore({
+  userSession: { token: '1234' },
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+describe('CaseStudyMap', () => {
+  it('renders the component with features', () => {
+    const data = {
+      activeItems: [
+        {
+          geometry: {
+            color: '#009900',
+            svg: { fill_color: '#009900' },
+            type: 'Point',
+            coordinates: [4.19059753418, 52.0476343911],
+          },
+          properties: {
+            impacts: ',FLOODING,SEALEVELRISE,STORM,',
+            title: 'Sand Motor',
+            portal_type: 'casestudy',
+            description:
+              '<p>The Sand Motor is a mega-nourishment implemented in the Delfland Coast.</p>',
+            url: 'http://website.com',
+            adaptation_options_links:
+              "<a href='http://website.com'>Beach and shoreface nourishment</a>",
+            elements_str: 'Nature-based solutions',
+            image: 'http://website.com/preview',
+            origin_adaptecca: 20,
+            adaptation_options: 'Dune construction',
+          },
+        },
+      ],
+      items: [
+        {
+          geometry: {
+            color: '#009900',
+            svg: { fill_color: '#009900' },
+            type: 'Point',
+            coordinates: [4.19059753418, 52.0476343911],
+          },
+          properties: {
+            impacts: ',FLOODING,SEALEVELRISE,STORM,',
+            title: 'Sand Motor',
+            portal_type: 'casestudy',
+            description:
+              '<p>The Sand Motor is a mega-nourishment implemented in the Delfland Coast.</p>',
+            url: 'http://website.com',
+            adaptation_options_links:
+              "<a href='http://website.com'>Beach and shoreface nourishment</a>",
+            elements_str: 'Nature-based solutions',
+            image: 'http://website.com/preview',
+            origin_adaptecca: 20,
+            adaptation_options: 'Dune construction',
+          },
+        },
+      ],
+    };
+
+    utils.getFeatures.mockReturnValueOnce(data.items); // Mock getFeatures to return data
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <CaseStudyMap {...data} />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(container).toBeTruthy(); // Ensure the component renders correctly
+  });
+
+  it('does not render the component when there are no features', () => {
+    utils.getFeatures.mockReturnValueOnce([]); // Mock getFeatures to return an empty array
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <CaseStudyMap activeItems={[]} items={[]} />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(container).toBeEmptyDOMElement(); // Expect the container to be empty
+  });
+});

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

@@ -5,7 +5,11 @@ export default function FeatureDisplay({ feature }) {
   return feature ? (
     <div id="csepopup">
       <p>
-        <strong>{feature.title}</strong> <a href={feature.url}>open DB</a>
+        <strong>
+          <a className="dbitem" href={feature.url} target="_blank">
+            {feature.title}
+          </a>
+        </strong>
       </p>
       <span className="img">
         <center>

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import FeatureDisplay from './FeatureDisplay';
+
+const mockStore = configureStore();
+
+describe('FeatureDisplay', () => {
+  it('should render the component', () => {
+    const feature = {
+      title: 'Case study',
+      url: 'http://example.com',
+      image: 'http://example.com/image.jpg',
+      impacts: 'Impact A, Impact B',
+      adaptation_options_links: '',
+    };
+
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <FeatureDisplay feature={feature} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(container).toBeTruthy();
+  });
+
+  it('should not render the component', () => {
+    const feature = null;
+
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <FeatureDisplay feature={feature} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(container).toBeTruthy();
+  });
+});

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

@@ -1,52 +1,73 @@
 import React from 'react';
 import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 import { useMapContext } from '@eeacms/volto-openlayers-map/api';
-
-const useStyles = () => {
-  const selected = React.useMemo(
-    () =>
-      new ol.style.Style({
-        image: new ol.style.Circle({
-          radius: 12,
-          fill: new ol.style.Fill({
-            color: '#005c96',
-          }),
-          stroke: new ol.style.Stroke({
-            color: 'rgba(0, 92, 150, 0.9)',
-            width: 2,
-          }),
-        }),
-      }),
-    [],
+import FeatureDisplay from './FeatureDisplay';
+import { getFeatures } from './utils';
+import {
+  clusterStyle,
+  useStyles,
+  getExtentOfFeatures,
+  setClicked,
+} from './useInteractiveStyles';
+
+export default function FeatureInteraction({
+  selectedFeature,
+  onFeatureSelect,
+  mapCenter,
+  features,
+  activeItems,
+}) {
+  const { map } = useMapContext();
+  const [clusterLayer, setClusterLayer] = React.useState();
+  const [clusterCirclesLayer, setClusterCirclesLayer] = React.useState();
+  const { selectStyle, clusterCircleStyle } = useStyles();
+
+  const [pointsSource] = React.useState(
+    new ol.source.Vector({
+      features,
+    }),
   );
 
-  const selectStyle = React.useCallback(
-    (feature) => {
-      // const color = feature.get('COLOR') || '#eeeeee';
-      // selected.getFill().setColor(color);
-      const color = feature.values_.features[0].values_['color'] || '#ccc';
-      selected.image_.getFill().setColor(color);
-      return selected;
-    },
-    [selected],
+  const [clusterSource] = React.useState(
+    new ol.source.Cluster({
+      distance: 50,
+      source: pointsSource,
+    }),
   );
 
-  return { selected, selectStyle };
-};
-
-function getExtentOfFeatures(features) {
-  const points = features.map((f) => f.getGeometry().flatCoordinates);
-  const point = new ol.geom.MultiPoint(points);
-  return point.getExtent();
-}
+  React.useEffect(() => {
+    if (activeItems) {
+      pointsSource.clear();
+      pointsSource.addFeatures(getFeatures(activeItems));
+    }
+  }, [activeItems, pointsSource]);
 
-export default function FeatureInteraction({ onFeatureSelect }) {
-  const { map } = useMapContext();
-  const { selectStyle } = useStyles();
+  const [isClient, setIsClient] = React.useState(false);
+  React.useEffect(() => setIsClient(true), []);
 
+  // form the clusters layer
   React.useEffect(() => {
     if (!map) return;
 
+    // Layer displaying the expanded view of overlapping cluster members.
+    const clusterCirclesLayer = new ol.layer.Vector({
+      source: clusterSource,
+      style: clusterCircleStyle,
+    });
+    setClusterCirclesLayer(clusterCirclesLayer);
+    map.addLayer(clusterCirclesLayer);
+
+    const clusterLayer = new ol.layer.Vector({
+      source: clusterSource,
+      style: clusterStyle,
+    });
+    setClusterLayer(clusterLayer);
+    map.addLayer(clusterLayer);
+  }, [map, clusterSource, clusterCircleStyle]);
+
+  React.useEffect(() => {
+    if (!(map && clusterLayer)) return;
+
     const select = new ol.interaction.Select({
       condition: ol.condition.click,
       style: selectStyle,
@@ -54,6 +75,10 @@ export default function FeatureInteraction({ onFeatureSelect }) {
 
     select.on('select', function (e) {
       const features = e.target.getFeatures().getArray();
+      // const pixel = e.mapBrowserEvent.pixel;
+      // clusterLayer.getFeatures(pixel).then((fs) => {
+      //   console.log('fs', { fs, features });
+      // });
 
       features.forEach((feature) => {
         const subfeatures = feature.values_.features;
@@ -64,33 +89,87 @@ export default function FeatureInteraction({ onFeatureSelect }) {
           onFeatureSelect(selectedFeature);
           const paddedExtent = ol.extent.buffer(extent, 50000);
 
-          map.getView().fit(paddedExtent, { ...map.getSize(), duration: 1000 });
+          const view = map.getView();
+          view.fit(paddedExtent, { ...map.getSize(), duration: 1000 });
         } else {
           // zoom to extent of cluster points
+
+          const view = map.getView();
+          const resolution = view.getResolution();
           const extent = getExtentOfFeatures(subfeatures);
 
-          let extentBuffer =
-            (extent[3] - extent[1] + extent[2] - extent[0]) / 4;
-          extentBuffer = extentBuffer < 500 ? 500 : extentBuffer;
-          const paddedExtent = ol.extent.buffer(extent, extentBuffer);
-          map.getView().fit(paddedExtent, { ...map.getSize(), duration: 1000 });
+          if (
+            view.getZoom() === view.getMaxZoom() ||
+            (ol.extent.getWidth(extent) < resolution &&
+              ol.extent.getHeight(extent) < resolution)
+          ) {
+            // console.log('set cluster circles style', features[0]);
+            setClicked(features[0], resolution);
+            clusterCirclesLayer.setStyle(clusterCircleStyle);
+          } else {
+            let extentBuffer =
+              (extent[3] - extent[1] + extent[2] - extent[0]) / 4;
+            extentBuffer = extentBuffer < 500 ? 500 : extentBuffer;
+            const paddedExtent = ol.extent.buffer(extent, extentBuffer);
+            map
+              .getView()
+              .fit(paddedExtent, { ...map.getSize(), duration: 1000 });
+          }
         }
       });
-
-      return null;
     });
 
-    map.addInteraction(select);
+    function handleClick(evt) {
+      if (evt.originalEvent.target.tagName === 'A') return;
+      if (selectedFeature) {
+        onFeatureSelect(null);
 
-    // TODO: does this accumulate?
-    map.on('pointermove', (e) => {
+        const view = map.getView();
+        view.animate({
+          ...mapCenter,
+          duration: 1000,
+        });
+      }
+    }
+
+    function handlePointerMove(e) {
       const pixel = map.getEventPixel(e.originalEvent);
       const hit = map.hasFeatureAtPixel(pixel);
       map.getViewport().style.cursor = hit ? 'pointer' : '';
-    });
+    }
 
-    return () => map.removeInteraction(select);
-  }, [map, selectStyle, onFeatureSelect]);
-
-  return null;
+    map.addInteraction(select);
+    map.on('click', handleClick);
+    map.on('pointermove', handlePointerMove);
+
+    return () => {
+      map.removeInteraction(select);
+      map.un('click', handleClick);
+      map.un('pointermove', handlePointerMove);
+    };
+  }, [
+    map,
+    selectStyle,
+    onFeatureSelect,
+    selectedFeature,
+    mapCenter,
+    clusterLayer,
+    clusterCircleStyle,
+    clusterCirclesLayer,
+  ]);
+
+  return isClient ? (
+    <div
+      id="popup-overlay"
+      style={{
+        position: 'absolute',
+        bottom: '30px',
+        right: '30px',
+        zIndex: 1,
+        visibility: selectedFeature ? 'visible' : 'hidden',
+      }}
+    >
+      {selectedFeature ? <FeatureDisplay feature={selectedFeature} /> : null}
+    </div>
+  ) : null;
 }

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

@@ -1,3 +1,7 @@
+a.dbitem {
+  font-size: 14px;
+}
+
 #csepopup > span {
   display: 'block';
   margin-bottom: '10px';

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

@@ -0,0 +1,189 @@
+import React from 'react';
+import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+const _cached = {};
+
+function getStyle(size, haveAdaptecca) {
+  let style = _cached[size + '_' + haveAdaptecca];
+
+  if (!style) {
+    style =
+      size === 1
+        ? new ol.style.Style({
+            image: new ol.style.Circle({
+              radius: 5,
+              stroke: new ol.style.Stroke({
+                color: '#fff',
+              }),
+              fill: new ol.style.Fill({
+                color: haveAdaptecca ? '#00ffff' : '#005c96',
+              }),
+            }),
+          })
+        : new ol.style.Style({
+            image: new ol.style.Circle({
+              radius: 10 + Math.min(Math.floor(size / 3), 10),
+              stroke: new ol.style.Stroke({
+                color: '#fff',
+              }),
+              fill: new ol.style.Fill({
+                color: haveAdaptecca ? '#318CE7' : '#005c96',
+              }),
+            }),
+            text: new ol.style.Text({
+              text: size.toString(),
+              fill: new ol.style.Fill({
+                color: '#fff',
+              }),
+            }),
+          });
+    _cached[size + '_' + haveAdaptecca] = style;
+  }
+  return style;
+}
+
+export function useStyles() {
+  const selectStyle = React.useCallback((feature) => {
+    const selected = new ol.style.Style({
+      image: new ol.style.Circle({
+        radius: 12,
+        fill: new ol.style.Fill({
+          color: '#005c96',
+        }),
+        stroke: new ol.style.Stroke({
+          color: 'rgba(0, 92, 150, 0.9)',
+          width: 2,
+        }),
+      }),
+    });
+    // const color = feature.get('COLOR') || '#eeeeee';
+    // selected.getFill().setColor(color);
+    const color = feature.values_.features[0].values_['color'] || '#ccc';
+    selected.image_.getFill().setColor(color);
+    return selected;
+  }, []);
+
+  const convexHullStroke = React.useMemo(
+    () =>
+      new ol.style.Stroke({
+        color: 'rgba(204, 85, 0, 1)',
+        width: 1.5,
+      }),
+    [],
+  );
+
+  const clusterMemberStyle = React.useMemo(() => {
+    const darkIcon = new ol.style.Icon({
+      src: 'data/icons/emoticon-cool.svg',
+    });
+    const lightIcon = new ol.style.Icon({
+      src: 'data/icons/emoticon-cool-outline.svg',
+    });
+    const _clusterMemberStyle = (clusterMember) => {
+      return new ol.style.Style({
+        geometry: clusterMember.getGeometry(),
+        image: clusterMember.get('LEISTUNG') > 5 ? darkIcon : lightIcon,
+      });
+    };
+    return _clusterMemberStyle;
+  }, []);
+
+  const clusterCircleStyle = React.useCallback(
+    (cluster, resolution) => {
+      // if (cluster?.ol_uid) {
+      //   console.log(cluster?.ol_uid, cluster);
+      // }
+      // console.log('clusterCircleStyle', {
+      //   cluster,
+      //   resolution,
+      //   clickFeature,
+      //   clickResolution,
+      // });
+      if (cluster !== clickFeature || resolution !== clickResolution) {
+        // console.log('return null', {
+        //   cluster,
+        //   clickFeature,
+        //   resolution,
+        //   clickResolution,
+        // });
+        return null;
+      }
+
+      // console.log('members', cluster);
+      const clusterMembers = cluster.get('features');
+      const centerCoordinates = cluster.getGeometry().getCoordinates();
+      return generatePointsCircle(
+        clusterMembers.length,
+        cluster.getGeometry().getCoordinates(),
+        resolution,
+      ).reduce((styles, coordinates, i) => {
+        const point = new ol.geom.Point(coordinates);
+        const line = new ol.geom.LineString([centerCoordinates, coordinates]);
+        styles.unshift(
+          new ol.style.Style({
+            geometry: line,
+            stroke: convexHullStroke,
+          }),
+        );
+        styles.push(
+          clusterMemberStyle(
+            new ol.feature.Feature({
+              ...clusterMembers[i].getProperties(),
+              geometry: point,
+            }),
+          ),
+        );
+        return styles;
+      }, []);
+    },
+    [convexHullStroke, clusterMemberStyle],
+  );
+
+  return { clusterCircleStyle, selectStyle };
+}
+
+let clickFeature, clickResolution;
+
+export function setClicked(feature, resolution) {
+  clickFeature = feature;
+  clickResolution = resolution;
+}
+
+export function generatePointsCircle(count, clusterCenter, resolution) {
+  const circumference =
+    circleDistanceMultiplier * circleFootSeparation * (2 + count);
+  let legLength = circumference / (Math.PI * 2); //radius from circumference
+  const angleStep = (Math.PI * 2) / count;
+  const res = [];
+  let angle;
+
+  legLength = Math.max(legLength, 35) * resolution; // Minimum distance to get outside the cluster icon.
+
+  for (let i = 0; i < count; ++i) {
+    // Clockwise, like spiral.
+    angle = circleStartAngle + i * angleStep;
+    res.push([
+      clusterCenter[0] + legLength * Math.cos(angle),
+      clusterCenter[1] + legLength * Math.sin(angle),
+    ]);
+  }
+
+  return res;
+}
+export function clusterStyle(feature) {
+  const size = feature.get('features').length;
+  const cases = feature
+    .get('features')
+    .filter((_case) => _case['values_']['origin_adaptecca'] < 20);
+
+  return getStyle(size, cases.length > 0 ? 1 : 0);
+}
+
+export function getExtentOfFeatures(features) {
+  const points = features.map((f) => f.getGeometry().flatCoordinates);
+  const point = new ol.geom.MultiPoint(points);
+  return point.getExtent();
+}
+
+const circleDistanceMultiplier = 1;
+const circleFootSeparation = 28;
+const circleStartAngle = Math.PI / 2;