@eeacms/volto-cca-policy 0.1.29 → 0.1.30

package/CHANGELOG.md

@@ -4,6 +4,30 @@ 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.30](https://github.com/eea/volto-cca-policy/compare/0.1.29...0.1.30) - 27 July 2023
+
+#### :hammer_and_wrench: Others
+
+- Refs #255643 - Add temporal-coverage, geolocation, dataprovenance widgets for EEACoreMetadata. [GhitaB - [`34f9126`](https://github.com/eea/volto-cca-policy/commit/34f91263530067e36ceff23b3a6f1e0dd7b2b492)]
+- Refs #255585 - Add Sitemap link in footer. [Ghiță Bizău - [`a2b9e47`](https://github.com/eea/volto-cca-policy/commit/a2b9e478fc3e959f8925d842f2d9ea7a38836eae)]
+- Enable sitemap for mission [Tiberiu Ichim - [`2ce7a54`](https://github.com/eea/volto-cca-policy/commit/2ce7a54026b5c6e3ea3dbef6368671141c10f865)]
+- Refs #161489 - Custom listing variation: implement contributions link. [GhitaB - [`d085959`](https://github.com/eea/volto-cca-policy/commit/d085959bb0794ff8cb72aca81bfe9fdd24ab29d3)]
+- Refs #161489 - Custom listing variation: improve styles. [GhitaB - [`12f1f19`](https://github.com/eea/volto-cca-policy/commit/12f1f196a283d5a353d5abb70640c748f537b947)]
+- Refs #161489 - Custom listing variation: move styles to less file. [GhitaB - [`0e09b43`](https://github.com/eea/volto-cca-policy/commit/0e09b43fd92c31a81bfcc48cc0e0871db0d9bc76)]
+- Refs #161489 - Custom listing variation: fix error in edit, also fix jenkins. [GhitaB - [`82c32b5`](https://github.com/eea/volto-cca-policy/commit/82c32b55037437b6be3deef199491b93c04ef1dc)]
+- Refs #161489 - Custom listing variation: install listing. [GhitaB - [`6a3c570`](https://github.com/eea/volto-cca-policy/commit/6a3c570c1ae133c598fb90f9c70f53340b5c1ffa)]
+- Refs #161489 - Custom listing variation: show website link. [GhitaB - [`ae177e0`](https://github.com/eea/volto-cca-policy/commit/ae177e05aa94781e278fd04e2a7776b487fb55e1)]
+- Enable fullobjects on listing item [Tiberiu Ichim - [`d6b91b9`](https://github.com/eea/volto-cca-policy/commit/d6b91b989d7fb4895070758c3d2a81651acdf5af)]
+- Refs #161489 - Custom listing variation: improve styles. [GhitaB - [`50d27e2`](https://github.com/eea/volto-cca-policy/commit/50d27e2c5f19a816eba0bf2568bce6205316b655)]
+- Refs #161489 - Custom listing variation: fix grid, styles. [GhitaB - [`79fb456`](https://github.com/eea/volto-cca-policy/commit/79fb4564c0d42a539f4f38ae2cd5243eb0edb74a)]
+- Refs #161489 - Add custom listing variation for items cards used in Observatory About. [GhitaB - [`cd99466`](https://github.com/eea/volto-cca-policy/commit/cd994668946402f74522411508ce986af33472ee)]
+- Refs #161493 - wip jenkins [Tripon Eugen - [`665c918`](https://github.com/eea/volto-cca-policy/commit/665c9183481b43253ad488e973e184f59ca980a1)]
+- Refs #161493 - observatory country profile [Tripon Eugen - [`9dfe890`](https://github.com/eea/volto-cca-policy/commit/9dfe890834363cf913fed20eed2a208542a47669)]
+- Refs #161493 - cca country profile and observatory heat index [Tripon Eugen - [`6af532b`](https://github.com/eea/volto-cca-policy/commit/6af532b42785c0d5e3e7dda83d6909eca16d26e5)]
+- Add labels [Tiberiu Ichim - [`219213d`](https://github.com/eea/volto-cca-policy/commit/219213d185ce27cff83cba061a8f5a73a76b8ba5)]
+- Fix country map [Tiberiu Ichim - [`30fed7d`](https://github.com/eea/volto-cca-policy/commit/30fed7d6d35d6994addd0e7ccbfa0160863d4855)]
+- Remove console.log [Tiberiu Ichim - [`c98374c`](https://github.com/eea/volto-cca-policy/commit/c98374cbe7ada2816de5e0bbd2ac92f190ebef2d)]
+- Improvements to casestudy map [Tiberiu Ichim - [`9908304`](https://github.com/eea/volto-cca-policy/commit/99083048fef48f908b74491ec20c074072b67ff9)]
 ### [0.1.29](https://github.com/eea/volto-cca-policy/compare/0.1.28...0.1.29) - 20 June 2023
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -18,6 +18,9 @@
   },
   "addons": [
     "@eeacms/volto-openlayers-map",
+    "@eeacms/volto-widget-temporal-coverage",
+    "@eeacms/volto-widget-geolocation",
+    "@eeacms/volto-widget-dataprovenance",
     "@eeacms/volto-eea-design-system",
     "@eeacms/volto-globalsearch"
   ],
@@ -25,7 +28,11 @@
     "@eeacms/volto-eea-design-system": "*",
     "@eeacms/volto-globalsearch": "*",
     "@eeacms/volto-openlayers-map": "*",
-    "d3": "3"
+    "@eeacms/volto-widget-dataprovenance": "*",
+    "@eeacms/volto-widget-geolocation": "*",
+    "@eeacms/volto-widget-temporal-coverage": "*",
+    "d3": "3",
+    "d3-geo": "3"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.10.0",

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

@@ -8,15 +8,24 @@ import FeatureInteraction from './FeatureInteraction';
 
 import { getFeatures } from './utils';
 
-const styleCache = {};
-
 export default function CaseStudyMap(props) {
   const { items, activeItems } = props;
   const [selectedCase, onSelectedCase] = React.useState();
 
   const features = getFeatures(items); //console.log('Features list', features);
 
-  const [tileWMSSources, setTileWMSSources] = React.useState([]);
+  const [tileWMSSources] = React.useState([
+    // , setTileWMSSources
+    new ol.source.TileWMS({
+      url: 'https://gisco-services.ec.europa.eu/maps/service',
+      params: {
+        LAYERS: 'OSMBlossomComposite',
+        TILED: true,
+      },
+      serverType: 'geoserver',
+      transition: 0,
+    }),
+  ]);
   const [pointsSource] = React.useState(
     new ol.source.Vector({
       features,
@@ -37,20 +46,6 @@ export default function CaseStudyMap(props) {
     }
   }, [activeItems, pointsSource]);
 
-  React.useEffect(() => {
-    setTileWMSSources([
-      new ol.source.TileWMS({
-        url: 'https://gisco-services.ec.europa.eu/maps/service',
-        params: {
-          LAYERS: 'OSMBlossomComposite',
-          TILED: true,
-        },
-        serverType: 'geoserver',
-        transition: 0,
-      }),
-    ]);
-  }, []);
-
   return features.length > 0 ? (
     <Map
       view={{
@@ -65,7 +60,7 @@ export default function CaseStudyMap(props) {
         <InfoOverlay
           selectedFeature={selectedCase}
           onFeatureSelect={onSelectedCase}
-          layerId={tileWMSSources?.[0]}
+          layerId={tileWMSSources[0]}
         />
         <FeatureInteraction onFeatureSelect={onSelectedCase} />
         <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
@@ -75,43 +70,50 @@ export default function CaseStudyMap(props) {
   ) : null;
 }
 
-function clusterStyle(feature) {
-  const size = feature.get('features').length;
-  //const size = feature.get('casePoints').length;
-  let style = styleCache[size];
+const _cached = {};
+
+function getStyle(size) {
+  let style = _cached[size];
 
   if (!style) {
-    style = 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: '#3399CC',
-        }),
-      }),
-      text: new ol.style.Text({
-        text: size.toString(),
-        fill: new ol.style.Fill({
-          color: '#fff',
-        }),
-      }),
-    });
-    styleCache[size] = 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: '#000000',
+              }),
+            }),
+          })
+        : 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: '#3399CC',
+              }),
+            }),
+            text: new ol.style.Text({
+              text: size.toString(),
+              fill: new ol.style.Fill({
+                color: '#fff',
+              }),
+            }),
+          });
+    _cached[size] = style;
   }
+  return style;
+}
+
+function clusterStyle(feature) {
+  const size = feature.get('features').length;
+  //const size = feature.get('casePoints').length;
 
-  return 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: '#000000',
-          }),
-        }),
-      })
-    : style;
+  return getStyle(size);
 }

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

@@ -6,12 +6,15 @@ const useStyles = () => {
   const selected = React.useMemo(
     () =>
       new ol.style.Style({
-        fill: new ol.style.Fill({
-          color: '#cccccc',
-        }),
-        stroke: new ol.style.Stroke({
-          color: 'rgba(255, 0, 0, 0.7)',
-          width: 2,
+        image: new ol.style.Circle({
+          radius: 12,
+          fill: new ol.style.Fill({
+            color: '#ccc',
+          }),
+          stroke: new ol.style.Stroke({
+            color: 'rgba(255, 0, 0, 0.7)',
+            width: 2,
+          }),
         }),
       }),
     [],
@@ -19,8 +22,10 @@ const useStyles = () => {
 
   const selectStyle = React.useCallback(
     (feature) => {
-      const color = feature.get('COLOR') || '#eeeeee';
-      selected.getFill().setColor(color);
+      // 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],
@@ -55,10 +60,20 @@ export default function FeatureInteraction({ onFeatureSelect }) {
         if (subfeatures.length === 1) {
           const selectedFeature = subfeatures[0].values_;
           onFeatureSelect(selectedFeature);
+          // console.log('onfeatureselect');
         } else {
+          // zoom to extent of cluster points
           const extent = getExtentOfFeatures(subfeatures);
-          const paddedExtent = ol.extent.buffer(extent, 50000);
+
+          let extentBuffer =
+            (extent[3] - extent[1] + extent[2] - extent[0]) / 4;
+          extentBuffer = extentBuffer < 500 ? 500 : extentBuffer;
+          // console.log('extentBuffer', { extent, extentBuffer });
+          const paddedExtent = ol.extent.buffer(extent, extentBuffer);
+
+          // const paddedExtent = ol.extent.buffer(extent, 50000);
           map.getView().fit(paddedExtent, { ...map.getSize(), duration: 1000 });
+          // console.log('onclusterzoom');
         }
       });
 
@@ -67,6 +82,7 @@ export default function FeatureInteraction({ onFeatureSelect }) {
 
     map.addInteraction(select);
 
+    // TODO: does this accumulate?
     map.on('pointermove', (e) => {
       const pixel = map.getEventPixel(e.originalEvent);
       const hit = map.hasFeatureAtPixel(pixel);

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

@@ -0,0 +1,5 @@
+import View from './View';
+
+export default function CountryMapProfileEdit(props) {
+  return <View {...props} mode="edit" />;
+}

package/src/components/manage/Blocks/CountryMapHeatIndex/Filter.jsx

@@ -0,0 +1,66 @@
+export default function Filter(props) {
+  const { thematicMapMode, setThematicMapMode } = props;
+  return (
+    <>
+      <h2>Choose thematic map:</h2>
+      <div id="sections-selector">
+        <input
+          type="radio"
+          name="country-map-section"
+          value="hhap"
+          checked="checked"
+          onChange={(e) => {
+            setThematicMapMode(e.target.value);
+          }}
+        />
+        Heat health action plans (HHAP)
+        <br />
+        <input
+          type="radio"
+          name="country-map-section"
+          value="hhws"
+          onChange={(e) => {
+            setThematicMapMode(e.target.value);
+          }}
+        />
+        Heat health warning systems (HHWS)
+      </div>
+
+      {thematicMapMode === 'hhap' && (
+        <div className="legend climate-legend">
+          <div className="legend-el">
+            <span className="country-national-hhap legend-box"></span>
+            <p className="legend-text">National HHAP</p>
+          </div>
+          <div className="legend-el">
+            <span className="country-subnational-hhap legend-box"></span>
+            <p className="legend-text">Subnational or local</p>
+          </div>
+          <div className="legend-el">
+            <span className="country-no-hhap legend-box"></span>
+            <p className="legend-text">No HHAP</p>
+          </div>
+          <div className="legend-el">
+            <span className="country-national-hhap legend-box"></span>
+            <p className="legend-text">No information</p>
+          </div>
+        </div>
+      )}
+
+      {thematicMapMode === 'hhws' && (
+        <div className="legend portals-legend">
+          <div className="legend-el">
+            <span className="country-national-hhap legend-box"></span>
+            <p className="legend-text">
+              HHWS available (click on country for further information)
+            </p>
+          </div>
+          <div className="legend-el">
+            <span className="country-none legend-box"></span>
+            <p className="legend-text">No information</p>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,174 @@
+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';
+import { clientOnly } from '@eeacms/volto-cca-policy/helpers';
+import withResponsiveContainer from './withResponsiveContainer.js';
+import { addAppURL } from '@plone/volto/helpers';
+import {
+  getFocusCountriesFeature,
+  getFocusCountryNames,
+  renderCountriesBox,
+} from './map-utils.js';
+
+import Filter from './Filter';
+
+import { useCountriesMetadata } from './hooks';
+
+const countries_metadata_url = '/en/@@countries-heat-index-json';
+
+const withCountriesData = (WrappedComponent) => {
+  function WithCountriesDataWrapped(props) {
+    let [cpath, setCpath] = React.useState();
+
+    useEffect(() => {
+      if (!cpath) {
+        import('./euro-countries-simplified.js').then((mod) => {
+          const _cpath = mod.default;
+          _cpath.features = _cpath.features.map(function (c) {
+            //console.log(c);
+            var name = c.properties.SHRT_ENGL;
+            if (!name) {
+              // console.log('No flag for', c.properties);
+              return c;
+            } else if (name === 'Czechia') {
+              name = 'Czech Republic';
+            }
+            var cname = name.replace(' ', '_');
+            flags.forEach(function (f) {
+              if (f.indexOf(cname) > -1) {
+                c.url = f;
+                //console.log(c.url);
+              }
+            });
+            return c;
+          });
+
+          setCpath(_cpath);
+        });
+      }
+    }, [cpath]);
+
+    return cpath ? <WrappedComponent {...props} cpath={cpath} /> : null;
+  }
+  return WithCountriesDataWrapped;
+};
+
+const CountryMapObservatoryView = (props) => {
+  const svgRef = useRef(null);
+  const { d3, d3Geo, size, cpath } = props;
+  const { height, width } = size;
+  const [thematicMapMode, setThematicMapMode] = React.useState('hhap');
+
+  const countries_metadata = useCountriesMetadata(
+    addAppURL(countries_metadata_url),
+  );
+
+  useEffect(() => {
+    // D3 Code
+
+    // Dimensions
+    //const parentDiv = document.getElementById('page-document');
+    let dimensions = {
+      //width: parentDiv.offsetWidth,
+      width,
+      height,
+      margins: 50,
+    };
+
+    dimensions.containerWidth = dimensions.width - dimensions.margins * 2;
+    dimensions.containerHeight = dimensions.height - dimensions.margins * 2;
+
+    //const d3 = loadable.lib(() => import('d3'));
+    // SELECTIONS
+    const svg = d3
+      .select(svgRef.current)
+      .attr('id', 'country_map')
+      //.classed("line-chart", true)
+      .attr('width', dimensions.width)
+      .attr('height', dimensions.height);
+    //console.log('SVG x-y', svg.getBBox());
+    /*
+    const container = svg
+      .append('g')
+      .classed('container', true)
+      .attr(
+        'transform',
+        `translate(${dimensions.margins}, ${dimensions.margins})`,
+      );
+      */
+
+    //console.log('cpath', cpath);
+    //console.log(fpath);
+    //console.log('Flags',flags);
+    //console.log('filtered', getFocusCountriesFeature(cpath));
+
+    window.countrySettings = cpath.features;
+
+    var opts = {
+      world: cpath.features,
+      countries_metadata: countries_metadata,
+      thematic_map_mode: thematicMapMode,
+      svg: svg,
+      coordinates: {
+        x: 0,
+        y: 0,
+        width: dimensions.containerWidth,
+        height: dimensions.containerHeight,
+      },
+      focusCountries: {
+        names: getFocusCountryNames(),
+        feature: getFocusCountriesFeature(cpath),
+      },
+      zoom: 0.95,
+    };
+    renderCountriesBox(opts, d3, d3Geo);
+    // Draw Circle
+    //container.append("circle").attr("r", 25).style("color","blue");
+  }, [
+    props.Data,
+    d3,
+    width,
+    height,
+    cpath,
+    d3Geo,
+    thematicMapMode,
+    countries_metadata,
+  ]); // redraw chart if data changes
+
+  return (
+    <div>
+      <Grid columns="12">
+        <Grid.Column mobile={9} tablet={9} computer={10} className="col-left">
+          <svg ref={svgRef} />
+        </Grid.Column>
+        <Grid.Column
+          mobile={3}
+          tablet={3}
+          computer={2}
+          className="col-left"
+          id="cse-filter"
+        >
+          <Filter
+            thematicMapMode={thematicMapMode}
+            setThematicMapMode={setThematicMapMode}
+          />
+        </Grid.Column>
+      </Grid>
+    </div>
+  );
+};
+
+export default compose(
+  clientOnly,
+  injectLazyLibs(['d3', 'd3Geo']),
+  withResponsiveContainer,
+  withCountriesData,
+)(CountryMapObservatoryView);
+
+// import loadable from '@loadable/component';
+//import * as d3 from 'd3';
+// import cpath from './euro-countries-simplified';
+//

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import superagent from 'superagent';
+
+export function useCountriesMetadata(url) {
+  const [countries_metadata, setCountriesMetadata] = React.useState([]);
+
+  React.useEffect(() => {
+    superagent
+      .get(url)
+      .set('accept', 'json')
+      .then((resp) => {
+        const res = JSON.parse(resp.text);
+        setCountriesMetadata(res);
+      });
+  }, [url]);
+
+  return countries_metadata;
+}

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

@@ -0,0 +1,16 @@
+import worldSVG from '@plone/volto/icons/world.svg';
+import Edit from './Edit';
+import View from './View';
+
+export default function installCountryMapHeatIndex(config) {
+  config.blocks.blocksConfig.countryMapHeatIndex = {
+    id: 'countryMapHeatIndex',
+    title: 'Country Map Observatory Heat Index',
+    icon: worldSVG,
+    group: 'common',
+    edit: Edit,
+    view: View,
+  };
+
+  return config;
+}