@eeacms/volto-cca-policy 0.3.47 → 0.3.48

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

@@ -1,8 +1,7 @@
 import React from 'react';
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 const _cached = {};
 
-function getStyle(size, haveAdaptecca) {
+function getStyle(size, haveAdaptecca, ol) {
   let style = _cached[size + '_' + haveAdaptecca];
 
   if (!style) {
@@ -41,26 +40,29 @@ function getStyle(size, haveAdaptecca) {
   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,
+export function useStyles(ol) {
+  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 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;
+    },
+    [ol],
+  );
 
   const convexHullStroke = React.useMemo(
     () =>
@@ -68,7 +70,7 @@ export function useStyles() {
         color: 'rgba(204, 85, 0, 1)',
         width: 1.5,
       }),
-    [],
+    [ol],
   );
 
   const clusterMemberStyle = React.useMemo(() => {
@@ -85,7 +87,7 @@ export function useStyles() {
       });
     };
     return _clusterMemberStyle;
-  }, []);
+  }, [ol]);
 
   const clusterCircleStyle = React.useCallback(
     (cluster, resolution) => {
@@ -135,7 +137,7 @@ export function useStyles() {
         return styles;
       }, []);
     },
-    [convexHullStroke, clusterMemberStyle],
+    [convexHullStroke, clusterMemberStyle, ol],
   );
 
   return { clusterCircleStyle, selectStyle };
@@ -169,16 +171,20 @@ export function generatePointsCircle(count, clusterCenter, resolution) {
 
   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 clusterStyle(ol) {
+  function _closure(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, ol);
+  }
+  return _closure;
 }
 
-export function getExtentOfFeatures(features) {
+export function getExtentOfFeatures(features, ol) {
   const points = features.map((f) => f.getGeometry().flatCoordinates);
   const point = new ol.geom.MultiPoint(points);
   return point.getExtent();

package/src/components/manage/Blocks/CaseStudyExplorer/utils.js

@@ -1,6 +1,4 @@
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
-
-export function getFeatures(cases) {
+export function getFeatures(cases, ol) {
   const Feature = ol.ol.Feature;
 
   return cases.map((c, index) => {

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

@@ -4,8 +4,8 @@ import { compose } from 'redux';
 import { clientOnly } from '@eeacms/volto-cca-policy/helpers';
 import { useHistory } from 'react-router-dom';
 
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 import { Map, Layer, Layers, Controls } from '@eeacms/volto-openlayers-map/api';
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 import {
   euCountryNames,
   tooltipStyle,
@@ -24,10 +24,10 @@ import './styles.less';
 //   'https://raw.githubusercontent.com/eurostat/Nuts2json/master/pub/v2/2021/4326/20M/cntrg.json';
 
 const CountryMapObservatoryView = (props) => {
-  const { geofeatures, projection } = props;
+  const { geofeatures, projection, ol } = props;
 
   const history = useHistory();
-  const styles = React.useMemo(makeStyles, []);
+  const styles = React.useMemo(() => makeStyles(ol), [ol]);
   const tooltipRef = React.useRef();
   const [tileWMSSources, setTileWMSSources] = React.useState();
   const [overlaySource, setOverlaySource] = React.useState();
@@ -75,7 +75,7 @@ const CountryMapObservatoryView = (props) => {
         transition: 0,
       }),
     ]);
-  }, [geofeatures]);
+  }, [geofeatures, ol]);
 
   const baseUrl = getBaseUrl(props);
 
@@ -131,4 +131,5 @@ export default compose(
   withGeoJsonData,
   withResponsiveContainer('countryMapObservatory'),
   withVisibilitySensor(),
+  withOpenLayers,
 )(CountryMapObservatoryView);

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

@@ -1,6 +1,4 @@
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
-
-const flagRenderer = ({ stroke, fill }) => (pixelCoordinates, state) => {
+const flagRenderer = ({ stroke, fill, ol }) => (pixelCoordinates, state) => {
   const context = state.context;
   const geometry = state.geometry.clone();
   geometry.setCoordinates(pixelCoordinates);
@@ -29,7 +27,7 @@ const flagRenderer = ({ stroke, fill }) => (pixelCoordinates, state) => {
   context.restore();
 };
 
-export const makeStyles = () => {
+export const makeStyles = (ol) => {
   const fill = new ol.style.Fill();
   const stroke = new ol.style.Stroke({
     // color: 'rgba(255,255,255,0.8)',
@@ -45,7 +43,7 @@ export const makeStyles = () => {
     fill: new ol.style.Fill({
       color: 'rgb(1, 112, 183, 0.8)',
     }),
-    renderer: flagRenderer({ fill, stroke }),
+    renderer: flagRenderer({ fill, stroke, ol }),
   });
 
   const eucountriesStyle = new ol.style.Style({

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

@@ -1,6 +1,5 @@
 import { compose } from 'redux';
 
-// import installMKHMap from './MKHMap';
 import installECDEIndicatorsBlock from './ECDEIndicators';
 import installCaseStudyExplorerBlock from './CaseStudyExplorer';
 import installSearchAceContent from './SearchAceContent';
@@ -8,8 +7,6 @@ import installRelevantAceContent from './RelevantAceContent';
 import installFilterAceContent from './FilterAceContent';
 import installTransRegionSelect from './TransRegionSelect';
 import installCountryMapObservatory from './CountryMapObservatory';
-import installCountryMapHeatIndex from './CountryMapHeatIndex';
-import installCountryMapProfile from './CountryMapProfile';
 import installCountryProfileDetail from './CountryProfileDetail';
 import installListing from './Listing';
 import installRAST from './RASTBlock';
@@ -23,6 +20,10 @@ import installRedirectBlock from './RedirectBlock';
 import installContentLinks from './ContentLinks';
 import installASTNavigation from './ASTNavigation';
 
+// import installMKHMap from './MKHMap';
+// import installCountryMapHeatIndex from './CountryMapHeatIndex';
+// import installCountryMapProfile from './CountryMapProfile';
+
 export default function installBlocks(config) {
   config.blocks.blocksConfig.title.restricted = false;
   config.blocks.blocksConfig.layoutSettings.restricted = false;
@@ -36,12 +37,9 @@ export default function installBlocks(config) {
     installC3SIndicatorsOverviewBlock,
     installC3SIndicatorsListingBlock,
     installC3SIndicatorsGlossaryBlock,
-    // installMKHMap,
     installECDEIndicatorsBlock,
     installCaseStudyExplorerBlock,
     installCountryMapObservatory,
-    installCountryMapHeatIndex,
-    installCountryMapProfile,
     installCountryProfileDetail,
     installSearchAceContent,
     installRelevantAceContent,
@@ -53,5 +51,8 @@ export default function installBlocks(config) {
     installRedirectBlock,
     installContentLinks,
     installASTNavigation,
+    // installMKHMap,
+    // installCountryMapHeatIndex,
+    // installCountryMapProfile,
   )(config);
 }

package/src/index.js

@@ -22,7 +22,7 @@ import C3SIndicatorView from './components/theme/Views/C3SIndicatorView';
 import DatabaseItemView from './components/theme/Views/DatabaseItemView';
 
 import GeocharsWidget from './components/theme/Widgets/GeocharsWidget';
-import GeolocationWidget from './components/theme/Widgets/GeolocationWidget';
+// import GeolocationWidget from './components/theme/Widgets/GeolocationWidget';
 import PromotionalImageWidget from './components/theme/Widgets/PromotionalImageWidget';
 import MigrationButtons from './components/MigrationButtons';
 import HealthHorizontalCardItem from './components/Result/HealthHorizontalCardItem';
@@ -429,7 +429,7 @@ const applyConfig = (config) => {
   };
   // Custom widgets
   config.widgets.id.geochars = GeocharsWidget;
-  config.widgets.id.geolocation = GeolocationWidget;
+  // config.widgets.id.geolocation = GeolocationWidget;
   config.widgets.id.promotional_image = PromotionalImageWidget;
 
   if (config.widgets.views?.widget) {

package/src/components/manage/Blocks/MKHMap/Edit.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { SidebarPortal } from '@plone/volto/components';
-import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
-import schema from './schema';
-import View from './View';
-
-const Edit = (props) => {
-  return (
-    <>
-      <View {...props} mode="edit" />
-
-      <SidebarPortal selected={props.selected}>
-        <InlineForm
-          schema={schema}
-          title={schema.title}
-          onChangeField={(id, value) => {
-            props.onChangeBlock(props.block, {
-              ...props.data,
-              [id]: value,
-            });
-          }}
-          formData={props.data}
-        />
-      </SidebarPortal>
-    </>
-  );
-};
-
-export default Edit;

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

@@ -1,87 +0,0 @@
-import React from 'react';
-import { UniversalLink } from '@plone/volto/components';
-
-// {
-//   "feature": {
-//     "OBJECTID": 39,
-//     "CNTR_CODE": "PL",
-//     "CNTR_NAME": "Poland",
-//     "NUTS_ID": "PL9",
-//     "NUTS_Name_Excel": "Mazovia (Mazowieckie)",
-//     "NAME_LATN": "Makroregion województwo mazowieckie",
-//     "NUTS_NAME": "Makroregion województwo mazowieckie",
-//     "LEVEL_CODE": "NUTS 1",
-//     "Comments": null,
-//     "CNTR_FLAG": "https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/4.1.4/flags/4x3/pl.svg",
-//     "BIOGEO_REG_CODE": "Continental",
-//     "BIOGEO_REG_NAME": "Continental Bio-geographical Region",
-//     "_maxOverlap": 35559453062.672485,
-//     "BIOGEO_NUTS_AREA": "100",
-//     "SHAPE_Length": 1473687.3485873593,
-//     "SHAPE_Area": 35559453062.672424
-//   }
-// }
-
-const NutsRegion = ({ feature }) => {
-  const fields = [
-    ['Name', 'NUTS_NAME'],
-    ['Country', 'CNTR_NAME'],
-    ['NUTS level', 'LEVEL_CODE'],
-    ['NUTS ID', 'NUTS_ID'],
-    ['Bioregion', 'BIOGEO_REG_NAME'],
-    ['Area', 'SHAPE_Area'],
-  ];
-  return <FieldsDisplay feature={feature} fields={fields} />;
-};
-
-const FieldsDisplay = ({ feature, fields }) => (
-  <dl className="feature-info">
-    {fields.map(([label, name]) => (
-      <div key={name}>
-        <dt>{label}</dt>
-        <dd>{feature[name]}</dd>
-      </div>
-    ))}
-  </dl>
-);
-
-// {
-//   "feature": {
-//     "OBJECTID": 61,
-//     "CNTR_NAME": "Lithuania",
-//     "CNTR_CODE": "LT",
-//     "LEVEL_CODE": "LAU",
-//     "GISCO_ID": "LT_27",
-//     "LAU_ID": "27",
-//     "LAU_NAME": "Panevėžio miesto savivaldybė",
-//     "LAU_Name_Excel": "Panevėžys",
-//     "Aggregated": "*",
-//     "Value0": null,
-//     "CNTR_FLAG": "https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/4.1.4/flags/4x3/lt.svg"
-//   }
-// }
-
-const City = ({ feature }) => {
-  const fields = [
-    ['Name', 'LAU_NAME'],
-    ['Country', 'CNTR_NAME'],
-    ['Level', 'LEVEL_CODE'],
-    ['GISCO ID', 'GISCO_ID'],
-  ];
-  return <FieldsDisplay feature={feature} fields={fields} />;
-};
-
-export default function FeatureDisplay({ feature }) {
-  return feature ? (
-    <div>
-      {feature.NUTS_ID ? (
-        <NutsRegion feature={feature} />
-      ) : (
-        <City feature={feature} />
-      )}
-      <UniversalLink href={`/en/mkh/${feature.NUTS_ID || feature.GISCO_ID}`}>
-        Visit
-      </UniversalLink>
-    </div>
-  ) : null;
-}

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

@@ -1,56 +0,0 @@
-import React from 'react';
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
-import { useMapContext } from '@eeacms/volto-openlayers-map/api';
-
-export default function FeatureInteraction({ onFeatureSelect }) {
-  const { map } = useMapContext();
-
-  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,
-        }),
-      }),
-    [],
-  );
-
-  const selectStyle = React.useCallback(
-    (feature) => {
-      const color = feature.get('COLOR') || '#eeeeee';
-      selected.getFill().setColor(color);
-      return selected;
-    },
-    [selected],
-  );
-
-  React.useEffect(() => {
-    if (!map) return;
-    const select = new ol.interaction.Select({
-      condition: ol.condition.click,
-      style: selectStyle,
-    });
-    map.addInteraction(select);
-    select.on('select', function (e) {
-      const features = e.target.getFeatures().getArray();
-      features.forEach((feature) => {
-        onFeatureSelect(feature.values_);
-      });
-      // if (!features.length) onFeatureSelect(null);
-    });
-
-    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);
-  }, [map, selectStyle, onFeatureSelect]);
-
-  return null;
-}

package/src/components/manage/Blocks/MKHMap/InfoOverlay.jsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import { useMapContext } from '@eeacms/volto-openlayers-map/api';
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
-import FeatureDisplay from './FeatureDisplay';
-import { usePrevious } from '@plone/volto/helpers/Utils/usePrevious';
-
-const isCluster = (features) => {
-  return features.length > 1 ? true : features[0].values_?.features?.length > 1;
-};
-
-export default function InfoOverlay({
-  selectedFeature,
-  onFeatureSelect,
-  layerId,
-  hasCusters = false,
-}) {
-  const { map } = useMapContext();
-  const [tooltip, setTooltipRef] = React.useState();
-  const [showTooltip, setShowTooltip] = React.useState();
-
-  const prevLayerId = usePrevious(layerId);
-
-  const [isClient, setIsClient] = React.useState(false);
-  React.useEffect(() => setIsClient(true), []);
-
-  React.useEffect(() => {
-    if (prevLayerId && layerId !== prevLayerId) {
-      setShowTooltip(false);
-    }
-  }, [layerId, prevLayerId]);
-
-  React.useEffect(() => {
-    if (!(map && tooltip)) return;
-
-    const overlay = new ol.Overlay({
-      element: document.getElementById('popup-overlay'),
-      positioning: 'bottom-center',
-      offset: [10, -10],
-      stopEvent: false,
-    });
-    map.addOverlay(overlay);
-
-    function handler(evt) {
-      const coordinate = evt.coordinate;
-      const { pixel, target } = evt;
-      const features = target.getFeaturesAtPixel(pixel);
-
-      if (features.length && (hasCusters ? !isCluster(features) : true)) {
-        overlay.setPosition(coordinate);
-        setShowTooltip(true);
-      } else {
-        // handle a click in an overlay popup
-        if (evt.originalEvent.target.tagName === 'A') return;
-        setShowTooltip(false);
-        onFeatureSelect(null);
-      }
-    }
-
-    map.on('click', handler);
-
-    return () => {
-      map.un('click', handler);
-      map.removeOverlay(overlay);
-    };
-  }, [map, tooltip, onFeatureSelect, hasCusters]);
-
-  return isClient ? (
-    <div
-      id="popup-overlay"
-      style={{
-        position: 'absolute',
-        zIndex: 1,
-        visibility: showTooltip ? 'visible' : 'hidden',
-      }}
-      ref={setTooltipRef}
-    >
-      {selectedFeature ? <FeatureDisplay feature={selectedFeature} /> : null}
-    </div>
-  ) : null;
-}

package/src/components/manage/Blocks/MKHMap/View.jsx

@@ -1,118 +0,0 @@
-import React from 'react';
-import { Form, Radio } from 'semantic-ui-react';
-import {
-  Controls,
-  Interactions,
-  Layer,
-  Map,
-  Layers,
-} from '@eeacms/volto-openlayers-map/api';
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
-
-import * as layers from './layers';
-import FeatureInteraction from './FeatureInteraction';
-import InfoOverlay from './InfoOverlay';
-
-import './styles.less';
-
-function SourceSelector(props) {
-  const { id, choices, selected, onChange } = props;
-  return (
-    <Form>
-      <Form.Field>
-        <Radio
-          key="all"
-          label="All"
-          name={id}
-          value="all"
-          checked={selected.length === choices.length}
-          onChange={() => onChange(choices)}
-        />
-        {choices.map((name) => (
-          <Radio
-            key={name}
-            label={name}
-            name={id}
-            value={name}
-            checked={selected.length === 1 && selected.indexOf(name) > -1}
-            onChange={() => onChange([name])}
-          />
-        ))}
-      </Form.Field>
-    </Form>
-  );
-}
-
-export default function View(props) {
-  const [tileWMSSources, setTileWMSSources] = React.useState([]);
-  const [selectedFeature, onFeatureSelect] = React.useState();
-
-  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,
-      }),
-    ]);
-  }, []); // ol.source.TileWMS, ol.source.Vector
-
-  const [sources, setSources] = React.useState([Object.keys(layers)[2]]);
-
-  if (__SERVER__) return '';
-
-  return (
-    <div className="explore-sites-wrapper">
-      <SourceSelector
-        id="layer-selector"
-        choices={Object.keys(layers)}
-        selected={sources}
-        onChange={setSources}
-      />
-      <div id="explore-sites">
-        <Map
-          view={{
-            center: ol.proj.fromLonLat([20, 50]),
-            showFullExtent: true,
-            zoom: 5,
-          }}
-          pixelRatio={1}
-          controls={ol.control.defaults({ attribution: false })}
-        >
-          <Layers>
-            <InfoOverlay
-              selectedFeature={selectedFeature}
-              layerId={sources?.[0]}
-              hasClusters={false}
-            />
-            <Controls attribution={false} zoom={false} />
-            <Interactions
-              doubleClickZoom={true}
-              dragAndDrop={false}
-              dragPan={true}
-              keyboardPan={true}
-              keyboardZoom={true}
-              mouseWheelZoom={true}
-              pointer={true}
-              select={false}
-            />
-            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
-            {sources.map((name, index) => (
-              <Layer.Vector
-                key={name}
-                title={name}
-                zIndex={index}
-                {...layers[name]}
-              />
-            ))}
-            <FeatureInteraction onFeatureSelect={onFeatureSelect} />
-          </Layers>
-        </Map>
-      </div>
-    </div>
-  );
-}

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

@@ -1,25 +0,0 @@
-import MapBlockEdit from './Edit';
-import MapBlockView from './View';
-import worldSVG from '@plone/volto/icons/world.svg';
-import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
-
-export default (config) => {
-  config.blocks.blocksConfig.mkh_map = {
-    id: 'mkh_map',
-    title: 'MKH Viewer map',
-    icon: worldSVG,
-    group: 'site',
-    edit: MapBlockEdit,
-    view: MapBlockView,
-    sidebarTab: 1,
-    security: {
-      addPermission: [],
-      view: [],
-    },
-    restricted: ({ properties, block }) => {
-      return blockAvailableInMission(properties, block);
-    },
-  };
-
-  return config;
-};