@eeacms/volto-cca-policy 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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

@@ -54,7 +54,7 @@ const publicationDateFormatter = new Intl.DateTimeFormat('en-GB', {
   timeZone: 'UTC',
 });
 
-const TagGroup = ({ intl, typeLabel, values, type }) => {
+const TagGroup = ({ typeLabel, values, type }) => {
   const visible = values.slice(0, 3);
   const hidden = values.slice(3);
   const remaining = values.length - visible.length;
@@ -80,7 +80,13 @@ const TagGroup = ({ intl, typeLabel, values, type }) => {
           }
           position="bottom left"
           trigger={
-            <span className={`navigator-tag ${type} more`}>+ {remaining}</span>
+            <button
+              type="button"
+              className={`navigator-tag ${type} more`}
+              aria-label={`${typeLabel}: ${hidden.join(', ')}`}
+            >
+              + {remaining}
+            </button>
           }
         />
       )}
@@ -172,18 +178,8 @@ const NavigatorCatalogueCardItem = (props) => {
         </p>
 
         <div className="catalogue-taxonomy">
-          <TagGroup
-            intl={intl}
-            typeLabel={sectorLabel}
-            values={sectors}
-            type="sector"
-          />
-          <TagGroup
-            intl={intl}
-            typeLabel={hazardLabel}
-            values={hazards}
-            type="hazard"
-          />
+          <TagGroup typeLabel={sectorLabel} values={sectors} type="sector" />
+          <TagGroup typeLabel={hazardLabel} values={hazards} type="hazard" />
         </div>
 
         <div className="catalogue-item-footer">

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

@@ -115,6 +115,12 @@ describe('NavigatorCatalogueCardItem', () => {
     expect(screen.getByText('Agriculture')).toBeInTheDocument();
     expect(screen.getByText('Energy')).toBeInTheDocument();
     expect(screen.getByText('Wildfires')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Sector: Energy' }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Hazard: Wildfires' }),
+    ).toBeInTheDocument();
     expect(screen.getByText('Step 1')).toBeInTheDocument();
     expect(screen.queryByText('Step 4')).not.toBeInTheDocument();
     expect(

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

@@ -160,7 +160,7 @@ const NavigatorCatalogueContentView = (props) => {
         <ResultViewComponent>{children}</ResultViewComponent>
         <CompareToolsPanel appConfig={appConfig} />
 
-        {children.length > 0 && (
+        {children.length > 0 && activeNavigatorViewId !== 'map' && (
           <div className="search-body-footer">
             <Grid columns={2}>
               <Grid.Column>

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

@@ -1,11 +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 NavigatorCatalogueMapView = () => (
-  <div className="navigator-catalogue-map-placeholder">
-    <div>
-      <p>Map view.</p>
+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>
-  </div>
-);
+  );
+};
 
-export default NavigatorCatalogueMapView;
+/* 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

@@ -1,3 +1,59 @@
+/**
+ * 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;

package/src/components/theme/CompareTools/CompareToolsView.jsx

@@ -67,6 +67,10 @@ const messages = defineMessages({
     id: 'Open tool',
     defaultMessage: 'Open tool',
   },
+  removeTool: {
+    id: 'Remove {title} from comparison',
+    defaultMessage: 'Remove {title} from comparison',
+  },
   backToResults: {
     id: 'Back to results',
     defaultMessage: 'Back to results',
@@ -319,7 +323,7 @@ const CompareToolsView = () => {
         )}
 
         {!isLoading && hasEnoughTools && (
-          <Table celled>
+          <Table celled aria-label={compareToolsTitle} unstackable>
             <Table.Header>
               <Table.Row>
                 <Table.HeaderCell>
@@ -353,9 +357,12 @@ const CompareToolsView = () => {
                         )}
                         <Button
                           className="icon compare-tool-clear"
+                          aria-label={intl.formatMessage(messages.removeTool, {
+                            title: tool.title,
+                          })}
                           onClick={() => removeTool(tool.id)}
                         >
-                          <Icon className="ri-close-line" />
+                          <Icon className="ri-close-line" aria-hidden="true" />
                         </Button>
                       </div>
                     </div>
@@ -365,7 +372,7 @@ const CompareToolsView = () => {
             </Table.Header>
             <Table.Body>
               <Table.Row>
-                <Table.Cell>
+                <Table.Cell as="th" scope="row">
                   <div className="compare-criteria">
                     <div className="compare-criteria-title">
                       {intl.formatMessage(messages.usability)}
@@ -381,7 +388,7 @@ const CompareToolsView = () => {
                 ))}
               </Table.Row>
               <Table.Row>
-                <Table.Cell>
+                <Table.Cell as="th" scope="row">
                   <div className="compare-criteria">
                     <div className="compare-criteria-title">
                       {intl.formatMessage(messages.functionality)}
@@ -399,7 +406,7 @@ const CompareToolsView = () => {
                 ))}
               </Table.Row>
               <Table.Row>
-                <Table.Cell>
+                <Table.Cell as="th" scope="row">
                   <div className="compare-criteria">
                     <div className="compare-criteria-title">
                       {intl.formatMessage(messages.spatialScale)}
@@ -413,7 +420,7 @@ const CompareToolsView = () => {
                 ))}
               </Table.Row>
               <Table.Row>
-                <Table.Cell>
+                <Table.Cell as="th" scope="row">
                   <div className="compare-criteria">
                     <div className="compare-criteria-title">
                       {intl.formatMessage(messages.outputType)}
@@ -427,7 +434,7 @@ const CompareToolsView = () => {
                 ))}
               </Table.Row>
               <Table.Row>
-                <Table.Cell>
+                <Table.Cell as="th" scope="row">
                   <div className="compare-criteria">
                     <div className="compare-criteria-title">
                       {intl.formatMessage(messages.adaptationSupportCycleStep)}
@@ -444,7 +451,7 @@ const CompareToolsView = () => {
                 ))}
               </Table.Row>
               <Table.Row>
-                <Table.Cell>
+                <Table.Cell as="th" scope="row">
                   <div className="compare-criteria">
                     <div className="compare-criteria-title">
                       {intl.formatMessage(messages.sector)}