@eeacms/volto-cca-policy 1.0.34 → 1.0.36

package/CHANGELOG.md

@@ -4,7 +4,31 @@ 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.34](https://github.com/eea/volto-cca-policy/compare/1.0.33...1.0.34) - 5 October 2026
+### [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
+
+- 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)]
+
+### [1.0.34](https://github.com/eea/volto-cca-policy/compare/1.0.33...1.0.34) - 6 October 2026
 
 #### :nail_care: Enhancements
 
@@ -602,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.34",
+  "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/Search/NavigatorGuide/NavigatorGuideContentView.jsx

@@ -5,11 +5,11 @@ import { useHistory } from 'react-router-dom';
 import { defineMessages, useIntl } from 'react-intl';
 import { Button, Checkbox, Icon, Loader, Message } from 'semantic-ui-react';
 import URLManager from '@elastic/search-ui/lib/cjs/URLManager';
-import { useSearchContext } from '@eeacms/search/lib/hocs';
+import { useSearchContext, useSearchDriver } from '@eeacms/search/lib/hocs';
 import ToolThumbnail from '@eeacms/volto-cca-policy/components/theme/ToolThumbnail/ToolThumbnail';
 import guideSteps from '../../../search/navigator_guide/guideSteps';
 import { navigatorGuideStepAtom } from '../../../state';
-import { mergeGuideOptions, sortAdaptationSteps } from './utils';
+import { mergeGuideOptions, sortGuideOptions } from './utils';
 import { rawValueAsArray } from '../NavigatorCatalogue/utils';
 import useGuideFacetOptions from './useGuideFacetOptions';
 import { getNavigatorCataloguePageURL } from '../../Search/NavigatorCatalogue/utils';
@@ -106,6 +106,7 @@ const NavigatorGuideContentView = ({ appConfig }) => {
   const history = useHistory();
   const currentLang = useSelector((state) => state.intl.locale || 'en');
   const searchContext = useSearchContext();
+  const driver = useSearchDriver();
   const {
     addFilter,
     facets,
@@ -113,8 +114,12 @@ const NavigatorGuideContentView = ({ appConfig }) => {
     isLoading,
     removeFilter,
     results,
+    searchTerm,
+    sortDirection,
+    sortField,
     totalResults,
   } = searchContext;
+  const defaultSortApplied = React.useRef(false);
   const steps = guideSteps;
   const allFacetOptions = useGuideFacetOptions(appConfig, steps);
   const [storedActiveStep, setActiveStep] = useAtom(navigatorGuideStepAtom);
@@ -137,10 +142,7 @@ const NavigatorGuideContentView = ({ appConfig }) => {
     selectedValues,
     hasSelections,
   );
-  const options =
-    step?.id === 'adaptationStage'
-      ? sortAdaptationSteps(mergedOptions)
-      : mergedOptions;
+  const options = sortGuideOptions(mergedOptions, step?.id, currentLang);
   const isLastStep = activeStep === steps.length - 1;
   const selectedStepLabels = steps
     .filter(({ field }) => isStepSelected(filters, field))
@@ -171,6 +173,23 @@ const NavigatorGuideContentView = ({ appConfig }) => {
     }
   }, [activeStep, setActiveStep, storedActiveStep]);
 
+  React.useEffect(() => {
+    if (!driver || defaultSortApplied.current) return;
+    defaultSortApplied.current = true;
+
+    if (
+      searchTerm?.trim() ||
+      sortField ||
+      sortDirection ||
+      !appConfig.defaultSort
+    ) {
+      return;
+    }
+
+    const [field, direction] = appConfig.defaultSort.split('|');
+    if (field && direction) driver.setSort(field, direction);
+  }, [appConfig.defaultSort, driver, searchTerm, sortDirection, sortField]);
+
   const toggleValue = (value) => {
     if (selectedValues.includes(value)) {
       removeFilter(step.field, value, step.filterType);
@@ -339,16 +358,18 @@ const NavigatorGuideContentView = ({ appConfig }) => {
               {intl.formatMessage(messages.livePreview)}
             </div>
           </div>
-          <div className="navigator-guide-result-count">
-            <span className="navigator-guide-result-count-value">
-              {isLoading ? '…' : totalResults || 0}
-            </span>
-            <p>
-              {intl.formatMessage(messages.toolsMatch, {
-                count: totalResults || 0,
-              })}
-            </p>
-          </div>
+          {hasSelections && (
+            <div className="navigator-guide-result-count">
+              <span className="navigator-guide-result-count-value">
+                {isLoading ? '…' : totalResults || 0}
+              </span>
+              <p>
+                {intl.formatMessage(messages.toolsMatch, {
+                  count: totalResults || 0,
+                })}
+              </p>
+            </div>
+          )}
           {selectedStepLabels.length > 0 && (
             <p className="navigator-guide-preview-refinements">
               {intl.formatMessage(messages.refinedBy, {

package/src/components/Search/NavigatorGuide/NavigatorGuideContentView.test.jsx

@@ -5,7 +5,7 @@ import { IntlProvider } from 'react-intl';
 import { useAtom } from 'jotai';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import { useSearchContext } from '@eeacms/search/lib/hocs';
+import { useSearchContext, useSearchDriver } from '@eeacms/search/lib/hocs';
 import NavigatorGuideContentView from './NavigatorGuideContentView';
 import useGuideFacetOptions from './useGuideFacetOptions';
 
@@ -15,7 +15,10 @@ jest.mock('jotai', () => ({
 }));
 jest.mock('react-redux', () => ({ useSelector: jest.fn() }));
 jest.mock('react-router-dom', () => ({ useHistory: jest.fn() }));
-jest.mock('@eeacms/search/lib/hocs', () => ({ useSearchContext: jest.fn() }));
+jest.mock('@eeacms/search/lib/hocs', () => ({
+  useSearchContext: jest.fn(),
+  useSearchDriver: jest.fn(),
+}));
 jest.mock('./useGuideFacetOptions', () => ({
   __esModule: true,
   default: jest.fn(),
@@ -32,11 +35,20 @@ const renderGuide = (result, searchContext = {}) => {
   });
   return render(
     <IntlProvider locale="en">
-      <NavigatorGuideContentView appConfig={{ previewResultsLimit: 3 }} />
+      <NavigatorGuideContentView
+        appConfig={{
+          previewResultsLimit: 3,
+          defaultSort: 'title.index|asc',
+        }}
+      />
     </IntlProvider>,
   );
 };
 
+beforeEach(() => {
+  useSearchDriver.mockReturnValue(undefined);
+});
+
 describe('NavigatorGuideContentView thumbnails', () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -94,6 +106,64 @@ describe('NavigatorGuideContentView thumbnails', () => {
   });
 });
 
+describe('NavigatorGuideContentView empty preview', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useAtom.mockReturnValue([0, jest.fn()]);
+    useSelector.mockReturnValue('en');
+    useHistory.mockReturnValue({ push: jest.fn() });
+    useGuideFacetOptions.mockReturnValue({});
+  });
+
+  it('hides the result count while the preview empty state is visible', () => {
+    const { container } = renderGuide(
+      { title: 'Guide tool', href: '/tools/guide-tool' },
+      { filters: [] },
+    );
+
+    expect(
+      container.querySelector('.navigator-guide-preview-empty'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.navigator-guide-result-count'),
+    ).not.toBeInTheDocument();
+  });
+});
+
+describe('NavigatorGuideContentView sorting', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useAtom.mockReturnValue([0, jest.fn()]);
+    useSelector.mockReturnValue('en');
+    useHistory.mockReturnValue({ push: jest.fn() });
+    useGuideFacetOptions.mockReturnValue({});
+  });
+
+  it('starts with title A-Z when URL filters leave the sort unset', () => {
+    const driver = { setSort: jest.fn() };
+    useSearchDriver.mockReturnValue(driver);
+
+    renderGuide(
+      { title: 'Guide tool', href: '/tools/guide-tool' },
+      { searchTerm: '', sortField: '', sortDirection: '' },
+    );
+
+    expect(driver.setSort).toHaveBeenCalledWith('title.index', 'asc');
+  });
+
+  it('preserves an active sort', () => {
+    const driver = { setSort: jest.fn() };
+    useSearchDriver.mockReturnValue(driver);
+
+    renderGuide(
+      { title: 'Guide tool', href: '/tools/guide-tool' },
+      { sortField: 'title.index', sortDirection: 'desc' },
+    );
+
+    expect(driver.setSort).not.toHaveBeenCalled();
+  });
+});
+
 describe('NavigatorGuideContentView adaptation steps', () => {
   beforeEach(() => {
     jest.clearAllMocks();

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

@@ -43,3 +43,10 @@ export const sortAdaptationSteps = (options) =>
     if (bStep) return 1;
     return a.value.localeCompare(b.value);
   });
+
+export const sortGuideOptions = (options, stepId, locale = 'en') =>
+  stepId === 'adaptationStage'
+    ? sortAdaptationSteps(options)
+    : [...options].sort((a, b) =>
+        a.value.localeCompare(b.value, locale, { sensitivity: 'base' }),
+      );

package/src/components/Search/NavigatorGuide/utils.test.js

@@ -1,4 +1,8 @@
-import { mergeGuideOptions, sortAdaptationSteps } from './utils';
+import {
+  mergeGuideOptions,
+  sortAdaptationSteps,
+  sortGuideOptions,
+} from './utils';
 
 describe('Navigator Guide utilities', () => {
   it('keeps unavailable values and marks them as disabled', () => {
@@ -54,4 +58,29 @@ describe('Navigator Guide utilities', () => {
     ]);
     expect(options[0].value).toBe('Step 10: Review');
   });
+
+  it('sorts regular guide options alphabetically without mutating them', () => {
+    const options = [
+      { value: 'Water', count: 3 },
+      { value: 'Agriculture', count: 8 },
+      { value: 'Biodiversity', count: 5 },
+    ];
+
+    expect(
+      sortGuideOptions(options, 'adaptationSectors').map(({ value }) => value),
+    ).toEqual(['Agriculture', 'Biodiversity', 'Water']);
+    expect(options[0].value).toBe('Water');
+  });
+
+  it('uses numeric cycle-step order for the adaptation stage', () => {
+    const options = [
+      { value: 'Step 10: Review', count: 3 },
+      { value: 'Step 2: Assess', count: 8 },
+      { value: 'Step 1: Prepare', count: 5 },
+    ];
+
+    expect(
+      sortGuideOptions(options, 'adaptationStage').map(({ value }) => value),
+    ).toEqual(['Step 1: Prepare', 'Step 2: Assess', 'Step 10: Review']);
+  });
 });

package/src/components/manage/Blocks/ChatbotCatalogue/CatalogueChatView.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ChatWindow } from '@eeacms/volto-eea-chatbot/ChatBlock/chat';
-import { CompareToolsPanel } from '../../../theme/CompareTools/CompareToolsPanel';
 
 import { CcaDocCard } from './DocumentCard';
 import { remarkCcaDocCards } from './docCards';
@@ -33,24 +32,17 @@ const extraRemarkPlugins = [remarkCcaDocCards, remarkCcaNextSteps];
  *     turned into inline Navigator-style catalogue cards (`CcaDocCard`),
  *     and "Suggested next steps" sections are turned into styled callout boxes.
  *
- * It also renders `<CompareToolsPanel />` so that when users activate the
- * "Compare" checkbox on any document card, the floating comparison panel
- * appears and allows navigating to the side-by-side comparison view.
- *
  * `ChatBlockView` renders this as `<Presentation persona {...blockData} />`,
  * so all block fields arrive as top-level props and are forwarded unchanged.
  */
 function CatalogueChatView(props) {
   return (
-    <>
-      <ChatWindow
-        {...props}
-        hideSourcesTab
-        extraRemarkPlugins={extraRemarkPlugins}
-        extraMarkdownComponents={extraMarkdownComponents}
-      />
-      <CompareToolsPanel />
-    </>
+    <ChatWindow
+      {...props}
+      hideSourcesTab
+      extraRemarkPlugins={extraRemarkPlugins}
+      extraMarkdownComponents={extraMarkdownComponents}
+    />
   );
 }
 

package/src/components/manage/Blocks/ChatbotCatalogue/CatalogueChatView.test.jsx

@@ -17,10 +17,6 @@ jest.mock('@eeacms/volto-eea-chatbot/ChatBlock/chat', () => ({
   )),
 }));
 
-jest.mock('../../../theme/CompareTools/CompareToolsPanel', () => ({
-  CompareToolsPanel: jest.fn(() => <div data-testid="compare-tools-panel" />),
-}));
-
 describe('CatalogueChatView', () => {
   beforeEach(() => {
     ChatWindow.mockClear();
@@ -74,9 +70,4 @@ describe('CatalogueChatView', () => {
     expect(secondMd).toBe(firstMd);
     expect(secondPlugins).toBe(firstPlugins);
   });
-
-  it('renders the CompareToolsPanel alongside the chat window', () => {
-    const { getByTestId } = render(<CatalogueChatView persona={{}} />);
-    expect(getByTestId('compare-tools-panel')).toBeInTheDocument();
-  });
 });

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

@@ -1,6 +1,12 @@
 import React from 'react';
 import '@testing-library/jest-dom';
-import { fireEvent, render, screen, within } from '@testing-library/react';
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { useAtom } from 'jotai';
 import { useDispatch, useSelector } from 'react-redux';
@@ -122,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',
@@ -210,8 +226,10 @@ describe('CompareToolsView', () => {
 
     fireEvent.load(img);
 
-    expect(img.style.display).toBe('');
-    expect(thumbnail.querySelector('.ri-file-line')).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(img.style.display).toBe('');
+      expect(thumbnail.querySelector('.ri-file-line')).not.toBeInTheDocument();
+    });
   });
 
   it('falls back to the file icon when the image fails', async () => {

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/src/search/navigator_guide/config.js

@@ -8,6 +8,7 @@ const previewResultsLimit = 3;
 
 const navigatorGuideConfig = {
   title: 'Navigator Guide',
+  defaultSort: 'title.index|asc',
   alwaysSearchOnInitialLoad: true,
   resultsPerPage: previewResultsLimit,
   previewResultsLimit,

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;