feat: add collapsible checkbox filters

[abdimo101]

Description

Added collapse/expand functionality to checkbox filters on both dataset and proposal pages.

Motivation

• https://jira.ess.eu/browse/SWAP-5127

Fixes:

Please provide a list of the fixes implemented in this PR

• Items added

Changes:

Please provide a list of the changes implemented by this PR

• changes made

Tests included

• Included for each change/fix?
• Passing? (Merge will not be approved unless this is checked)

Documentation

• swagger documentation updated [required]
• official documentation updated [nice-to-have]

official documentation info

If you have updated the official documentation, please provide PR # and URL of the pages where the updates are included

Backend version

• Does it require a specific version of the backend
• which version of the backend is required:

Summary by Sourcery

Add collapsible checkbox filters to dataset and proposal listing pages and cover the behaviour with end-to-end tests.

New Features:

• Introduce per-filter expand/collapse behaviour for checkbox filters on the datasets page.
• Introduce per-filter expand/collapse behaviour for checkbox filters on the proposals page.

Enhancements:

• Style the collapsible filter UI to hide checkbox filter contents when collapsed while keeping other filter types always visible.

Tests:

• Add Cypress end-to-end tests to verify collapsing and expanding checkbox filters on datasets and proposals pages.

[sourcery-ai]

Hey there - I've reviewed your changes - here's some feedback:

• The .collapsible-filter-wrapper styles are duplicated between datasets and proposal filters; consider extracting these into a shared stylesheet or mixin to keep styling consistent and easier to maintain.
• The checkbox-specific template logic (wrapper div, toggle button, and expandedFilters handling) is very similar between datasets and proposals; you could reduce duplication by introducing a reusable component/directive or helper that encapsulates the collapsible behavior.
• Relying on ::ng-deep and display: none !important to hide parts of shared-filter is brittle; if possible, expose an input or CSS hook on shared-filter to control its collapsed state instead of reaching into its internals.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The `.collapsible-filter-wrapper` styles are duplicated between datasets and proposal filters; consider extracting these into a shared stylesheet or mixin to keep styling consistent and easier to maintain.
- The checkbox-specific template logic (wrapper div, toggle button, and expandedFilters handling) is very similar between datasets and proposals; you could reduce duplication by introducing a reusable component/directive or helper that encapsulates the collapsible behavior.
- Relying on `::ng-deep` and `display: none !important` to hide parts of `shared-filter` is brittle; if possible, expose an input or CSS hook on `shared-filter` to control its collapsed state instead of reaching into its internals.

## Individual Comments

### Comment 1
<location> `src/app/datasets/datasets-filter/datasets-filter.component.html:38-42` </location>
<code_context>
+          (checkBoxChange)="setFilter(filter.key, $event)"
+          (numericRangeChange)="numericRangeChange(filter.key, $event)"
+        ></shared-filter>
+        <button class="collapse-toggle" (click)="toggleFilter(filter.key)">
+          <mat-icon>{{
+            expandedFilters[filter.key] ? "expand_less" : "expand_more"
+          }}</mat-icon>
+        </button>
+      </div>
+
</code_context>

<issue_to_address>
**suggestion:** Enhance accessibility for the collapse toggle button with ARIA attributes.

This button only reflects its state visually. Please bind `aria-expanded` to `expandedFilters[filter.key]`, and consider adding `aria-label` and `aria-controls` pointing to the associated filter content so assistive technologies can correctly interpret the control’s state and purpose.

Suggested implementation:

```
        ></shared-filter>
        <button
          class="collapse-toggle"
          (click)="toggleFilter(filter.key)"
          [attr.aria-expanded]="expandedFilters[filter.key]"
          [attr.aria-controls]="'filter-panel-' + filter.key"
          [attr.aria-label]="'Toggle filter ' + filter.label"
        >
          <mat-icon>{{
            expandedFilters[filter.key] ? "expand_less" : "expand_more"
          }}</mat-icon>
        </button>
      </div>

```

```
      <div
        *ngIf="filter.type === 'checkbox' && filter.enabled"
        class="collapsible-filter-wrapper"
        [class.collapsed]="!expandedFilters[filter.key]"
        [attr.id]="'filter-panel-' + filter.key"
      >
        <shared-filter
          [key]="filter.key"
          [label]="filter.label"

```
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[Junjiequan]

One question here, should user know collapsed field can contain applied filters?

[abdimo101]

One question here, should user know collapsed field can contain applied filters?

Good point! It will best for users to know if it has active filters on a collapsed field. I can add something that would indicate it

[abdimo101]

PR now has a filter badge that indicates whether filters are selected when filter fields are collapsed.
Picture: