@eeacms/volto-cca-policy 1.0.2 → 1.0.4

package/src/components/Search/NavigatorCatalogue/NavigatorCatalogueMapView.jsx

@@ -0,0 +1,272 @@
+import React from 'react';
+import { compose } from 'redux';
+import { Icon, Button } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useSearchContext, useViews } from '@eeacms/search/lib/hocs';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
+import { useMapContext } from '@eeacms/volto-openlayers-map/api';
+import { Map, Layer, Layers, Controls } from '@eeacms/volto-openlayers-map/api';
+import { withGeoJsonData } from '@eeacms/volto-cca-policy/helpers/country_map/hocs';
+import { euCountryNames } from '@eeacms/volto-cca-policy/helpers/country_map/countryMap';
+import { clientOnly } from '@eeacms/volto-cca-policy/helpers';
+import {
+  withResponsiveContainer,
+  withVisibilitySensor,
+} from '@eeacms/volto-cca-policy/hocs';
+import {
+  getColorForCount,
+  normalizeCountryName,
+  buildCountryCounts,
+  mapLegendItems,
+} from './utils';
+
+const messages = defineMessages({
+  toolAvailability: {
+    id: '{count, plural, =0 {No tools available} one {# tool available} other {# tools available}}',
+    defaultMessage:
+      '{count, plural, =0 {No tools available} one {# tool available} other {# tools available}}',
+  },
+  exploreTools: {
+    id: 'Explore tools',
+    defaultMessage: 'Explore tools',
+  },
+  toolsPerCountry: {
+    id: 'Tools per country',
+    defaultMessage: 'Tools per country',
+  },
+  close: {
+    id: 'Close',
+    defaultMessage: 'Close',
+  },
+});
+
+/* istanbul ignore next */
+const CountryClickInteractions = ({ ol, countryCounts, onExploreTools }) => {
+  const { map } = useMapContext();
+  const intl = useIntl();
+  const [tooltipData, setTooltipData] = React.useState(null);
+
+  React.useEffect(() => {
+    if (!map) return;
+
+    const handleClick = (evt) => {
+      if (evt.dragging) return;
+      const pixel = map.getEventPixel(evt.originalEvent);
+      const feature = map.forEachFeatureAtPixel(pixel, (f) => f);
+      if (!feature) {
+        setTooltipData(null);
+        return;
+      }
+
+      const name = feature.get('na');
+      const normalized = normalizeCountryName(name);
+      const count = countryCounts[normalized] || 0;
+
+      setTooltipData({
+        name: normalized,
+        count,
+        pixel: [evt.originalEvent.clientX, evt.originalEvent.clientY],
+        mapRect: map.getTargetElement().getBoundingClientRect(),
+      });
+    };
+
+    const handlePointerMove = (evt) => {
+      if (evt.dragging) return;
+      const pixel = map.getEventPixel(evt.originalEvent);
+      const feature = map.forEachFeatureAtPixel(pixel, (f) => f);
+      map.getTargetElement().style.cursor = feature ? 'pointer' : '';
+    };
+
+    map.on('singleclick', handleClick);
+    map.on('pointermove', handlePointerMove);
+
+    return () => {
+      map.un('singleclick', handleClick);
+      map.un('pointermove', handlePointerMove);
+    };
+  }, [map, countryCounts]);
+
+  // Render tooltip as a portal-like overlay
+  return (
+    <>
+      {tooltipData && (
+        <div
+          className="navigator-catalogue-map-tooltip"
+          style={{
+            left: `${tooltipData.pixel[0] - tooltipData.mapRect.left + 15}px`,
+            top: `${tooltipData.pixel[1] - tooltipData.mapRect.top - 10}px`,
+          }}
+        >
+          <div className="tooltip-header">
+            <strong>{tooltipData.name}</strong>
+          </div>
+          <div className="tooltip-body">
+            <span className="tooltip-count">
+              {intl.formatMessage(messages.toolAvailability, {
+                count: tooltipData.count,
+              })}
+            </span>
+          </div>
+          {tooltipData.count > 0 && (
+            <div className="tooltip-actions">
+              <Button
+                labelPosition="right"
+                className="primary small icon"
+                onClick={() => onExploreTools(tooltipData.name)}
+              >
+                {intl.formatMessage(messages.exploreTools)}
+                <Icon className="ri-arrow-right-line" />
+              </Button>
+            </div>
+          )}
+          <Button
+            className="tooltip-close"
+            onClick={() => setTooltipData(null)}
+            aria-label={intl.formatMessage(messages.close)}
+          >
+            <Icon className="ri-close-line" aria-hidden="true" />
+          </Button>
+        </div>
+      )}
+    </>
+  );
+};
+
+/* istanbul ignore next */
+const NavigatorCatalogueMapViewInner = (props) => {
+  const { geofeatures, projection, ol } = props;
+  const intl = useIntl();
+  const searchContext = useSearchContext();
+  const views = useViews();
+
+  // Handler: replace country filter + switch to list view
+  const handleExploreTools = React.useCallback(
+    (countryName) => {
+      const field = 'cca_geographic_countries.keyword';
+      // Clear existing country filter, then set the new one
+      searchContext?.removeFilter(field);
+      searchContext?.addFilter(field, countryName, 'any');
+      // Switch to listing view
+      views.setActiveViewId('listing');
+    },
+    [searchContext, views],
+  );
+
+  // Build lookup: countryName -> count
+  const countryCounts = React.useMemo(
+    () => buildCountryCounts(searchContext?.facets),
+    [searchContext?.facets],
+  );
+
+  const [tileWMSSources, setTileWMSSources] = React.useState(null);
+  const [euCountriesSource, setEuCountriesSource] = React.useState(null);
+
+  React.useEffect(() => {
+    // Tile layer
+    setTileWMSSources([
+      new ol.source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMBrightBackground',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
+    ]);
+
+    // Country vector layer with per-feature styles
+    const features = new ol.format.GeoJSON().readFeatures(geofeatures, {
+      dataProjection: 'EPSG:4326',
+      featureProjection: 'EPSG:3857',
+    });
+    const filtered = features.filter((f) =>
+      euCountryNames.includes(f.get('na')),
+    );
+
+    // Apply style to each feature
+    filtered.forEach((feature) => {
+      const name = feature.get('na');
+      const normalized = normalizeCountryName(name);
+      const count = countryCounts[normalized] || 0;
+      const fillColor = getColorForCount(count);
+
+      feature.setStyle(
+        new ol.style.Style({
+          stroke: new ol.style.Stroke({
+            color: '#333333',
+            width: 1,
+          }),
+          fill: new ol.style.Fill({
+            color: fillColor,
+          }),
+        }),
+      );
+    });
+
+    setEuCountriesSource(new ol.source.Vector({ features: filtered }));
+  }, [geofeatures, ol, countryCounts]);
+
+  if (!tileWMSSources || !euCountriesSource) {
+    return (
+      <div className="navigator-catalogue-map-loading">
+        <i className="icon loading" />
+        Loading map...
+      </div>
+    );
+  }
+
+  return (
+    <div className="navigator-catalogue-map">
+      <div className="navigator-catalogue-map-canvas">
+        <Map
+          view={{
+            center: ol.proj.fromLonLat([14.5, 57], projection),
+            projection,
+            showFullExtent: true,
+            zoom: 3.6,
+          }}
+          pixelRatio={1}
+        >
+          <Controls attribution={false} />
+          <Layers>
+            <CountryClickInteractions
+              ol={ol}
+              countryCounts={countryCounts}
+              onExploreTools={handleExploreTools}
+            />
+            <Layer.Vector source={euCountriesSource} zIndex={2} />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
+          </Layers>
+        </Map>
+      </div>
+
+      <aside
+        className="navigator-catalogue-map-legend"
+        aria-label={intl.formatMessage(messages.toolsPerCountry)}
+      >
+        <h4 className="legend-title">
+          {intl.formatMessage(messages.toolsPerCountry)}
+        </h4>
+        {mapLegendItems.map((item) => (
+          <div key={item.label} className="legend-item">
+            <span
+              className="legend-color"
+              style={{ backgroundColor: item.color }}
+            />
+            <span>{item.label}</span>
+          </div>
+        ))}
+      </aside>
+    </div>
+  );
+};
+
+/* istanbul ignore next */
+export default compose(
+  clientOnly,
+  withGeoJsonData(true),
+  withResponsiveContainer('navigatorCatalogueMap'),
+  withVisibilitySensor(),
+  withOpenLayers,
+)(NavigatorCatalogueMapViewInner);

package/src/components/Search/NavigatorCatalogue/NavigatorCatalogueMapView.test.jsx

@@ -0,0 +1,160 @@
+import '@testing-library/jest-dom';
+import {
+  getColorForCount,
+  normalizeCountryName,
+  buildCountryCounts,
+  mapLegendItems,
+} from './utils';
+
+describe('getColorForCount', () => {
+  it('returns darkest green for 10+ tools', () => {
+    expect(getColorForCount(10)).toBe('#0a5c4e');
+    expect(getColorForCount(15)).toBe('#0a5c4e');
+    expect(getColorForCount(100)).toBe('#0a5c4e');
+  });
+
+  it('returns dark green for 7-9 tools', () => {
+    expect(getColorForCount(7)).toBe('#0d7a68');
+    expect(getColorForCount(8)).toBe('#0d7a68');
+    expect(getColorForCount(9)).toBe('#0d7a68');
+  });
+
+  it('returns base accent green for 4-6 tools', () => {
+    expect(getColorForCount(4)).toBe('#289588');
+    expect(getColorForCount(5)).toBe('#289588');
+    expect(getColorForCount(6)).toBe('#289588');
+  });
+
+  it('returns light green for 1-3 tools', () => {
+    expect(getColorForCount(1)).toBe('#6fc4b8');
+    expect(getColorForCount(2)).toBe('#6fc4b8');
+    expect(getColorForCount(3)).toBe('#6fc4b8');
+  });
+
+  it('returns lightest gray-green for 0 or falsy counts', () => {
+    expect(getColorForCount(0)).toBe('#e8eded');
+    expect(getColorForCount(null)).toBe('#e8eded');
+    expect(getColorForCount(undefined)).toBe('#e8eded');
+  });
+});
+
+describe('normalizeCountryName', () => {
+  it('normalizes Türkiye to Turkey', () => {
+    expect(normalizeCountryName('Türkiye')).toBe('Turkey');
+  });
+
+  it('normalizes Czech Rep. to Czechia', () => {
+    expect(normalizeCountryName('Czech Rep.')).toBe('Czechia');
+  });
+
+  it('normalizes Bosnia and Herz. to Bosnia and Herzegovina', () => {
+    expect(normalizeCountryName('Bosnia and Herz.')).toBe(
+      'Bosnia and Herzegovina',
+    );
+  });
+
+  it('returns unchanged name for non-special countries', () => {
+    expect(normalizeCountryName('Germany')).toBe('Germany');
+    expect(normalizeCountryName('Italy')).toBe('Italy');
+    expect(normalizeCountryName('France')).toBe('France');
+    expect(normalizeCountryName('Spain')).toBe('Spain');
+  });
+
+  it('handles null and undefined', () => {
+    expect(normalizeCountryName(null)).toBeNull();
+    expect(normalizeCountryName(undefined)).toBeUndefined();
+  });
+});
+
+describe('buildCountryCounts', () => {
+  it('builds correct lookup from facet data array', () => {
+    const facets = {
+      'cca_geographic_countries.keyword': [
+        {
+          field: 'cca_geographic_countries.keyword',
+          type: 'value',
+          data: [
+            { value: 'Germany', count: 5 },
+            { value: 'Italy', count: 3 },
+            { value: 'France', count: 1 },
+          ],
+        },
+      ],
+    };
+
+    const counts = buildCountryCounts(facets);
+    expect(counts).toEqual({
+      Germany: 5,
+      Italy: 3,
+      France: 1,
+    });
+  });
+
+  it('handles empty facet data', () => {
+    const facets = {
+      'cca_geographic_countries.keyword': [
+        { field: 'cca_geographic_countries.keyword', data: [] },
+      ],
+    };
+    const counts = buildCountryCounts(facets);
+    expect(Object.keys(counts)).toHaveLength(0);
+  });
+
+  it('handles missing facet gracefully', () => {
+    const facets = {};
+    const counts = buildCountryCounts(facets);
+    expect(counts).toEqual({});
+  });
+
+  it('handles undefined facets gracefully', () => {
+    const counts = buildCountryCounts(undefined);
+    expect(counts).toEqual({});
+  });
+
+  it('handles null facets gracefully', () => {
+    const counts = buildCountryCounts(null);
+    expect(counts).toEqual({});
+  });
+
+  it('handles non-array facet value', () => {
+    const facets = {
+      'cca_geographic_countries.keyword': {
+        data: [{ value: 'Germany', count: 5 }],
+      },
+    };
+    const counts = buildCountryCounts(facets);
+    expect(counts).toEqual({ Germany: 5 });
+  });
+
+  it('handles missing count values', () => {
+    const facets = {
+      'cca_geographic_countries.keyword': [{ data: [{ value: 'Germany' }] }],
+    };
+    const counts = buildCountryCounts(facets);
+    expect(counts.Germany).toBeUndefined();
+  });
+});
+
+describe('mapLegendItems', () => {
+  it('has 5 legend items', () => {
+    expect(mapLegendItems).toHaveLength(5);
+  });
+
+  it('colors match getColorForCount scale', () => {
+    expect(mapLegendItems[0].color).toBe(getColorForCount(10));
+    expect(mapLegendItems[1].color).toBe(getColorForCount(7));
+    expect(mapLegendItems[2].color).toBe(getColorForCount(4));
+    expect(mapLegendItems[3].color).toBe(getColorForCount(1));
+    expect(mapLegendItems[4].color).toBe(getColorForCount(0));
+  });
+
+  it('has correct labels', () => {
+    expect(mapLegendItems.map((item) => item.label)).toEqual([
+      '10+',
+      '7–9',
+      '4–6',
+      '1–3',
+      'None',
+    ]);
+  });
+});

package/src/components/Search/NavigatorCatalogue/utils.js

@@ -0,0 +1,157 @@
+/**
+ * Color scale for tool counts (EEA green tones)
+ * Used by the map view to color-code countries
+ */
+export const getColorForCount = (count) => {
+  if (count >= 10) return '#0a5c4e'; // darkest
+  if (count >= 7) return '#0d7a68';
+  if (count >= 4) return '#289588'; // base accent
+  if (count >= 1) return '#6fc4b8'; // light
+  return '#e8eded'; // none (very light gray-green)
+};
+
+/**
+ * Normalize country names between GeoJSON and facet data
+ */
+export const normalizeCountryName = (name) => {
+  if (!name) return name;
+  const normalizer = {
+    Türkiye: 'Turkey',
+    'United Kingdom': 'United Kingdom',
+    'Czech Rep.': 'Czechia',
+    'Bosnia and Herz.': 'Bosnia and Herzegovina',
+  };
+  return normalizer[name] || name;
+};
+
+/**
+ * Build a country -> count lookup from facet data
+ * @param {Object} facets - searchContext.facets
+ * @returns {Object} countryName -> count
+ */
+export const buildCountryCounts = (facets) => {
+  const countriesFacetArray = facets?.['cca_geographic_countries.keyword'];
+  const countriesFacet = Array.isArray(countriesFacetArray)
+    ? countriesFacetArray[0]
+    : countriesFacetArray;
+  const countryData = countriesFacet?.data || [];
+
+  const counts = {};
+  countryData.forEach((entry) => {
+    counts[entry.value] = entry.count;
+  });
+  return counts;
+};
+
+/**
+ * Legend items for the map view
+ */
+export const mapLegendItems = [
+  { label: '10+', color: '#0a5c4e' },
+  { label: '7–9', color: '#0d7a68' },
+  { label: '4–6', color: '#289588' },
+  { label: '1–3', color: '#6fc4b8' },
+  { label: 'None', color: '#e8eded' },
+];
+
+export const asArray = (value) => {
+  if (!value) return [];
+  const raw = value.raw !== undefined ? value.raw : value;
+  if (!raw) return [];
+  const values = Array.isArray(raw)
+    ? raw.filter(Boolean)
+    : [raw].filter(Boolean);
+
+  return values.map((value) => value?.title || value?.token || value);
+};
+
+export const arrayFieldToString = (value) => asArray(value).join(', ');
+
+export const formatFunctionalityScore = (value) => {
+  const raw = value?.raw !== undefined ? value.raw : value;
+  const score = raw === null || raw === undefined ? Number.NaN : Number(raw);
+
+  return Number.isFinite(score) ? `${Math.min(6, Math.max(0, score))}/6` : '—';
+};
+
+export const escapeCsvValue = (value) => {
+  const stringValue = value === undefined || value === null ? '' : `${value}`;
+  return `"${stringValue.replace(/"/g, '""')}"`;
+};
+
+export const downloadCsv = (filename, rows) => {
+  const csv = rows.map((row) => row.map(escapeCsvValue).join(',')).join('\n');
+
+  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+
+  link.href = url;
+  link.setAttribute('download', filename);
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+
+  URL.revokeObjectURL(url);
+};
+
+export const getLocalizedLandingPageURL = (appConfig, currentLang = 'en') => {
+  const lang = currentLang || 'en';
+  const landingPageURL =
+    appConfig?.landingPageURL || '/en/navigator/tool-catalogue';
+
+  return landingPageURL.replace(/^\/en(?=\/|$)/, `/${lang}`);
+};
+
+export const getComparePageURL = (appConfig, currentLang = 'en') => {
+  const lang = currentLang || 'en';
+  const comparePageURL = appConfig?.comparePageURL || '/en/navigator/compare';
+
+  return comparePageURL.replace(/^\/en(?=\/|$)/, `/${lang}`);
+};
+
+export const exportComparisonTable = (tools, getToolField) => {
+  const rows = [
+    ['Criteria', ...tools.map((tool) => tool.title)],
+    [
+      'Usability',
+      ...tools.map((tool) =>
+        arrayFieldToString(getToolField(tool, 'accessibility_and_usability')),
+      ),
+    ],
+    [
+      'Functionality',
+      ...tools.map((tool) =>
+        formatFunctionalityScore(getToolField(tool, 'functionality')),
+      ),
+    ],
+    [
+      'Spatial scale',
+      ...tools.map((tool) =>
+        arrayFieldToString(getToolField(tool, 'cca_geographical_scale')),
+      ),
+    ],
+    [
+      'Output type',
+      ...tools.map((tool) =>
+        arrayFieldToString(getToolField(tool, 'cca_type_of_outputs')),
+      ),
+    ],
+    [
+      'Adaptation support cycle step',
+      ...tools.map((tool) =>
+        arrayFieldToString(
+          getToolField(tool, 'cca_adaptation_support_cycle_step'),
+        ),
+      ),
+    ],
+    [
+      'Sector',
+      ...tools.map((tool) =>
+        arrayFieldToString(getToolField(tool, 'cca_adaptation_sectors')),
+      ),
+    ],
+  ];
+
+  downloadCsv('navigator-catalogue-comparison.csv', rows);
+};