@eeacms/volto-cca-policy 0.1.71 → 0.1.73

package/CHANGELOG.md

@@ -4,6 +4,40 @@ 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).
 
+### [0.1.73](https://github.com/eea/volto-cca-policy/compare/0.1.72...0.1.73) - 11 February 2024
+
+#### :bug: Bug Fixes
+
+- fix: observatory map tooltip [kreafox - [`4b9bb57`](https://github.com/eea/volto-cca-policy/commit/4b9bb571bb27593c6859cd35135ed50c80eede48)]
+- fix: observatory map tooltip position [kreafox - [`782f92e`](https://github.com/eea/volto-cca-policy/commit/782f92e8f8280bb18dcd84ddba3ed764ac957454)]
+
+#### :nail_care: Enhancements
+
+- change: enable Country Flag block for CCA [kreafox - [`643aec6`](https://github.com/eea/volto-cca-policy/commit/643aec6744390ccf01bc8880d919a91e70cd8e28)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`db773e4`](https://github.com/eea/volto-cca-policy/commit/db773e4ccfe0bd34d22d6504d2c7d1643e57105a)]
+- style: Automated code fix [eea-jenkins - [`5fd949b`](https://github.com/eea/volto-cca-policy/commit/5fd949b2b01508df807c1991f17c002b27d9e784)]
+- style: Automated code fix [eea-jenkins - [`20a4343`](https://github.com/eea/volto-cca-policy/commit/20a43437d84bee88c379673d215026432028aabe)]
+
+#### :hammer_and_wrench: Others
+
+- Disable interractions in edit mode [Tiberiu Ichim - [`058f54c`](https://github.com/eea/volto-cca-policy/commit/058f54c52451d17654a88300d05cea2bb24bb3e5)]
+- Fix country map height [Tiberiu Ichim - [`603f785`](https://github.com/eea/volto-cca-policy/commit/603f7854842e4fe1c4ee1e615669d81a88dd1167)]
+- Better position [Tiberiu Ichim - [`9fa0e21`](https://github.com/eea/volto-cca-policy/commit/9fa0e21aae7593bc3e26eb448ff8eeb6f025fd12)]
+- Cursor shape [Tiberiu Ichim - [`fbdcff4`](https://github.com/eea/volto-cca-policy/commit/fbdcff4b8fc1bbbaba9d3fe784470b5faf45c34b)]
+- Code cleanup [Tiberiu Ichim - [`61dab7c`](https://github.com/eea/volto-cca-policy/commit/61dab7c1a974511e7f7f2d0ce237e973677fe700)]
+- Checkpoint [Tiberiu Ichim - [`7a163af`](https://github.com/eea/volto-cca-policy/commit/7a163af07f7c0dd7e7c0d83a90b01047912c14da)]
+- Checkpoint [Tiberiu Ichim - [`18d9ddd`](https://github.com/eea/volto-cca-policy/commit/18d9ddd490129a70b912e3f22525abeedc86792a)]
+- Checkpoint [Tiberiu Ichim - [`eb657da`](https://github.com/eea/volto-cca-policy/commit/eb657da7f6dd6e64671a99bb4f522e765a2f28f3)]
+- Fix country map [Tiberiu Ichim - [`f657e70`](https://github.com/eea/volto-cca-policy/commit/f657e70fdba37bf9d34ee5acaaba672ad22de976)]
+### [0.1.72](https://github.com/eea/volto-cca-policy/compare/0.1.71...0.1.72) - 9 February 2024
+
+#### :bug: Bug Fixes
+
+- fix: map full width layout by removing no longer needed CSS [kreafox - [`6f5f1aa`](https://github.com/eea/volto-cca-policy/commit/6f5f1aa5a92a93c07a4efcc63be7ea862692c6d1)]
+
 ### [0.1.71](https://github.com/eea/volto-cca-policy/compare/0.1.70...0.1.71) - 5 February 2024
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.1.71",
+  "version": "0.1.73",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -38,7 +38,7 @@
     "@eeacms/volto-widget-dataprovenance": "*",
     "@eeacms/volto-widget-geolocation": "*",
     "@eeacms/volto-widget-temporal-coverage": "*",
-    "d3": "3",
+    "d3": "4",
     "d3-geo": "3"
   },
   "devDependencies": {

package/src/components/MigrationButtons.jsx

@@ -0,0 +1,41 @@
+import { Plug } from '@plone/volto/components/manage/Pluggable';
+import { getBaseUrl } from '@plone/volto/helpers';
+
+function MigrationButtons(props) {
+  const { content, token, pathname } = props;
+  const contentId = content?.['@id'] || '';
+  const show = !!token && contentId && contentId.indexOf('europa.eu') === -1;
+  const base = getBaseUrl(pathname);
+
+  const handleClickMigrate = () => {
+    window.open(`http://localhost:8080/cca/${base}/@@volto_migrate`, '_blank');
+  };
+
+  const handleClickView = () => {
+    window.open(`https://climate-adapt.eea.europa.eu${base}`, '_blank');
+  };
+
+  return show ? (
+    <Plug pluggable="main.toolbar.top" id="cca-migration-helpers" order={0}>
+      <button
+        className={`circle-right-btn `}
+        id="toolbar-migration"
+        onClick={handleClickMigrate}
+        title="Migrate context"
+      >
+        M
+      </button>
+
+      <button
+        className={`circle-right-btn `}
+        id="toolbar-view"
+        onClick={handleClickView}
+        title="View original"
+      >
+        V
+      </button>
+    </Plug>
+  ) : null;
+}
+
+export default MigrationButtons;

package/src/components/manage/Blocks/CountryMapHeatIndex/View.js

@@ -1,6 +1,4 @@
 import React, { useRef, useEffect } from 'react';
-import flags from './flags.js';
-import './styles.css';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { Grid } from 'semantic-ui-react';
 import { compose } from 'redux';
@@ -12,6 +10,9 @@ import { getFocusCountriesFeature } from '@eeacms/volto-cca-policy/helpers/count
 
 import Filter from './Filter';
 
+import flags from './flags.js';
+import './styles.less';
+
 import { useCountriesMetadata } from './hooks';
 
 const countries_metadata_url = '/en/@@countries-heat-index-json';
@@ -161,7 +162,7 @@ const CountryMapObservatoryView = (props) => {
 export default compose(
   clientOnly,
   injectLazyLibs(['d3', 'd3Geo']),
-  withResponsiveContainer,
+  withResponsiveContainer('countryMapHeatIndex'),
   withCountriesData,
 )(CountryMapObservatoryView);
 

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

@@ -0,0 +1,133 @@
+.countryMapHeatIndex {
+  &.sized-wrapper {
+    width: 100%;
+    height: 80vh;
+  }
+
+  #country_map {
+    position: relative;
+    margin: 50px;
+    fill: #fff;
+  }
+
+  .tooltip {
+    position: absolute;
+    z-index: 10;
+    display: none;
+    padding: 3px;
+    background-color: #2a2a2a;
+    border-radius: 3px;
+    color: white;
+    font-size: 10px;
+  }
+
+  .graticule {
+    fill: none;
+    stroke: black;
+    stroke-dasharray: 10, 10;
+    stroke-width: 1;
+  }
+
+  .semi-graticule {
+    fill: none;
+    stroke: gray;
+    stroke-dasharray: 1, 1;
+    stroke-width: 0.6;
+  }
+
+  .country-outline path {
+    fill: #e9e9e9;
+  }
+
+  .country-outline path {
+    fill: #f5f5f5;
+    stroke: #d1d1d1;
+    stroke-width: 1;
+  }
+
+  .country-available path {
+    fill: #0170b7;
+  }
+
+  .legend {
+    .legend-text {
+      width: 16em;
+    }
+
+    .legend-el {
+      display: flex;
+      flex-direction: row;
+      padding: 0.8em 0;
+    }
+
+    .legend-box {
+      width: 31px;
+      height: 19px;
+      margin-right: 0.5em;
+    }
+  }
+
+  span.country-national-hhap {
+    background: #0170b7;
+  }
+
+  span.country-subnational-hhap {
+    background: #8baece;
+  }
+
+  span.country-no-hhap {
+    background: #868686;
+  }
+
+  span.country-none {
+    background-color: #bfbfbf !important;
+  }
+
+  .country-nationalhhap path {
+    cursor: pointer;
+    fill: #0170b7 !important;
+  }
+
+  .country-no-hhap path {
+    cursor: pointer;
+    fill: #868686 !important;
+  }
+
+  .country-subnationalhhap path {
+    cursor: pointer;
+    fill: #8baece !important;
+  }
+
+  .country-none path {
+    cursor: pointer;
+    fill: #bfbfbf !important;
+  }
+
+  .country-nodata path {
+    cursor: pointer;
+    fill: #efe7d4 !important;
+  }
+
+  #map-tooltip {
+    position: absolute;
+    width: 400px;
+    padding: 1em;
+    border: 1px solid #c7c7c7;
+    background-color: #f7f7f7;
+  }
+
+  #country-name a {
+    text-decoration: none;
+  }
+
+  #country-name .tooltip-country-flag {
+    position: absolute;
+    top: 10px;
+    right: 1em;
+  }
+
+  #tooltip-content {
+    padding-top: 1em;
+    border-top: 2px solid #005c96;
+  }
+}

package/src/components/manage/Blocks/CountryMapObservatory/{CountryMapObservatoryEdit.js → CountryMapObservatoryEdit.jsx}

@@ -1,4 +1,4 @@
-import CountryMapObservatoryView from './CountryMapObservatoryView';
+import CountryMapObservatoryView from './CountryMapObservatoryOLView';
 
 export default function CountryMapObservatoryEdit(props) {
   return <CountryMapObservatoryView {...props} mode="edit" />;

package/src/components/manage/Blocks/CountryMapObservatory/CountryMapObservatoryOLView.jsx

@@ -0,0 +1,230 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { compose } from 'redux';
+import { clientOnly } from '@eeacms/volto-cca-policy/helpers';
+import withResponsiveContainer from '../withResponsiveContainer.js';
+
+import { Map, Layer, Layers, Controls } from '@eeacms/volto-openlayers-map/api';
+import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import { useMapContext } from '@eeacms/volto-openlayers-map/api';
+import { euCountryNames } from '@eeacms/volto-cca-policy/helpers/country_map/countryMap.js';
+
+import './styles.less';
+const url =
+  'https://raw.githubusercontent.com/eurostat/Nuts2json/master/pub/v2/2021/4326/20M/cntrg.json';
+
+let highlight = null; // easy global
+
+const tooltipStyle = {
+  position: 'relative',
+  zIndex: 2,
+  display: 'inline-block',
+  visibility: 'hidden',
+  top: '0px',
+  left: '0px',
+  backgroundColor: 'black',
+  color: 'white',
+  padding: '0.3em',
+  cursor: 'pointer',
+  fontSize: '10px',
+};
+
+const Interactions = ({ overlaySource, tooltipRef, baseUrl }) => {
+  const history = useHistory();
+  const map = useMapContext().map;
+  React.useEffect(() => {
+    if (!map) return;
+    map.on('pointermove', function (evt) {
+      if (evt.dragging) {
+        return;
+      }
+      const pixel = map.getEventPixel(evt.originalEvent);
+      const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
+        return feature;
+      });
+      if (feature !== highlight) {
+        if (highlight) {
+          try {
+            map.getTargetElement().style.cursor = '';
+            overlaySource.removeFeature(highlight);
+          } catch {}
+        }
+        if (feature && euCountryNames.includes(feature.get('na'))) {
+          overlaySource.addFeature(feature);
+          map.getTargetElement().style.cursor = 'pointer';
+          const node = tooltipRef.current;
+          if (node) {
+            node.innerHTML = feature.get('na');
+            node.style.visibility = 'visible';
+            node.style.left = `${Math.floor(evt.originalEvent.layerX)}px`;
+            node.style.top = `${Math.floor(evt.originalEvent.layerY)}px`;
+          }
+          highlight = feature;
+        }
+      }
+    });
+    map.on('click', function (evt) {
+      if (evt.dragging) {
+        return;
+      }
+      const pixel = map.getEventPixel(evt.originalEvent);
+      const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
+        return feature;
+      });
+      if (feature) {
+        const country = feature.get('na');
+        history.push(`${baseUrl}/${country.toLowerCase()}`);
+      }
+    });
+  }, [map, overlaySource, tooltipRef, baseUrl, history]);
+  return null;
+};
+
+const CountryMapObservatoryView = (props) => {
+  const [tileWMSSources, setTileWMSSources] = React.useState();
+  const [rectsSource, setRectsSource] = React.useState();
+  const [overlaySource, setOverlaySource] = React.useState();
+  const [euCountriesSource, setEuCountriessource] = React.useState();
+
+  React.useEffect(() => {
+    setOverlaySource(new ol.source.Vector());
+    const euSource = new ol.source.Vector();
+    setEuCountriessource(euSource);
+    const vs = new ol.source.Vector({
+      url,
+      format: new ol.format.GeoJSON(),
+    });
+    vs.on('addfeature', function (evt) {
+      const { feature } = evt;
+      const img = new Image();
+      img.onload = function () {
+        feature.set('flag', img);
+      };
+      img.src =
+        'https://flagcdn.com/w320/' + feature.get('id').toLowerCase() + '.png';
+    });
+    vs.on('featuresloadend', (ev) => {
+      const filtered = ev.features.filter((f) =>
+        euCountryNames.includes(f.get('na')),
+      );
+      euSource.addFeatures(filtered);
+    });
+    setRectsSource(vs);
+
+    setTileWMSSources([
+      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 fill = new ol.style.Fill();
+  const stroke = new ol.style.Stroke({
+    // color: 'rgba(255,255,255,0.8)',
+    color: '#A0A0A0',
+    width: 2,
+  });
+
+  const overlayStyle = new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: '#A0A0A0',
+      width: 2,
+    }),
+    fill: new ol.style.Fill({
+      color: 'rgb(1, 112, 183, 0.8)',
+    }),
+    renderer: function (pixelCoordinates, state) {
+      const context = state.context;
+      const geometry = state.geometry.clone();
+      geometry.setCoordinates(pixelCoordinates);
+      const extent = geometry.getExtent();
+      const width = ol.extent.getWidth(extent);
+      const height = ol.extent.getHeight(extent);
+      const flag = state.feature.get('flag');
+      if (!flag || height < 1 || width < 1) {
+        return;
+      }
+
+      // Stitch out country shape from the blue canvas
+      context.save();
+      const renderContext = ol.render.toContext(context, {
+        pixelRatio: 1,
+      });
+      renderContext.setFillStrokeStyle(fill, stroke);
+      renderContext.drawGeometry(geometry);
+      context.clip();
+
+      // Fill transparent country with the flag image
+      const bottomLeft = ol.extent.getBottomLeft(extent);
+      const left = bottomLeft[0];
+      const bottom = bottomLeft[1];
+      context.drawImage(flag, left, bottom, width, height);
+      context.restore();
+    },
+  });
+
+  const emptyStyle = new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: 'rgb(1, 1, 1, 0)',
+      width: 1,
+    }),
+    fill: new ol.style.Fill({
+      color: 'rgb(1, 1, 1, 0)',
+    }),
+  });
+
+  const eucountriesStyle = new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: '#A0A0A0',
+      width: 1,
+    }),
+    fill: new ol.style.Fill({
+      color: 'rgb(1, 112, 183, 0.3)',
+    }),
+  });
+
+  const tooltipRef = React.useRef();
+
+  return rectsSource ? (
+    <Map
+      view={{
+        center: ol.proj.fromLonLat([10, 52]),
+        showFullExtent: true,
+        zoom: 3.8,
+      }}
+      pixelRatio={1}
+    >
+      <div ref={tooltipRef} style={tooltipStyle} className="map-tooltip"></div>
+      <Controls attribution={false} />
+      <Layers>
+        {props.mode !== 'edit' && (
+          <Interactions
+            overlaySource={overlaySource}
+            tooltipRef={tooltipRef}
+            baseUrl={props.path || props.location?.pathname || ''}
+          />
+        )}
+        <Layer.Vector source={overlaySource} zIndex={3} style={overlayStyle} />
+        <Layer.Vector
+          source={euCountriesSource}
+          zIndex={2}
+          style={eucountriesStyle}
+        />
+        <Layer.Vector source={rectsSource} zIndex={1} style={emptyStyle} />
+        <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
+      </Layers>
+    </Map>
+  ) : null;
+};
+
+export default compose(
+  clientOnly,
+  withResponsiveContainer('countryMapObservatory'),
+)(CountryMapObservatoryView);

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

@@ -1,6 +1,6 @@
 import worldSVG from '@plone/volto/icons/world.svg';
 import CountryMapObservatoryEdit from './CountryMapObservatoryEdit';
-import CountryMapObservatoryView from './CountryMapObservatoryView';
+import CountryMapObservatoryView from './CountryMapObservatoryOLView';
 import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
 
 export default function installCountryMapObservatoryBlock(config) {

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

@@ -0,0 +1,51 @@
+.countryMapObservatory {
+  &.sized-wrapper {
+    width: 100%;
+    height: 500px;
+  }
+
+  #country_map {
+    position: relative;
+    // margin: 50px;
+    fill: #fff;
+  }
+
+  .tooltip {
+    position: absolute;
+    z-index: 10;
+    display: none;
+    padding: 3px;
+    background-color: #2a2a2a;
+    border-radius: 3px;
+    color: white;
+    font-size: 10px;
+  }
+
+  .graticule {
+    fill: none;
+    stroke: black;
+    stroke-dasharray: 10, 10;
+    stroke-width: 1;
+  }
+
+  .semi-graticule {
+    fill: none;
+    stroke: gray;
+    stroke-dasharray: 1, 1;
+    stroke-width: 0.6;
+  }
+
+  .country-outline path {
+    fill: #e9e9e9;
+  }
+
+  .country-outline path {
+    fill: #f5f5f5;
+    stroke: #d1d1d1;
+    stroke-width: 1;
+  }
+
+  .country-available path {
+    fill: #0170b7;
+  }
+}

package/src/components/manage/Blocks/CountryMapProfile/View.js

@@ -1,5 +1,4 @@
 import React, { useRef, useEffect } from 'react';
-import './styles.css';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { Grid } from 'semantic-ui-react';
 import { compose } from 'redux';
@@ -13,6 +12,8 @@ import {
   withCountriesData,
 } from '@eeacms/volto-cca-policy/helpers/country_map/countryMap.js';
 
+import './styles.less';
+
 import Filter from './Filter';
 
 import { useCountriesMetadata } from './hooks';
@@ -115,6 +116,6 @@ const CountryMapObservatoryView = (props) => {
 export default compose(
   clientOnly,
   injectLazyLibs(['d3', 'd3Geo']),
-  withResponsiveContainer,
+  withResponsiveContainer('countryMapProfile'),
   withCountriesData,
 )(CountryMapObservatoryView);