@eeacms/volto-cca-policy 1.0.18 → 1.0.19

package/CHANGELOG.md

@@ -4,6 +4,21 @@ 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.19](https://github.com/eea/volto-cca-policy/compare/1.0.18...1.0.19) - 10 September 2026
+
+#### :rocket: New Features
+
+- feat: enhance comparison table with new output type and adaptation support cycle step features [kreafox - [`40e56ad`](https://github.com/eea/volto-cca-policy/commit/40e56adb144e283ce18bf36e87db5c36f286ab9c)]
+- feat: enhance CompareToolsView with new comparison options and styling [kreafox - [`a912b50`](https://github.com/eea/volto-cca-policy/commit/a912b5006af55aefbd024b494cd9c810bfb22684)]
+
+#### :nail_care: Enhancements
+
+- change: comparison table export by removing unused fields and improve export functionality [kreafox - [`f9ee0f7`](https://github.com/eea/volto-cca-policy/commit/f9ee0f74d02153b9a233ef13264c026503534038)]
+- change: update comparison options handling and enhance tests for adaptation support cycle steps [kreafox - [`fc2736b`](https://github.com/eea/volto-cca-policy/commit/fc2736b293e938b3e13367d96d3c8158c5435f49)]
+
+#### :hammer_and_wrench: Others
+
+- test: improve test readability and structure in Compare Tools utilities [kreafox - [`b6fc550`](https://github.com/eea/volto-cca-policy/commit/b6fc550db8f3ddbadf093c56596968caf94900ad)]
 ### [1.0.18](https://github.com/eea/volto-cca-policy/compare/1.0.17...1.0.18) - 10 September 2026
 
 #### :rocket: New Features

package/package.json

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

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

@@ -124,12 +124,6 @@ export const exportComparisonTable = (tools, getToolField) => {
         formatFunctionalityScore(getToolField(tool, 'functionality')),
       ),
     ],
-    [
-      'Spatial scale',
-      ...tools.map((tool) =>
-        arrayFieldToString(getToolField(tool, 'cca_geographical_scale')),
-      ),
-    ],
     [
       'Output type',
       ...tools.map((tool) =>
@@ -144,12 +138,6 @@ export const exportComparisonTable = (tools, getToolField) => {
         ),
       ),
     ],
-    [
-      'Sector',
-      ...tools.map((tool) =>
-        arrayFieldToString(getToolField(tool, 'cca_adaptation_sectors')),
-      ),
-    ],
   ];
 
   downloadCsv('navigator-catalogue-comparison.csv', rows);

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

@@ -104,10 +104,8 @@ describe('Navigator Catalogue utilities', () => {
         values: {
           accessibility_and_usability: 'High',
           functionality: 5,
-          cca_geographical_scale: ['Local'],
           cca_type_of_outputs: ['Maps'],
           cca_adaptation_support_cycle_step: ['Step 1'],
-          cca_adaptation_sectors: ['Water'],
         },
       },
     ];
@@ -118,9 +116,7 @@ describe('Navigator Catalogue utilities', () => {
     expect(csv).toContain('"Criteria","Tool A"');
     expect(csv).toContain('"Usability","High"');
     expect(csv).toContain('"Functionality","5/6"');
-    expect(csv).toContain('"Spatial scale","Local"');
     expect(csv).toContain('"Output type","Maps"');
     expect(csv).toContain('"Adaptation support cycle step","Step 1"');
-    expect(csv).toContain('"Sector","Water"');
   });
 });

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

@@ -92,6 +92,14 @@ const messages = defineMessages({
     id: 'Spatial scale',
     defaultMessage: 'Spatial scale',
   },
+  available: {
+    id: 'Available',
+    defaultMessage: 'Available',
+  },
+  unavailable: {
+    id: 'Not available',
+    defaultMessage: 'Not available',
+  },
   outputType: {
     id: 'Output type',
     defaultMessage: 'Output type',
@@ -108,36 +116,99 @@ const getToolField = (tool, field) =>
 const getToolFieldDisplay = (tool, field) =>
   asArray(getToolField(tool, field)).join(', ') || '—';
 
-const MetadataTags = ({ value }) => {
-  const intl = useIntl();
-  const items = asArray(value)
-    .map((item) => item?.title || item?.token || item)
-    .filter(Boolean);
-
-  return items.length ? (
-    <div className="metadata-tags">
-      {items.map((item, index) => (
-        <span className="metadata-tag" key={`${item}-${index}`}>
-          {intl.formatMessage({ id: item, defaultMessage: item })}
-        </span>
-      ))}
-    </div>
-  ) : (
-    '—'
+const getMetadataItem = (item) => item?.title || item?.token || item;
+
+const getComparisonOptions = (tools, field) => {
+  const fetchedOptions = tools[0]?.comparisonOptions?.[field];
+  const values = fetchedOptions?.length
+    ? fetchedOptions
+    : tools.flatMap((tool) => asArray(getToolField(tool, field)));
+
+  return [...new Set(values.map(getMetadataItem).filter(Boolean))].sort(
+    (first, second) =>
+      first.localeCompare(second, undefined, { numeric: true }),
   );
 };
 
-const FieldValueList = ({ value, label }) => {
-  const values = asArray(value);
+const getApplicableComparisonOptions = (tools, field) =>
+  [
+    ...new Set(
+      tools
+        .flatMap((tool) => asArray(getToolField(tool, field)))
+        .map(getMetadataItem)
+        .filter(Boolean),
+    ),
+  ].sort((first, second) =>
+    first.localeCompare(second, undefined, { numeric: true }),
+  );
 
-  return values.length ? (
-    <ul className="compare-field-value-list" aria-label={label}>
-      {values.map((item, index) => (
-        <li key={`${item}-${index}`}>{item}</li>
+const getExportTools = (tools) => {
+  const comparisonOptions = {
+    ...(tools[0]?.comparisonOptions || {}),
+    cca_type_of_outputs: getApplicableComparisonOptions(
+      tools,
+      'cca_type_of_outputs',
+    ),
+    cca_adaptation_support_cycle_step: getApplicableComparisonOptions(
+      tools,
+      'cca_adaptation_support_cycle_step',
+    ),
+  };
+
+  return tools.map((tool) => ({
+    ...tool,
+    comparisonOptions,
+  }));
+};
+
+const ComparisonRows = ({ tools, field, label, options }) => {
+  const intl = useIntl();
+  const selectedItems = tools.map(
+    (tool) => new Set(asArray(getToolField(tool, field)).map(getMetadataItem)),
+  );
+
+  return (
+    <Table.Body>
+      {(options.length ? options : [null]).map((item, index) => (
+        <Table.Row key={item || field}>
+          {index === 0 && (
+            <Table.Cell as="th" scope="rowgroup" rowSpan={options.length || 1}>
+              <div className="compare-criteria-title">{label}</div>
+            </Table.Cell>
+          )}
+          {tools.map((tool, toolIndex) =>
+            item ? (
+              <React.Fragment key={tool.id}>
+                <Table.Cell
+                  className={`compare-option-label${
+                    selectedItems[toolIndex].has(item) ? ' available' : ''
+                  }`}
+                >
+                  {intl.formatMessage({ id: item, defaultMessage: item })}
+                </Table.Cell>
+                <Table.Cell className="compare-option-status">
+                  {selectedItems[toolIndex].has(item) ? (
+                    <Icon
+                      className="ri-check-line"
+                      aria-label={intl.formatMessage(messages.available)}
+                    />
+                  ) : (
+                    <Icon
+                      className="ri-subtract-line"
+                      aria-label={intl.formatMessage(messages.unavailable)}
+                    />
+                  )}
+                </Table.Cell>
+              </React.Fragment>
+            ) : (
+              <Table.Cell key={tool.id} colSpan={2}>
+                —
+              </Table.Cell>
+            ),
+          )}
+        </Table.Row>
       ))}
-    </ul>
-  ) : (
-    '—'
+    </Table.Body>
   );
 };
 
@@ -185,6 +256,7 @@ const getToolHref = (result) => result?.href || result?._result?.id?.raw || '';
 const getTools = async (uids, registry) => {
   try {
     const results = await fetchResultsByUid(uids, registry);
+    const comparisonOptions = results.comparisonOptions || {};
     const resultsByUid = new Map(
       results.map((result) => [getCompareToolUid(result), result]),
     );
@@ -198,6 +270,7 @@ const getTools = async (uids, registry) => {
         href: getToolHref(result),
         result,
         error: !result,
+        comparisonOptions,
       };
     });
   } catch {
@@ -220,6 +293,7 @@ const CompareToolsView = () => {
     () => getCompareUids(location.search),
     [location.search],
   );
+
   const registry = config.settings.searchlib;
   const landingPageURL = getNavigatorCataloguePageURL(currentLang);
   const compareToolsTitle = intl.formatMessage(messages.compareTools);
@@ -291,6 +365,15 @@ const CompareToolsView = () => {
 
   const failedTools = tools.filter((tool) => tool.error);
   const visibleTools = tools.filter((tool) => !tool.error);
+  const outputOptions = getComparisonOptions(
+    visibleTools,
+    'cca_type_of_outputs',
+  );
+  const cycleOptions = getComparisonOptions(
+    visibleTools,
+    'cca_adaptation_support_cycle_step',
+  );
+
   const visibleToolsCount = visibleTools.length;
   const hasLoadedRequestedTools = tools.length === ids.length;
   const hasEnoughTools = visibleToolsCount >= 2;
@@ -345,10 +428,16 @@ const CompareToolsView = () => {
               <Icon className="ri-arrow-left-line" />
               {intl.formatMessage(messages.backToResults)}
             </Button>
+
             <Button
               className="primary inverted"
               disabled={!hasEnoughTools}
-              onClick={() => exportComparisonTable(visibleTools, getToolField)}
+              onClick={() =>
+                exportComparisonTable(
+                  getExportTools(visibleTools),
+                  getToolField,
+                )
+              }
             >
               <Icon className="ri-download-2-line" />
               {intl.formatMessage(messages.exportTable)}
@@ -372,6 +461,16 @@ const CompareToolsView = () => {
 
         {!isLoading && hasEnoughTools && (
           <Table celled aria-label={compareToolsTitle} unstackable>
+            <colgroup>
+              <col className="compare-criteria-column" />
+              {visibleTools.map((tool) => (
+                <React.Fragment key={tool.id}>
+                  <col />
+                  <col className="compare-status-column" />
+                </React.Fragment>
+              ))}
+            </colgroup>
+
             <Table.Header>
               <Table.Row>
                 <Table.HeaderCell>
@@ -379,15 +478,18 @@ const CompareToolsView = () => {
                     {intl.formatMessage(messages.criteria)}
                   </span>
                 </Table.HeaderCell>
+
                 {visibleTools.map((tool) => (
-                  <Table.HeaderCell key={tool.id}>
+                  <Table.HeaderCell key={tool.id} colSpan={2}>
                     <div className="compare-tool-header">
                       <div className="compare-tool-title-row">
                         <ToolThumbnail result={tool.result} />
+
                         <div className="compare-tool-title" title={tool.title}>
                           {tool.title}
                         </div>
                       </div>
+
                       <div className="compare-tool-actions">
                         {tool.href && (
                           <UniversalLink
@@ -398,6 +500,7 @@ const CompareToolsView = () => {
                             <Icon className="ri-external-link-line" />
                           </UniversalLink>
                         )}
+
                         <Button
                           className="icon compare-tool-clear"
                           aria-label={intl.formatMessage(messages.removeTool, {
@@ -413,6 +516,7 @@ const CompareToolsView = () => {
                 ))}
               </Table.Row>
             </Table.Header>
+
             <Table.Body>
               <Table.Row>
                 <Table.Cell as="th" scope="row">
@@ -422,14 +526,16 @@ const CompareToolsView = () => {
                     </div>
                   </div>
                 </Table.Cell>
+
                 {visibleTools.map((tool) => (
-                  <Table.Cell key={`usability-${tool.id}`}>
+                  <Table.Cell key={`usability-${tool.id}`} colSpan={2}>
                     <div className="usability-value">
                       {getToolFieldDisplay(tool, 'accessibility_and_usability')}
                     </div>
                   </Table.Cell>
                 ))}
               </Table.Row>
+
               <Table.Row>
                 <Table.Cell as="th" scope="row">
                   <div className="compare-criteria">
@@ -438,8 +544,9 @@ const CompareToolsView = () => {
                     </div>
                   </div>
                 </Table.Cell>
+
                 {visibleTools.map((tool) => (
-                  <Table.Cell key={`functionality-${tool.id}`}>
+                  <Table.Cell key={`functionality-${tool.id}`} colSpan={2}>
                     <div className="functionality-value">
                       <FunctionalityScore
                         value={getToolField(tool, 'functionality')}
@@ -448,59 +555,21 @@ const CompareToolsView = () => {
                   </Table.Cell>
                 ))}
               </Table.Row>
-              {/* <Table.Row>
-                <Table.Cell as="th" scope="row">
-                  <div className="compare-criteria">
-                    <div className="compare-criteria-title">
-                      {intl.formatMessage(messages.spatialScale)}
-                    </div>
-                  </div>
-                </Table.Cell>
-                {visibleTools.map((tool) => (
-                  <Table.Cell key={`spatial-scale-${tool.id}`}>
-                    {getToolFieldDisplay(tool, 'cca_geographical_scale')}
-                  </Table.Cell>
-                ))}
-              </Table.Row> */}
-              <Table.Row>
-                <Table.Cell as="th" scope="row">
-                  <div className="compare-criteria">
-                    <div className="compare-criteria-title">
-                      {intl.formatMessage(messages.outputType)}
-                    </div>
-                  </div>
-                </Table.Cell>
-                {visibleTools.map((tool) => (
-                  <Table.Cell key={`output-type-${tool.id}`}>
-                    <MetadataTags
-                      value={getToolField(tool, 'cca_type_of_outputs')}
-                    />
-                  </Table.Cell>
-                ))}
-              </Table.Row>
-              <Table.Row>
-                <Table.Cell as="th" scope="row">
-                  <div className="compare-criteria">
-                    <div className="compare-criteria-title">
-                      {intl.formatMessage(messages.adaptationSupportCycleStep)}
-                    </div>
-                  </div>
-                </Table.Cell>
-                {visibleTools.map((tool) => (
-                  <Table.Cell key={`adaptation-support-cycle-step-${tool.id}`}>
-                    <FieldValueList
-                      label={intl.formatMessage(
-                        messages.adaptationSupportCycleStep,
-                      )}
-                      value={getToolField(
-                        tool,
-                        'cca_adaptation_support_cycle_step',
-                      )}
-                    />
-                  </Table.Cell>
-                ))}
-              </Table.Row>
             </Table.Body>
+
+            <ComparisonRows
+              tools={visibleTools}
+              field="cca_type_of_outputs"
+              label={intl.formatMessage(messages.outputType)}
+              options={outputOptions}
+            />
+
+            <ComparisonRows
+              tools={visibleTools}
+              field="cca_adaptation_support_cycle_step"
+              label={intl.formatMessage(messages.adaptationSupportCycleStep)}
+              options={cycleOptions}
+            />
           </Table>
         )}
       </Container>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { useAtom } from 'jotai';
 import { useDispatch, useSelector } from 'react-redux';
@@ -69,7 +69,7 @@ describe('CompareToolsView', () => {
       hash: '',
       state: {},
     });
-    fetchResultsByUid.mockResolvedValue([
+    const results = [
       {
         cca_uid: { raw: 'one' },
         title: 'Tool one',
@@ -78,8 +78,14 @@ describe('CompareToolsView', () => {
           scales: { thumb: { download: '/uploaded-compare-thumb.jpg' } },
         },
         functionality: { raw: 4 },
+        cca_type_of_outputs: { raw: ['Maps and graphs'] },
         cca_adaptation_support_cycle_step: {
-          raw: [{ title: 'Assessing risks' }, { title: 'Monitoring' }],
+          raw: [
+            {
+              title:
+                'Step 2: Assessing Climate Change Risks and Vulnerabilities',
+            },
+          ],
         },
       },
       {
@@ -88,7 +94,16 @@ describe('CompareToolsView', () => {
         href: '/tool-two',
         image: null,
       },
-    ]);
+    ];
+    results.comparisonOptions = {
+      cca_type_of_outputs: ['Reports and decision support', 'Maps and graphs'],
+      cca_adaptation_support_cycle_step: [
+        'Step 10: Additional step from the catalogue',
+        'Step 2: Assessing Climate Change Risks and Vulnerabilities',
+        'Step 1: Preparing the Ground for Adaptation',
+      ],
+    };
+    fetchResultsByUid.mockResolvedValue(results);
   });
 
   it('labels the table, row headers, and remove actions', async () => {
@@ -117,13 +132,61 @@ describe('CompareToolsView', () => {
     expect(
       functionalityScore.querySelectorAll('.functionality-dot.filled'),
     ).toHaveLength(4);
-    const adaptationSteps = screen.getByRole('list', {
+    const cycleHeader = screen.getByRole('rowheader', {
       name: 'Adaptation support cycle step',
     });
-    expect(adaptationSteps).toHaveClass('compare-field-value-list');
-    expect(adaptationSteps).toHaveTextContent('Assessing risks');
-    expect(adaptationSteps).toHaveTextContent('Monitoring');
-    expect(adaptationSteps.children).toHaveLength(2);
+    expect(cycleHeader).toHaveAttribute('scope', 'rowgroup');
+    expect(cycleHeader).toHaveAttribute('rowspan', '3');
+    const cycleRows = within(cycleHeader.closest('tbody')).getAllByRole('row');
+    expect(cycleRows).toHaveLength(3);
+    expect(
+      within(cycleRows[2]).getAllByText(
+        'Step 10: Additional step from the catalogue',
+      ),
+    ).toHaveLength(2);
+    expect(
+      within(cycleRows[1]).getAllByText(
+        'Step 2: Assessing Climate Change Risks and Vulnerabilities',
+      ),
+    ).toHaveLength(2);
+    expect(within(cycleRows[1]).getAllByLabelText('Available')).toHaveLength(1);
+    expect(
+      within(cycleRows[1]).getAllByLabelText('Not available'),
+    ).toHaveLength(1);
+    expect(
+      within(cycleRows[0]).getAllByLabelText('Not available'),
+    ).toHaveLength(2);
+    const outputRow = screen
+      .getByRole('rowheader', { name: 'Output type' })
+      .closest('tr');
+    expect(within(outputRow).getAllByText('Maps and graphs')).toHaveLength(2);
+    expect(within(outputRow).getAllByLabelText('Available')).toHaveLength(1);
+    expect(within(outputRow).getAllByLabelText('Not available')).toHaveLength(
+      1,
+    );
+  });
+
+  it('falls back to selected tool values when aggregations are empty', async () => {
+    const results = await fetchResultsByUid();
+    results.comparisonOptions = {};
+    render(
+      <IntlProvider locale="en">
+        <CompareToolsView />
+      </IntlProvider>,
+    );
+    await screen.findByRole('table', { name: 'Compare tools' });
+    const cycleHeader = screen.getByRole('rowheader', {
+      name: 'Adaptation support cycle step',
+    });
+    expect(cycleHeader).toHaveAttribute('rowspan', '1');
+    expect(
+      within(cycleHeader.closest('tbody')).getAllByText(
+        'Step 2: Assessing Climate Change Risks and Vulnerabilities',
+      ),
+    ).toHaveLength(2);
+    expect(
+      screen.queryByText('Step 1: Preparing the Ground for Adaptation'),
+    ).not.toBeInTheDocument();
   });
 
   it('shows the uploaded tool result image and keeps the file icon for a missing image', async () => {

package/src/components/theme/CompareTools/utils.js

@@ -111,11 +111,43 @@ export const fetchResultsByUid = async (uids, registry) => {
           ],
         },
       },
+      aggs: {
+        allOutputTypes: {
+          global: {},
+          aggs: {
+            values: {
+              terms: { field: 'cca_type_of_outputs.keyword', size: 10000 },
+            },
+          },
+        },
+        allCycleSteps: {
+          global: {},
+          aggs: {
+            values: {
+              terms: {
+                field: 'cca_adaptation_support_cycle_step.keyword',
+                size: 10000,
+              },
+            },
+          },
+        },
+      },
     },
     appConfig,
   );
   const hits = response.body?.hits?.hits || [];
   const Model = registry.resolve[appConfig.resultItemModel.factory];
+  const results = hits.map((hit) => new Model(hit, appConfig));
+  results.comparisonOptions = {
+    cca_type_of_outputs:
+      response.body?.aggregations?.allOutputTypes?.values?.buckets?.map(
+        (bucket) => bucket.key,
+      ) || [],
+    cca_adaptation_support_cycle_step:
+      response.body?.aggregations?.allCycleSteps?.values?.buckets?.map(
+        (bucket) => bucket.key,
+      ) || [],
+  };
 
-  return hits.map((hit) => new Model(hit, appConfig));
+  return results;
 };

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

@@ -70,9 +70,11 @@ describe('Compare Tools utilities', () => {
   it('resolves comparison identifiers and titles from supported shapes', () => {
     expect(getCompareToolUid({ cca_uid: { raw: 'cca-id' } })).toBe('cca-id');
     expect(getCompareToolUid({ UID: 'plone-id' })).toBe('plone-id');
-    expect(getCompareToolUid({ _result: { cca_uid: { raw: 'raw-id' } } })).toBe(
-      'raw-id',
-    );
+    expect(
+      getCompareToolUid({
+        _result: { cca_uid: { raw: 'raw-id' } },
+      }),
+    ).toBe('raw-id');
     expect(getCompareToolUid({})).toBe('');
     expect(getCompareToolTitle({ title: 'Tool title' })).toBe('Tool title');
     expect(getCompareToolTitle({})).toBe('');
@@ -101,9 +103,13 @@ describe('Compare Tools utilities', () => {
     ).toEqual({
       pathname: '/ro/navigator/compare',
       search: '?uid=one&uid=two&uid=three',
-      state: { returnURL: '/en/navigator/tool-catalogue?q=test' },
+      state: {
+        returnURL: '/en/navigator/tool-catalogue?q=test',
+      },
     });
+
     expect(MAX_COMPARE_TOOLS).toBe(4);
+
     expect(getCompareLocation([])).toEqual({
       pathname: '/en/navigator/compare',
       search: '',
@@ -118,22 +124,46 @@ describe('Compare Tools utilities', () => {
         this.config = config;
       }
     }
+
     const appConfig = {
       index_name: 'data_searchui',
       resultItemModel: { factory: 'resultModel' },
     };
+
     const registry = {
-      searchui: { navigatorCatalogueSearch: appConfig },
-      resolve: { resultModel: ResultModel },
+      searchui: {
+        navigatorCatalogueSearch: appConfig,
+      },
+      resolve: {
+        resultModel: ResultModel,
+      },
     };
+
     runRequest.mockResolvedValue({
-      body: { hits: { hits: [{ _id: 'one' }, { _id: 'two' }] } },
+      body: {
+        hits: {
+          hits: [{ _id: 'one' }, { _id: 'two' }],
+        },
+        aggregations: {
+          allOutputTypes: {
+            values: {
+              buckets: [{ key: 'Map' }, { key: 'Chart' }],
+            },
+          },
+          allCycleSteps: {
+            values: {
+              buckets: [{ key: 'Assess' }, { key: 'Plan' }],
+            },
+          },
+        },
+      },
     });
 
     const results = await fetchResultsByUid(['one', 'two'], registry);
 
     expect(rebind).toHaveBeenCalledWith(appConfig);
     expect(applyConfigurationSchema).toHaveBeenCalledWith(appConfig);
+
     expect(runRequest).toHaveBeenCalledWith(
       {
         index: 'data_searchui',
@@ -142,59 +172,127 @@ describe('Compare Tools utilities', () => {
           bool: {
             minimum_should_match: 1,
             should: [
-              { terms: { 'cca_uid.keyword': ['one', 'two'] } },
-              { terms: { cca_uid: ['one', 'two'] } },
+              {
+                terms: {
+                  'cca_uid.keyword': ['one', 'two'],
+                },
+              },
+              {
+                terms: {
+                  cca_uid: ['one', 'two'],
+                },
+              },
             ],
           },
         },
+        aggs: {
+          allOutputTypes: {
+            global: {},
+            aggs: {
+              values: {
+                terms: {
+                  field: 'cca_type_of_outputs.keyword',
+                  size: 10000,
+                },
+              },
+            },
+          },
+          allCycleSteps: {
+            global: {},
+            aggs: {
+              values: {
+                terms: {
+                  field: 'cca_adaptation_support_cycle_step.keyword',
+                  size: 10000,
+                },
+              },
+            },
+          },
+        },
       },
       appConfig,
     );
+
     expect(results).toHaveLength(2);
     expect(results[0]).toBeInstanceOf(ResultModel);
+    expect(results[1]).toBeInstanceOf(ResultModel);
+
+    expect(results.comparisonOptions).toEqual({
+      cca_type_of_outputs: ['Map', 'Chart'],
+      cca_adaptation_support_cycle_step: ['Assess', 'Plan'],
+    });
   });
 
   it('handles missing hits and configurations without an index', async () => {
     const registry = {
       searchui: {
         navigatorCatalogueSearch: {
-          resultItemModel: { factory: 'resultModel' },
+          resultItemModel: {
+            factory: 'resultModel',
+          },
         },
       },
-      resolve: { resultModel: class ResultModel {} },
+      resolve: {
+        resultModel: class ResultModel {},
+      },
     };
+
     runRequest.mockResolvedValue({});
 
-    await expect(fetchResultsByUid(['one'], registry)).resolves.toEqual([]);
+    const results = await fetchResultsByUid(['one'], registry);
+
+    expect(results).toHaveLength(0);
+
+    expect(results.comparisonOptions).toEqual({
+      cca_type_of_outputs: [],
+      cca_adaptation_support_cycle_step: [],
+    });
+
     expect(runRequest.mock.calls[0][0]).not.toHaveProperty('index');
   });
 
   it('adds, toggles, and removes a comparison tool', () => {
-    renderCompareHarness({ uid: 'one', title: 'Tool one' });
+    renderCompareHarness({
+      uid: 'one',
+      title: 'Tool one',
+    });
 
     expect(screen.getByTestId('selected')).toHaveTextContent('false');
     expect(screen.getByTestId('limit')).toHaveTextContent('false');
 
     fireEvent.click(screen.getByText('Toggle'));
+
     expect(screen.getByTestId('selected')).toHaveTextContent('true');
+
     expect(
       JSON.parse(window.localStorage.getItem('cca-compare-tools')),
-    ).toEqual([{ uid: 'one', title: 'Tool one' }]);
+    ).toEqual([
+      {
+        uid: 'one',
+        title: 'Tool one',
+      },
+    ]);
 
     fireEvent.click(screen.getByText('Select'));
+
     expect(screen.getByTestId('selected')).toHaveTextContent('true');
 
     fireEvent.click(screen.getByText('Remove'));
+
     expect(screen.getByTestId('selected')).toHaveTextContent('false');
+
     expect(
       JSON.parse(window.localStorage.getItem('cca-compare-tools')),
     ).toEqual([]);
   });
 
   it('does not add tools without an identifier', () => {
-    renderCompareHarness({ title: 'Missing UID' });
+    renderCompareHarness({
+      title: 'Missing UID',
+    });
 
     fireEvent.click(screen.getByText('Select'));
+
     expect(screen.getByTestId('selected')).toHaveTextContent('false');
   });
 
@@ -205,15 +303,26 @@ describe('Compare Tools utilities', () => {
         uid: `tool-${index}`,
       }),
     );
-    renderCompareHarness({ uid: 'extra' }, initialTools);
+
+    renderCompareHarness(
+      {
+        uid: 'extra',
+      },
+      initialTools,
+    );
 
     expect(screen.getByTestId('limit')).toHaveTextContent('true');
+
     fireEvent.click(screen.getByText('Select'));
+
     expect(screen.getByTestId('selected')).toHaveTextContent('false');
   });
 
   it('exposes hasMounted state to safely coordinate client hydration', () => {
-    renderCompareHarness({ uid: 'one', title: 'Tool one' });
+    renderCompareHarness({
+      uid: 'one',
+      title: 'Tool one',
+    });
 
     expect(screen.getByTestId('mounted')).toHaveTextContent('true');
   });
@@ -221,10 +330,12 @@ describe('Compare Tools utilities', () => {
   it('tracks mounting status with useHasMounted', () => {
     const MountedComponent = () => {
       const mounted = useHasMounted();
+
       return <div data-testid="mounted-flag">{String(mounted)}</div>;
     };
 
     render(<MountedComponent />);
+
     expect(screen.getByTestId('mounted-flag')).toHaveTextContent('true');
   });
 });

package/theme/globals/navigator.less

@@ -359,13 +359,12 @@
     }
   }
 
-  .ui.celled.table th:first-child,
-  .ui.celled.table td:first-child {
+  .compare-criteria-column {
     width: 180px;
   }
 
   .ui.celled.table th:not(:first-child),
-  .ui.celled.table td:not(:first-child) {
+  .ui.celled.table td {
     overflow-wrap: anywhere;
   }
 
@@ -398,10 +397,46 @@
     }
   }
 
-  .compare-field-value-list {
-    padding: 0;
-    margin: 0;
-    list-style: none;
+  .compare-status-column {
+    width: 64px;
+  }
+
+  .ui.celled.table {
+    td.compare-option-label,
+    td.compare-option-status {
+      padding: 0.4rem 1.1rem;
+      vertical-align: middle;
+    }
+
+    td.compare-option-label {
+      border-left: 1px solid @navigatorBorderColor;
+
+      &.available {
+        color: @secondaryColor;
+        font-weight: 700;
+      }
+    }
+
+    td.compare-option-status {
+      padding-right: 0.5rem;
+      padding-left: 0.5rem;
+      text-align: center;
+
+      i.icon.ri-check-line {
+        color: @secondaryColor;
+      }
+
+      i.icon {
+        margin: 0;
+        font-size: 24px;
+        line-height: 1;
+      }
+    }
+
+    tbody + tbody tr:first-child > th,
+    tbody + tbody tr:first-child > td {
+      border-top: 1px solid @navigatorBorderColor;
+    }
   }
 
   .compare-criteria-label {

package/theme/globals/views.less

@@ -666,6 +666,18 @@ hr {
   font-size: 14px;
 }
 
+.navigator-catalogue-compare-view {
+  .metadata-tag {
+    font-weight: 400;
+  }
+
+  .metadata-tag.selected {
+    border-color: @secondaryColor;
+    color: @secondaryColor;
+    font-weight: 600;
+  }
+}
+
 .metadata-tag-more {
   background: transparent;
   cursor: pointer;