refactor mapping page

[Klath123]

Improve Mapping Page: Search, Pagination, Export and Refactoring

This PR resolves the issue #498 improves the Mapping page by making it more intuitive to use, more responsive, and easier to maintain.

• Replaced the basic search with a multi-term, chip-based filtering system that allows users to refine results more naturally, with clear actions and visible feedback
• Added Angular Material paginator to better handle large datasets and make navigation smoother
• Updated Excel export so that it reflects the current filtered view, ensuring users download only what they see
• Cleaned up and improved the UI with better layout structure, spacing, sticky headers, and responsive behavior
• Improved performance by using OnPush change detection, trackBy, and more efficient filtering and sorting logic
• Refactored the component to make the code easier to read, maintain, and extend going forward

Before:-

Screen.Recording.2026-03-30.232059.mp4

After:-

Screen.Recording.2026-03-30.231704.mp4

Overall, these changes make the Mapping page faster, clearer to interact with, and more reliable for users working with larger datasets.

[Klath123]

@vbakke please review this and provide with your feedback :)

[vbakke]

Nice work, @Klath123. I like it. :)

I think you forgot light mode on the header.

[vbakke]

@Klath123 and @veenoise: I just discovered that #527 and #534 both change the Mapping page.
Not sure if there will be conflicts. Just letting you know, so that both of you also knows. Feel free to sort out any merge conflicts directly with each other, either in the issues/pull requests, or in the slack #dsomm channel. :)

[veenoise]

These break light mode

[veenoise]

Suggested change

background: var(--surface-01, #272727);

Remove this, it breaks the light mode and the color is already showing in dark mode so it is unnecessary

[veenoise]

Suggested change

color: var(--text-tertiary, #757575);

Remove this as well, it is already implemented in dark mode and it breaks light mode

[Klath123]

@vbakke I have fixed the mapping page for light theme. I have done some additional styling to it. Please review and provide with your feedback :)

[vbakke]

Thank you, @Klath123.

As pointed out in #534 and #535 the sideways scroll bar is hidden, unless scrolling all the way to the bottom on the page. I know some are allergic to sideways scrolls. But as long as we have not made the table to show all columns tiny screens, the horizontal scroll bar should be visible also when only halfway down the page. imo :)

[vbakke]

ah, I had the wrong branch checked out when writing the previous comment, @Klath123 . Ignore that message.

But I do still stand for my main point: If a table is too wide, a horizontal scroll should be present at all times, also when viewing the upper part of the table. Especially for long tables like the DSOMM mapping table. (On phones you just side scroll using you thumb, but on narrow browser windows, it is harder to side scroll, unless you know of the shift + scroll wheel thing)

However, your changes to the table compacts a lot better than the original. 🙂 👍

Since this table focuses on the mapping we cannot remove the mapping columns. But we could remove Dimension, and then Sub-dimension as the browser window goes more and more narrow.

And also, are we able to make the heading ISO 27001:2022 break over multiple lines, when needed?
down to ISO | 27001 | :2022 ? (or something similar)?

Then the need for horizontal scroll is even less important.

[Klath123]

Hi @vbakke, looked into your feedback and made the following changes:

->Horizontal scroll is now always visible on the table wrapper.
->Dimension and Sub-dimension columns hide progressively as the window narrows (below 860px and 680px respectively)
->ISO 27001:2017/2022 headers now wrap across multiple lines when space is tight

Screen.Recording.2026-04-06.004544.mp4

Screen recording attached above. Happy to raise a PR if this looks good to you :)