display filter rank options in frontend

[renanfranca]

• Fix New state for modules #10934

A demo video of the implemented feature:

20250214-rank_filter_demo.mp4

There were many things going on in the above demo video so I will list the completed tasks below.

Rank Module Filter Implementation Tasks

UI Components

• Create LandscapeRankModuleFilterVue component with:
  • Rank filter buttons for all RANKS
  • Active state styling for selected rank
  • Title attributes with rank descriptions
  • Disabled state for ranks without modules
  • Click handlers for selection/deselection

Rank Filtering Logic

• Implement rank filtering in the Landscape class:
  • filterByRank() method
  • Module visibility based on selected rank
  • Dependency handling for modules with different ranks
  • Feature preservation when containing filtered modules

Module Emphasis

• Add minimal emphasis styling for:
  • Dependency modules with different ranks than filter
  • Features containing modules with different ranks

Integration

• Connect rank filter to Landscape component:
  • Do not show rank filter on small screens
  • Emit selected rank event
  • Update Landscape display with filtered modules
  • Handle preset interactions when the rank filter changes

Design

• Create tikui toggle-button atom
• Create tikui landscap-rank-module-filter organism

The dark mode Landscape screen with rank module filter

TO-DO (created at 2025-03-10)

• Error when drawing the module connections
• Setup the modules configuration with the module rank classification (Add rank to modules #12058)
• Should preserve the selected modules when filtering by rank

[renanfranca]

@qmonmert: Thank you for the review. I have pushed the fixes. Let me know if you need some changes ✌️

[qmonmert]

LGTM 👍

[pascalgrimaud]

Thanks for your work here @renanfranca

Here some first feedbacks:

• I put some different ranks to modules, and I play with your pull request
• as you can see, it's not really readable
  

My 1st suggestion:

• when clicking on Rank S: only display Rank S
• when clicking on Rank A: display all Rank S + Rank A
• when clicking on Rank B: display Rank B + A + S
• etc
  Because it is not relevant to select only Rank D for example.

What do you think?

[renanfranca]

Thanks for your work here @renanfranca

😃

Here some first feedbacks:

• I put some different ranks to modules, and I play with your pull request
• as you can see, it's not really readable
  

Can you share the exactly Rank configuration setup you use for this test? So, I will be able to reproduce this bug when it draws the modules' connections👍. Do you agree that is the main problem?

My 1st suggestion:

• when clicking on Rank S: only display Rank S

I tried it while developing it. It looked weired displaying a module without it's dependency which could be from a different rank.

• when clicking on Rank A: display all Rank S + Rank A
• when clicking on Rank B: display Rank B + A + S
• etc

Today, it is showing the dependencies modules or features related to selected Rank, This way, delivery the correct filter and the screen don't get too crowded.

Because it is not relevant to select only Rank D for example.

Don't you need to see the irrelevant modules to try them out, and one day, they might be ranked up?

Thanks @pascalgrimaud for try it out!

[pascalgrimaud]

another comment: when you select a module, then, select another rank, all selected modules are cleaned

[renanfranca]

@pascalgrimaud: I fixed the connection drawing problem, I wasn't looking for nested feature and module dependencies with different ranks than the rank filter applied.

Desktop.2025.03.10.-.16.19.39.01.mp4

I created a new TO-DO at the description to track the requests.
TO-DO (created at 2025-03-10)

• Error when drawing the module connections
• Setup the modules configuration with the module rank classification (Add rank to modules #12058)
• Should preserve the selected modules when filtering by rank

[renanfranca]

• [] Should preserve the selected modules when filtering by rank

@pascalgrimaud: It is working now without missing any module states. I tried it with the module rank classification, and it is working really well!

I changed this PR to Draft because I need to thoroughly refactor the Landscape.ts class 😄👌