@eeacms/volto-cca-policy 0.3.46 → 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/components/theme/MissionSignatoryProfile/MissionSignatoryProfileView.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
-import { Tab, Container, Divider } from 'semantic-ui-react';
+import { Link } from 'react-router-dom';
+import { Tab, Container, Divider, Button, Icon } from 'semantic-ui-react';
 import { formatTextToHTML } from '@eeacms/volto-cca-policy/utils';
 import { BannerTitle, HTMLField } from '@eeacms/volto-cca-policy/helpers';
+import { flattenToAppURL } from '@plone/volto/helpers';
 
 import GovernanceTab from './TabSections/GovernanceTab';
 import AssessmentTab from './TabSections/AssessmentTab';
@@ -29,6 +31,9 @@ const MissionSignatoryProfileView = ({ content }) => {
     general_text = [{}],
   } = signatoryData;
 
+  const { Back_To_Map_Link, Country_Or_Area } = general_text?.[0] || {};
+  const backToMapPath = flattenToAppURL(content?.parent?.['@id'] || '/');
+
   const [activeIndex, setActiveIndex] = React.useState(0);
 
   const tabData = {
@@ -60,12 +65,18 @@ const MissionSignatoryProfileView = ({ content }) => {
           hidePublishingDate: true,
           hideDownloadButton: false,
           hideShareButton: false,
-          subtitle: general_text?.[0]?.Country_Or_Area,
+          subtitle: Country_Or_Area,
         }}
       />
 
       <div className="signatory-profile">
-        <br />
+        <Link to={backToMapPath}>
+          <Button icon inverted primary className="left labeled back-to-map">
+            <Icon className="chevron left icon" />
+            {Back_To_Map_Link || 'Back to Signatories map'}
+          </Button>
+        </Link>
+
         <Tab
           menu={{
             fluid: true,

package/src/components/theme/MissionSignatoryProfile/MissionSignatoryProfileView.test.jsx

@@ -1,4 +1,5 @@
 import { render, fireEvent, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import '@testing-library/jest-dom';
 import MissionSignatoryProfileView from './MissionSignatoryProfileView';
 
@@ -38,15 +39,25 @@ describe('MissionSignatoryProfileView', () => {
             { key: 'Action_Label', value: 'Action' },
             { key: 'Language', value: 'en' },
           ],
+          general_text: [
+            {
+              Back_To_Map_Link: 'Back to map',
+              Country_Or_Area: 'Testland',
+            },
+          ],
         },
       },
     },
+    parent: {
+      '@id': '/signatories-map',
+    },
   };
 
+  const renderWithRouter = (ui) => render(<MemoryRouter>{ui}</MemoryRouter>);
+
   it('renders tab labels and default content', () => {
-    render(<MissionSignatoryProfileView content={content} />);
+    renderWithRouter(<MissionSignatoryProfileView content={content} />);
 
-    // Tab labels
     expect(screen.getByText('Governance')).toBeInTheDocument();
     expect(screen.getByText('Assessment')).toBeInTheDocument();
     expect(screen.getByText('Planning & Target')).toBeInTheDocument();
@@ -54,7 +65,7 @@ describe('MissionSignatoryProfileView', () => {
   });
 
   it('switches tabs and renders corresponding content', () => {
-    render(<MissionSignatoryProfileView content={content} />);
+    renderWithRouter(<MissionSignatoryProfileView content={content} />);
 
     fireEvent.click(screen.getByText('Governance'));
     expect(screen.getByText('Mocked Governance')).toBeInTheDocument();
@@ -70,10 +81,10 @@ describe('MissionSignatoryProfileView', () => {
   });
 
   it('renders footer disclaimer text if present', () => {
-    render(<MissionSignatoryProfileView content={content} />);
+    renderWithRouter(<MissionSignatoryProfileView content={content} />);
     expect(screen.getByText('Disclaimer Title')).toBeInTheDocument();
     expect(
-      screen.getByText((content) => content.includes('This is a disclaimer.')),
+      screen.getByText((text) => text.includes('This is a disclaimer.')),
     ).toBeInTheDocument();
   });
 });

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/theme/globals/mission.less

@@ -123,6 +123,19 @@ body.subsite-mkh {
       margin: 2em 0 !important;
     }
 
+    .ui.inverted.button.back-to-map {
+      margin-bottom: 2em;
+      box-shadow: 0px 0px 0px 2px @pineGreen inset !important;
+      color: @pineGreen;
+
+      &:hover,
+      &:active,
+      &:focus,
+      &:focus-visible {
+        background-color: @pineGreen;
+      }
+    }
+
     .column > .ui.segment {
       background-color: #fff !important;
     }

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;
-}