@eeacms/volto-cca-policy 1.0.35 → 1.0.36

package/CHANGELOG.md

@@ -4,6 +4,17 @@ 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).
 
+### [1.0.36](https://github.com/eea/volto-cca-policy/compare/1.0.35...1.0.36) - 8 October 2026
+
+#### :rocket: New Features
+
+- feat(navigator): update geographic coverage functionality, add runtime mappings and facet value retrieval [kreafox - [`4787c3b`](https://github.com/eea/volto-cca-policy/commit/4787c3b890b69d46ee0806084983ac3c0f36fe43)]
+- feat: add tooltips for usability and functionality criteria in CompareToolsView - refs #304612 [kreafox - [`d23175c`](https://github.com/eea/volto-cca-policy/commit/d23175c7e3e1df85e2c75deba6612be3dd94b88d)]
+
+#### :nail_care: Enhancements
+
+- refactor(navigator): clean up imports and test files [kreafox - [`4a79b41`](https://github.com/eea/volto-cca-policy/commit/4a79b414b713d387af0fcf7baefd699da747cdac)]
+
 ### [1.0.35](https://github.com/eea/volto-cca-policy/compare/1.0.34...1.0.35) - 6 October 2026
 
 #### :bug: Bug Fixes
@@ -615,8 +626,42 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - test: pin Chromium version 149 to work with Cypress [valentinab25 - [`659ec82`](https://github.com/eea/volto-cca-policy/commit/659ec823dd71fe592a3a7accda22effbe1fb07bc)]
-## [1.0.0](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.31...1.0.0) - 12 June 2026
+## [1.0.0](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.33...1.0.0) - 12 June 2026
+
+### [1.0.0-alpha.33](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.32...1.0.0-alpha.33) - 7 October 2026
+
+### [1.0.0-alpha.32](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.31...1.0.0-alpha.32) - 7 October 2026
+
+#### :bug: Bug Fixes
+
+- fix(test): add waitFor to image load assertions [kreafox - [`84eed2e`](https://github.com/eea/volto-cca-policy/commit/84eed2e15a911d9a8a4a1d20e7d29b3de261bb7d)]
+
+#### :nail_care: Enhancements
 
+- change(navigator): conditionally render result count based on selections [kreafox - [`0ed5449`](https://github.com/eea/volto-cca-policy/commit/0ed54490c16c9a5b4652fd1de47adbad8d2c8256)]
+- change(NavigatorGuide): implement sorting for guide options - refs #304612 [kreafox - [`4ffcbff`](https://github.com/eea/volto-cca-policy/commit/4ffcbff4f98a2c95b1c88dfc0f662c2906678c13)]
+- change(navigator): implement default sorting in guide me tools listing - refs #304612 [kreafox - [`a9f7fb3`](https://github.com/eea/volto-cca-policy/commit/a9f7fb31b276ed2c28d0fa24b800bebfd0ff5425)]
+- change(CatalogueChatView): remove CompareToolsPanel and update tests - refs #309337 [kreafox - [`a5bb420`](https://github.com/eea/volto-cca-policy/commit/a5bb420e8a3229b1a04fd38f36ee87266bb0e59d)]
+- change(locales): update translations [kreafox - [`4541062`](https://github.com/eea/volto-cca-policy/commit/45410626484ff0cc536447ff75895b662e3e9554)]
+- change(navigator): update adaptation stage questions [kreafox - [`a1e3705`](https://github.com/eea/volto-cca-policy/commit/a1e3705f1004777ce72a1395f89149c9d8f8e539)]
+- change(locales): add "Governance level" translations [kreafox - [`23ae204`](https://github.com/eea/volto-cca-policy/commit/23ae2046557203a55b2dd40b761ed99e84b78d80)]
+- change(navigator): update implementation level messages to governance level [kreafox - [`f28a93e`](https://github.com/eea/volto-cca-policy/commit/f28a93e408ba24a81ac27229947de1b959a5c42b)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`3a0597d`](https://github.com/eea/volto-cca-policy/commit/3a0597dd9358ba2c7f365bef9d3e4ffae36ee68b)]
+- style: Automated code fix [eea-jenkins - [`d91a798`](https://github.com/eea/volto-cca-policy/commit/d91a798f30b29e4bc058cc44ebcc02f07ac216ab)]
+
+#### :hammer_and_wrench: Others
+
+- update SonarQube messages [iugin - [`cf21375`](https://github.com/eea/volto-cca-policy/commit/cf21375202f946f7adb2959db45cb0e991bfae68)]
+- add mapstyle test [iugin - [`e80b843`](https://github.com/eea/volto-cca-policy/commit/e80b8438e6ff47cb73e43cc8927511e7b8979a8f)]
+- remove test [iugin - [`dcd7fb2`](https://github.com/eea/volto-cca-policy/commit/dcd7fb2873101fd7c0e6612e0eb11012b18412a3)]
+- Refs #296263 - add more tests [iugin - [`898d8e7`](https://github.com/eea/volto-cca-policy/commit/898d8e7878e49a7e777c749e1f88dc6c94ce416b)]
+- Refs #296263 - update tests img alt [iugin - [`1f720a8`](https://github.com/eea/volto-cca-policy/commit/1f720a83b389cb1cb5dbed33c96418fc8def73d9)]
+- Refs #296263 - add tests [iugin - [`c9012e0`](https://github.com/eea/volto-cca-policy/commit/c9012e0e7ca850acda608459e9b78c70f37e7ad4)]
+- Refs #296263 - duplication country profile mapstyle [iugin - [`a6771e9`](https://github.com/eea/volto-cca-policy/commit/a6771e921bcdc6b9ce2f0f9f40413a2fefe78e84)]
+- Refs #296263 - duplicate content [iugin - [`400b661`](https://github.com/eea/volto-cca-policy/commit/400b6618cc3fb50df44f9007253aeaba5e5d36b0)]
 ### [1.0.0-alpha.31](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.30...1.0.0-alpha.31) - 2 October 2026
 
 #### :rocket: New Features

package/package.json

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

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

@@ -4,11 +4,11 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Term } from '@eeacms/search/components';
 import { useSearchContext } from '@eeacms/search/lib/hocs';
 import { markSelectedFacetValuesFromFilters } from '@eeacms/search/lib/search/helpers';
-
-export const CHARACTERISATION_FIELD = 'cca_geographic_characterisation.keyword';
-export const TRANSNATIONAL_REGION_FIELD =
-  'cca_geographic_transnational_region.keyword';
-export const COUNTRIES_FIELD = 'cca_geographic_countries.keyword';
+import {
+  CHARACTERISATION_FIELD,
+  COUNTRIES_FIELD,
+  TRANSNATIONAL_REGION_FIELD,
+} from '../../../search/navigator_catalogue/geographicCoverage';
 
 const messages = defineMessages({
   noOptionsAvailable: {
@@ -196,29 +196,53 @@ const NavigatorGeographicCoverageFacet = ({
     TRANSNATIONAL_REGION_FIELD,
   );
   const countryOptions = getFacetOptions(facets, filters, COUNTRIES_FIELD);
+  const selectedDirectValues =
+    filters.find(({ field }) => field === CHARACTERISATION_FIELD)?.values || [];
+
+  const clearFilter = (field) => removeFilter(field, null, 'any');
+
+  const updateDirectFilter = (option) => {
+    if (option.selected) {
+      onRemove(option.value);
+      return;
+    }
+
+    clearFilter(COUNTRIES_FIELD);
+    clearFilter(TRANSNATIONAL_REGION_FIELD);
+    onSelect(option.value);
+  };
 
-  const updateChildFilter = (field, option) =>
-    option.selected
-      ? removeFilter(field, option.value, 'any')
-      : addFilter(field, option.value, 'any');
+  const updateChildFilter = (field, option) => {
+    if (option.selected) {
+      removeFilter(field, option.value, 'any');
+      return;
+    }
+
+    clearFilter(CHARACTERISATION_FIELD);
+    addFilter(field, option.value, 'any');
+  };
 
   return (
     <fieldset
       className={`sui-facet searchlib-multiterm-facet navigator-geographic-facet ${className}`}
     >
       <div className="sui-multi-checkbox-facet navigator-geographic-facet-direct-options">
-        {options.map((option) => (
-          <FacetOption
-            key={valueAsText(option.value)}
-            field={CHARACTERISATION_FIELD}
-            option={option}
-            onChange={(selectedOption) =>
-              selectedOption.selected
-                ? onRemove(selectedOption.value)
-                : onSelect(selectedOption.value)
-            }
-          />
-        ))}
+        {options.map((option) => {
+          const directOption = {
+            ...option,
+            selected:
+              option.selected || selectedDirectValues.includes(option.value),
+          };
+
+          return (
+            <FacetOption
+              key={valueAsText(option.value)}
+              field={CHARACTERISATION_FIELD}
+              option={directOption}
+              onChange={updateDirectFilter}
+            />
+          );
+        })}
       </div>
       <ExpandableFacetGroup
         field={COUNTRIES_FIELD}

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

@@ -3,10 +3,12 @@ import '@testing-library/jest-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { useSearchContext } from '@eeacms/search/lib/hocs';
-import NavigatorGeographicCoverageFacet, {
+import NavigatorGeographicCoverageFacet from './NavigatorGeographicCoverageFacet';
+import {
+  CHARACTERISATION_FIELD,
   COUNTRIES_FIELD,
   TRANSNATIONAL_REGION_FIELD,
-} from './NavigatorGeographicCoverageFacet';
+} from '../../../search/navigator_catalogue/geographicCoverage';
 
 jest.mock('@eeacms/search/components', () => ({
   Term: ({ term }) => <>{term}</>,
@@ -16,6 +18,7 @@ jest.mock('@eeacms/search/lib/hocs', () => ({
 }));
 
 const renderFacet = ({
+  detailedOptions = true,
   filters = [],
   onRemove = jest.fn(),
   onSelect = jest.fn(),
@@ -30,18 +33,22 @@ const renderFacet = ({
     facets: {
       [TRANSNATIONAL_REGION_FIELD]: [
         {
-          data: [
-            { value: 'Alpine Space', count: 3 },
-            { value: 'Outermost regions', count: 2 },
-          ],
+          data: detailedOptions
+            ? [
+                { value: 'Alpine Space', count: 3 },
+                { value: 'Outermost regions', count: 2 },
+              ]
+            : [],
         },
       ],
       [COUNTRIES_FIELD]: [
         {
-          data: [
-            { value: 'Germany', count: 4 },
-            { value: 'Spain', count: 2 },
-          ],
+          data: detailedOptions
+            ? [
+                { value: 'Germany', count: 4 },
+                { value: 'Spain', count: 2 },
+              ]
+            : [],
         },
       ],
     },
@@ -58,14 +65,8 @@ const renderFacet = ({
           defaultMessage: 'Transnational regions',
         }}
         options={[
-          { value: 'Global', count: 5, selected: false },
           { value: 'Europe', count: 8, selected: false },
-          {
-            value: 'Macro-Transnational region',
-            count: 4,
-            selected: false,
-          },
-          { value: 'Countries', count: 6, selected: false },
+          { value: 'Global', count: 5, selected: false },
         ]}
       />
     </IntlProvider>,
@@ -79,15 +80,37 @@ describe('NavigatorGeographicCoverageFacet', () => {
     jest.clearAllMocks();
   });
 
-  it('shows Globe and Europe as direct options and filters by the raw value', () => {
-    const { onSelect } = renderFacet();
+  it('shows Global and Europe as direct options', () => {
+    renderFacet();
+
+    expect(
+      screen
+        .getAllByRole('checkbox')
+        .slice(0, 2)
+        .map((option) => option.getAttribute('aria-label')),
+    ).toEqual(['Europe', 'Global']);
+  });
 
-    expect(screen.getByText('Global')).toBeInTheDocument();
-    expect(screen.getByText('Europe')).toBeInTheDocument();
+  it('clears detailed coverage before selecting a direct scope', () => {
+    const { onSelect, removeFilter } = renderFacet({
+      filters: [
+        {
+          field: COUNTRIES_FIELD,
+          values: ['Germany'],
+          type: 'any',
+        },
+      ],
+    });
 
-    fireEvent.click(screen.getByLabelText('Global'));
+    fireEvent.click(screen.getByLabelText('Europe'));
 
-    expect(onSelect).toHaveBeenCalledWith('Global');
+    expect(removeFilter).toHaveBeenCalledWith(COUNTRIES_FIELD, null, 'any');
+    expect(removeFilter).toHaveBeenCalledWith(
+      TRANSNATIONAL_REGION_FIELD,
+      null,
+      'any',
+    );
+    expect(onSelect).toHaveBeenCalledWith('Europe');
   });
 
   it('expands and filters Macro-Transnational region values', () => {
@@ -124,4 +147,47 @@ describe('NavigatorGeographicCoverageFacet', () => {
       'any',
     );
   });
+
+  it('shows empty detailed coverage groups while Europe is selected', () => {
+    const { onRemove } = renderFacet({
+      detailedOptions: false,
+      filters: [
+        {
+          field: CHARACTERISATION_FIELD,
+          values: ['Europe'],
+          type: 'any',
+        },
+      ],
+    });
+
+    expect(screen.getByLabelText('Europe')).toBeChecked();
+    fireEvent.click(screen.getByRole('button', { name: 'Countries' }));
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Transnational regions' }),
+    );
+
+    expect(screen.getAllByText('No options available.')).toHaveLength(2);
+
+    fireEvent.click(screen.getByLabelText('Europe'));
+
+    expect(onRemove).toHaveBeenCalledWith('Europe');
+  });
+
+  it('keeps detailed coverage available when a country is selected', () => {
+    renderFacet({
+      filters: [
+        {
+          field: COUNTRIES_FIELD,
+          values: ['Germany'],
+          type: 'any',
+        },
+      ],
+    });
+
+    expect(screen.getByRole('button', { name: 'Countries' })).toBeEnabled();
+    expect(screen.getByLabelText('Germany')).toBeEnabled();
+    expect(
+      screen.getByRole('button', { name: 'Transnational regions' }),
+    ).toBeEnabled();
+  });
 });

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

@@ -7,6 +7,7 @@ import {
   Icon,
   Loader,
   Message,
+  Popup,
   Table,
   Button,
 } from 'semantic-ui-react';
@@ -84,10 +85,20 @@ const messages = defineMessages({
     id: 'Usability',
     defaultMessage: 'Usability',
   },
+  usabilityTooltip: {
+    id: 'This indicates how easy the tool and its outputs are to understand and interpret, with low = high-level expertise needed, moderate = some prior technical/scientific knowledge needed, high = general user-friendly, minimal technical knowledge needed.',
+    defaultMessage:
+      'This indicates how easy the tool and its outputs are to understand and interpret, with low = high-level expertise needed, moderate = some prior technical/scientific knowledge needed, high = general user-friendly, minimal technical knowledge needed.',
+  },
   functionality: {
     id: 'Functionality',
     defaultMessage: 'Functionality',
   },
+  functionalityTooltip: {
+    id: 'Number of adaptation support cycle steps supported, from 1 to 6 steps.',
+    defaultMessage:
+      'Number of adaptation support cycle steps supported, from 1 to 6 steps.',
+  },
   spatialScale: {
     id: 'Spatial scale',
     defaultMessage: 'Spatial scale',
@@ -231,6 +242,53 @@ const FunctionalityScore = ({ value }) => {
   );
 };
 
+const UsabilityTooltipContent = ({ text }) => {
+  const parts = text.match(
+    /^(.* with) low = (.*), moderate = (.*), high = (.*)$/,
+  );
+
+  if (!parts) return text;
+
+  const [, introduction, low, moderate, high] = parts;
+  const levels = [
+    ['low', low],
+    ['moderate', moderate],
+    ['high', high],
+  ];
+
+  return (
+    <div className="usability-tooltip-content">
+      <div className="usability-tooltip-introduction">{introduction}:</div>
+      {levels.map(([level, description]) => (
+        <div className="usability-tooltip-level" key={level}>
+          <strong>{level}</strong>
+          <span>{` = ${description}`}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const CriterionLabel = ({ label, tooltip, tooltipContent }) => (
+  <div className="compare-criteria-title">
+    <span>{label}</span>
+    <Popup
+      className="compare-criteria-popup"
+      content={tooltipContent || tooltip}
+      position="top left"
+      trigger={
+        <button
+          type="button"
+          className="compare-criteria-tooltip"
+          aria-label={tooltip}
+        >
+          <Icon className="ri-information-line" aria-hidden="true" />
+        </button>
+      }
+    />
+  </div>
+);
+
 const getCompareUids = (search) => {
   const params = new URLSearchParams(search);
 
@@ -297,6 +355,7 @@ const CompareToolsView = () => {
   const registry = config.settings.searchlib;
   const landingPageURL = getNavigatorCataloguePageURL(currentLang);
   const compareToolsTitle = intl.formatMessage(messages.compareTools);
+  const usabilityTooltip = intl.formatMessage(messages.usabilityTooltip);
   const returnURL =
     location.state?.returnURL ||
     getReturnURL(location.search) ||
@@ -519,11 +578,19 @@ const CompareToolsView = () => {
 
             <Table.Body>
               <Table.Row>
-                <Table.Cell as="th" scope="row">
+                <Table.Cell
+                  as="th"
+                  scope="row"
+                  aria-label={intl.formatMessage(messages.usability)}
+                >
                   <div className="compare-criteria">
-                    <div className="compare-criteria-title">
-                      {intl.formatMessage(messages.usability)}
-                    </div>
+                    <CriterionLabel
+                      label={intl.formatMessage(messages.usability)}
+                      tooltip={usabilityTooltip}
+                      tooltipContent={
+                        <UsabilityTooltipContent text={usabilityTooltip} />
+                      }
+                    />
                   </div>
                 </Table.Cell>
 
@@ -537,11 +604,18 @@ const CompareToolsView = () => {
               </Table.Row>
 
               <Table.Row>
-                <Table.Cell as="th" scope="row">
+                <Table.Cell
+                  as="th"
+                  scope="row"
+                  aria-label={intl.formatMessage(messages.functionality)}
+                >
                   <div className="compare-criteria">
-                    <div className="compare-criteria-title">
-                      {intl.formatMessage(messages.functionality)}
-                    </div>
+                    <CriterionLabel
+                      label={intl.formatMessage(messages.functionality)}
+                      tooltip={intl.formatMessage(
+                        messages.functionalityTooltip,
+                      )}
+                    />
                   </div>
                 </Table.Cell>
 

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

@@ -128,6 +128,16 @@ describe('CompareToolsView', () => {
     expect(
       screen.getByRole('rowheader', { name: 'Functionality' }),
     ).toHaveAttribute('scope', 'row');
+    expect(
+      screen.getByRole('button', {
+        name: 'This indicates how easy the tool and its outputs are to understand and interpret, with low = high-level expertise needed, moderate = some prior technical/scientific knowledge needed, high = general user-friendly, minimal technical knowledge needed.',
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', {
+        name: 'Number of adaptation support cycle steps supported, from 1 to 6 steps.',
+      }),
+    ).toBeInTheDocument();
     expect(
       screen.getByRole('button', {
         name: 'Remove Tool one from comparison',

package/src/index.js

@@ -3,6 +3,7 @@
 import { defineMessages, FormattedMessage } from 'react-intl';
 import loadable from '@loadable/component';
 import { compose } from 'redux';
+import { buildTermFacetAggregationRequest } from '@eeacms/search/lib/search';
 import Sitemap from '@plone/volto/components/theme/Sitemap/Sitemap';
 import DefaultView from '@plone/volto/components/theme/View/DefaultView';
 import SelectAutoCompleteWidget from '@plone/volto/components/manage/Widgets/SelectAutoComplete';
@@ -57,6 +58,7 @@ import NavigatorCatalogueContentView from './components/Search/NavigatorCatalogu
 import NavigatorGeographicCoverageFacet from './components/Search/NavigatorCatalogue/NavigatorGeographicCoverageFacet';
 import NavigatorGuideLayout from './components/Search/NavigatorGuide/NavigatorGuideLayout';
 import NavigatorGuideContentView from './components/Search/NavigatorGuide/NavigatorGuideContentView';
+import { getGeographicCoverageFacetValue } from './search/navigator_catalogue/geographicCoverage';
 
 import { langRedirection } from './store/middleware';
 
@@ -437,7 +439,9 @@ const applyConfig = (config) => {
   };
   config.settings.searchlib.resolve.NavigatorGeographicCoverageFacet = {
     ...config.settings.searchlib.resolve.MultiTermFacet,
+    buildRequest: buildTermFacetAggregationRequest,
     component: NavigatorGeographicCoverageFacet,
+    getValue: getGeographicCoverageFacetValue,
   };
   config.settings.searchlib.resolve.NavigatorGuideLayout = {
     component: NavigatorGuideLayout,

package/src/search/navigator_catalogue/config.js

@@ -4,6 +4,7 @@ import { getClientProxyAddress } from './../utils';
 import { vocab } from './../vocabulary';
 
 import facets from './facets';
+import { geographicCoverageRuntimeMappings } from './geographicCoverage';
 import views from './views';
 
 const navigatorCatalogueConfig = {
@@ -46,7 +47,10 @@ export default function installNavigatorCatalogueSearch(config) {
     index_name: 'data_searchui',
     host: process.env.RAZZLE_ES_PROXY_ADDR || 'http://localhost:3000',
     vocab,
-    runtime_mappings: build_runtime_mappings(clusters),
+    runtime_mappings: {
+      ...build_runtime_mappings(clusters),
+      ...geographicCoverageRuntimeMappings,
+    },
   };
 
   const { navigatorCatalogueSearch } = config.searchui;

package/src/search/navigator_catalogue/facets.js

@@ -5,6 +5,7 @@ import {
   geographic_countries,
   language,
 } from './../common';
+import { CHARACTERISATION_FIELD } from './geographicCoverage';
 
 const messages = defineMessages({
   geographicCoverage: {
@@ -68,7 +69,7 @@ const facets = [
     alwaysVisible: false,
   }),
   multiTermFacet({
-    field: 'cca_geographic_characterisation.keyword',
+    field: CHARACTERISATION_FIELD,
     factory: 'NavigatorGeographicCoverageFacet',
     isFilterable: false,
     isMulti: true,

package/src/search/navigator_catalogue/geographicCoverage.js

@@ -0,0 +1,47 @@
+export const CHARACTERISATION_FIELD = 'cca_navigator_geographic_scope';
+export const TRANSNATIONAL_REGION_FIELD =
+  'cca_geographic_transnational_region.keyword';
+export const COUNTRIES_FIELD = 'cca_geographic_countries.keyword';
+
+export const geographicCoverageRuntimeMappings = {
+  [CHARACTERISATION_FIELD]: {
+    type: 'keyword',
+    script: {
+      source: `
+        boolean hasCountries = doc.containsKey('cca_geographic_countries.keyword') && doc['cca_geographic_countries.keyword'].size() != 0;
+        boolean hasTransnational = doc.containsKey('cca_geographic_transnational_region.keyword') && doc['cca_geographic_transnational_region.keyword'].size() != 0;
+        boolean hasSubnational = doc.containsKey('cca_sub_nationals.keyword') && doc['cca_sub_nationals.keyword'].size() != 0;
+        boolean hasCity = doc.containsKey('cca_city.keyword') && doc['cca_city.keyword'].size() != 0;
+
+        if (!hasCountries && !hasTransnational && !hasSubnational && !hasCity) {
+          for (def value : doc['cca_geographic_characterisation.keyword']) {
+            emit(value);
+          }
+        }
+      `,
+    },
+  },
+};
+
+export const getGeographicCoverageFacetValue = ({
+  aggregations,
+  fieldName,
+}) => {
+  const aggregation = aggregations?.[fieldName];
+  if (!aggregation) return undefined;
+
+  const counts = Object.fromEntries(
+    (aggregation.buckets || []).map(({ key, doc_count }) => [key, doc_count]),
+  );
+
+  return [
+    {
+      field: fieldName,
+      type: 'value',
+      data: ['Europe', 'Global'].map((value) => ({
+        value,
+        count: counts[value] || 0,
+      })),
+    },
+  ];
+};

package/src/search/navigator_catalogue/geographicCoverage.test.js

@@ -0,0 +1,65 @@
+import {
+  CHARACTERISATION_FIELD,
+  geographicCoverageRuntimeMappings,
+  getGeographicCoverageFacetValue,
+} from './geographicCoverage';
+
+describe('geographic coverage runtime mapping', () => {
+  it('defines an exclusive keyword scope from all specific location fields', () => {
+    const mapping = geographicCoverageRuntimeMappings[CHARACTERISATION_FIELD];
+
+    expect(mapping.type).toBe('keyword');
+    expect(mapping.script.source).toContain(
+      "doc['cca_geographic_countries.keyword']",
+    );
+    expect(mapping.script.source).toContain(
+      "doc['cca_geographic_transnational_region.keyword']",
+    );
+    expect(mapping.script.source).toContain("doc['cca_sub_nationals.keyword']");
+    expect(mapping.script.source).toContain("doc['cca_city.keyword']");
+    expect(mapping.script.source).toContain(
+      "doc['cca_geographic_characterisation.keyword']",
+    );
+  });
+});
+
+describe('geographic coverage facet value', () => {
+  it('keeps the facet available with zero counts when its buckets are empty', () => {
+    expect(
+      getGeographicCoverageFacetValue({
+        aggregations: {
+          [CHARACTERISATION_FIELD]: { buckets: [] },
+        },
+        fieldName: CHARACTERISATION_FIELD,
+      }),
+    ).toEqual([
+      {
+        field: CHARACTERISATION_FIELD,
+        type: 'value',
+        data: [
+          { value: 'Europe', count: 0 },
+          { value: 'Global', count: 0 },
+        ],
+      },
+    ]);
+  });
+
+  it('returns Europe and Global alphabetically with their counts', () => {
+    expect(
+      getGeographicCoverageFacetValue({
+        aggregations: {
+          [CHARACTERISATION_FIELD]: {
+            buckets: [
+              { key: 'Global', doc_count: 25 },
+              { key: 'Europe', doc_count: 20 },
+            ],
+          },
+        },
+        fieldName: CHARACTERISATION_FIELD,
+      })[0].data,
+    ).toEqual([
+      { value: 'Europe', count: 20 },
+      { value: 'Global', count: 25 },
+    ]);
+  });
+});

package/theme/globals/navigator.less

@@ -354,6 +354,22 @@
   margin-left: 0.5rem !important;
 }
 
+.ui.popup.compare-criteria-popup {
+  max-width: min(450px, calc(100vw - 2rem));
+
+  .usability-tooltip-introduction {
+    margin-bottom: 0.65rem;
+  }
+
+  .usability-tooltip-level {
+    strong {
+      font-weight: 700;
+      text-transform: capitalize;
+      color: @secondaryColor;
+    }
+  }
+}
+
 .navigator-catalogue-compare-view {
   overflow-x: auto;
 
@@ -431,6 +447,20 @@
     font-weight: 500;
   }
 
+  .compare-criteria-tooltip {
+    padding: 0;
+    border: 0;
+    margin-left: 0.4rem;
+    background: transparent;
+    color: @primaryColor;
+    cursor: pointer;
+    line-height: 1;
+
+    i.icon {
+      margin: 0;
+    }
+  }
+
   .usability-value,
   .functionality-value {
     color: @secondaryColor;