display filter rank options in frontend

src/main/style/atom/button/_button.scss

@@ -1,2 +1,3 @@
 @use 'button-main/button-main';
 @use 'button-switch/button-switch';
+@use 'button-toggle/button-toggle';

src/main/style/atom/button/button-toggle/_button-toggle.scss

@@ -0,0 +1,42 @@
+@use 'sass:math';
+@use '../../../token/colors' as colors;
+@use '../../../token/color/brand' as brand;
+@use '../button-main/button-main' as button-main;
+
+$jhlite-button-toggle-padding: math.div(5, 16) * 1rem math.div(15, 16) * 1rem;
+$jhlite-button-toggle-border: 1px solid brand.$jhlite-color-brand-600;
+$jhlite-button-toggle-font-size: math.div(13, 16) * 1rem;
+$jhlite-button-toggle-hover-color-background: rgba(button-main.$jhlite-button-color-background, 0.1);
+$jhlite-button-toggle-disabled-color-background: button-main.$jhlite-button-disabled-color-background;
+$jhlite-button-toggle-active-color-background: button-main.$jhlite-button-color-background;
+$jhlite-button-toggle-active-hover-color-background: button-main.$jhlite-button-hover-color-background;
+
+.jhlite-button-toggle {
+  @extend %jhlite-button-main;
+
+  border: $jhlite-button-toggle-border;
+  background-color: transparent;
+  padding: $jhlite-button-toggle-padding;
+  text-transform: none;
+  color: var(--jhlite-global-color-text);
+  font-size: $jhlite-button-toggle-font-size;
+
+  &:hover {
+    background-color: $jhlite-button-toggle-hover-color-background;
+  }
+
+  &:disabled {
+    &:hover {
+      background-color: $jhlite-button-toggle-disabled-color-background;
+    }
+  }
+
+  &.-active {
+    background-color: $jhlite-button-toggle-active-color-background;
+    color: colors.$jhlite-global-color-text-light;
+
+    &:hover {
+      background-color: $jhlite-button-toggle-active-hover-color-background;
+    }
+  }
+}

src/main/style/atom/button/button-toggle/button-toggle.code.pug

@@ -0,0 +1,5 @@
+include button-toggle.mixin.pug
+
++jhlite-button-toggle Toggle
++jhlite-button-toggle({active: true}) Toggle active
++jhlite-button-toggle({disabled: true}) Toggle disabled

src/main/style/atom/button/button-toggle/button-toggle.md

@@ -0,0 +1 @@
+### Button toggle

src/main/style/atom/button/button-toggle/button-toggle.mixin.pug

@@ -0,0 +1,5 @@
+mixin jhlite-button-toggle(opts)
+  - const { active, disabled } = opts || {};
+  - const activeClass = active ? '-active' : null;
+  button.jhlite-button-toggle(class=activeClass, disabled=disabled)
+    block

src/main/style/atom/button/button-toggle/button-toggle.render.pug

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include button-toggle.code.pug

src/main/style/atom/button/button.pug

@@ -5,3 +5,5 @@
     include:componentDoc(height=150) button-main/button-main.md
   .tikui-vertical-spacing--line
     include:componentDoc(height=150) button-switch/button-switch.md
+  .tikui-vertical-spacing--line
+    include:componentDoc(height=150) button-toggle/button-toggle.md

src/main/style/organism/_organism.scss

@@ -9,3 +9,4 @@
 @use 'landscape-loader/landscape-loader';
 @use 'landscape-minimap/landscape-minimap';
 @use 'landscape-preset-configuration/landscape-preset-configuration';
+@use 'landscape-rank-module-filter/landscape-rank-module-filter';

src/main/style/organism/landscape-rank-module-filter/_landscape-rank-module-filter.scss

@@ -0,0 +1,9 @@
+@use '../../token/size';
+
+.jhlite-landscape-rank-module-filter {
+  &--ranks {
+    display: flex;
+    gap: size.$jhlite-global-size-field-padding;
+    align-items: center;
+  }
+}

src/main/style/organism/landscape-rank-module-filter/landscape-rank-module-filter.code.pug

@@ -0,0 +1,3 @@
+include landscape-rank-module-filter.mixin.pug
+
++jhlite-landscape-rank-module-filter

src/main/style/organism/landscape-rank-module-filter/landscape-rank-module-filter.md

@@ -0,0 +1 @@
+## Landscape rank module filter

src/main/style/organism/landscape-rank-module-filter/landscape-rank-module-filter.mixin.pug

@@ -0,0 +1,10 @@
+include /atom/button/button-toggle/button-toggle.mixin.pug
+
+mixin jhlite-landscape-rank-module-filter
+  .jhlite-landscape-rank-module-filter
+    .jhlite-landscape-rank-module-filter--ranks
+      +jhlite-button-toggle D
+      +jhlite-button-toggle({ disabled: true }) C
+      +jhlite-button-toggle({ disabled: true }) B
+      +jhlite-button-toggle({ disabled: true }) A
+      +jhlite-button-toggle({ active: true }) S

src/main/style/organism/landscape-rank-module-filter/landscape-rank-module-filter.render.pug

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include landscape-rank-module-filter.code.pug

src/main/style/organism/landscape/_landscape.scss

@@ -3,7 +3,10 @@
 @use '../../token/size';
 
 $jhlite-landscape-padding: 20px;
+$jhipster-landscape-modes-selection-top-position: $jhlite-landscape-padding;
 $jhipster-landscape-preset-selection-top-position: 85px;
+$jhipster-landscape-modes-selection-top-position-large-screen: 85px;
+$jhipster-landscape-preset-selection-top-position-large-screen: 150px;
 $jhipster-landscape-preset-selection-left-position: $jhlite-landscape-padding;
 $jhlite-landscape-line-color: colors.$jhlite-global-line-color;
 $jhlite-landscape-box-radius: colors.$jhlite-global-box-radius;
@@ -23,7 +26,7 @@ $jhlite-landscape-primary-alternative-color: colors.$jhlite-global-primary-alter
 
   .jhipster-landscape-modes-selection {
     position: absolute;
-    top: $jhlite-landscape-padding;
+    top: $jhipster-landscape-modes-selection-top-position;
     left: $jhlite-landscape-padding;
     z-index: 3;
     border: 1px dotted $jhlite-landscape-line-color;
@@ -40,6 +43,13 @@ $jhlite-landscape-primary-alternative-color: colors.$jhlite-global-primary-alter
     background: var(--jhlite-chip-bg-color);
   }
 
+  .jhipster-landscape-rank-module-selection {
+    display: flex;
+    justify-content: center;
+    margin-left: $jhlite-landscape-padding;
+    background: var(--jhlite-chip-bg-color);
+  }
+
   .jhipster-landscape-content {
     &--header {
       display: none;
@@ -184,6 +194,11 @@ $jhlite-landscape-primary-alternative-color: colors.$jhlite-global-primary-alter
     border-radius: size.$jhlite-global-size-field-radius;
     box-shadow: 0 0 0 size.$jhlite-global-size-field-border-focus colors.$jhlite-attention-highlight-color;
   }
+
+  .-diff-rank-minimal-emphasis {
+    opacity: 0.5;
+    border: 1px dotted $jhlite-landscape-line-color;
+  }
 }
 
 .jhipster-landscape {
@@ -192,6 +207,14 @@ $jhlite-landscape-primary-alternative-color: colors.$jhlite-global-primary-alter
 
 @media screen and (min-width: breakpoint.$jhlite-global-breakpoint-small-medium) {
   .jhipster-landscape {
+    .jhipster-landscape-modes-selection {
+      top: $jhipster-landscape-modes-selection-top-position-large-screen;
+    }
+
+    .jhipster-landscape-preset-selection {
+      top: $jhipster-landscape-preset-selection-top-position-large-screen;
+    }
+
     .jhipster-landscape-content {
       display: flex;
       flex-direction: column;

src/main/style/organism/organism.pug

@@ -22,6 +22,8 @@ block content
       include:componentDoc(height=160) landscape-minimap/landscape-minimap.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=160) landscape-preset-configuration/landscape-preset-configuration.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=160) landscape-rank-module-filter/landscape-rank-module-filter.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=230) module-parameters/module-parameters.md
     .tikui-vertical-spacing--line

src/main/webapp/app/module/domain/ModuleRankCount.ts

@@ -0,0 +1,8 @@
+import { ModuleRank } from '@/module/domain/landscape/ModuleRank';
+
+type ModuleRankCountQuantity = number;
+
+export type ModuleRankCount = {
+  rank: ModuleRank;
+  quantity: ModuleRankCountQuantity;
+};

src/main/webapp/app/module/domain/ModuleRankStatistics.ts

@@ -0,0 +1,25 @@
+import { ModuleRankCount } from '@/module/domain/ModuleRankCount';
+import { Landscape } from '@/module/domain/landscape/Landscape';
+import { ModuleRank, RANKS } from '@/module/domain/landscape/ModuleRank';
+
+export type ModuleRankStatistics = ModuleRankCount[];
+
+export const toModuleRankStatistics = (landscape: Landscape): ModuleRankStatistics => {
+  const rankCounts = landscape
+    .standaloneLevels()
+    .flatMap(level => level.elements)
+    .flatMap(element => element.allModules())
+    .reduce(
+      (counts, module) => {
+        const currentCount = counts.get(module.rank())!;
+        counts.set(module.rank(), currentCount + 1);
+        return counts;
+      },
+      new Map<ModuleRank, number>(RANKS.map(rank => [rank, 0])),
+    );
+
+  return RANKS.map(rank => ({
+    rank,
+    quantity: rankCounts.get(rank)!,
+  }));
+};

src/main/webapp/app/module/domain/RankDescription.ts

@@ -0,0 +1,3 @@
+export type RankDescription = {
+  [key: string]: string;
+};

src/main/webapp/app/module/domain/landscape/Landscape.ts

@@ -1,3 +1,5 @@
+import { LandscapeElement } from '@/module/domain/landscape/LandscapeElement';
+import { ModuleRank } from '@/module/domain/landscape/ModuleRank';
 import { Memoizer } from '@/shared/memoizer/domain/Memoizer';
 import { Optional } from '@/shared/optional/domain/Optional';
 import { ModulePropertyDefinition } from '../ModulePropertyDefinition';
@@ -404,6 +406,66 @@ export class Landscape {
   selectedModulesProperties(): ModulePropertyDefinition[] {
     return this.properties;
   }
+
+  public hasModuleDifferentRank(module: ModuleSlug, rank: ModuleRank): boolean {
+    return this.getModule(module)
+      .map(currentModule => currentModule.rank() !== rank)
+      .orElse(false);
+  }
+
+  public filterByRank(rank: Optional<ModuleRank>): Landscape {
+    return rank.map(currentRank => this.createFilteredLandscape(currentRank)).orElse(this);
+  }
+
+  private createFilteredLandscape(rank: ModuleRank): Landscape {
+    const filteredLevels = this.projections.levels.map(level => this.filterLevel(level, rank)).filter(level => level.elements.length > 0);
+
+    return new Landscape(this.state, new LevelsProjections(filteredLevels));
+  }
+
+  private filterLevel(level: LandscapeLevel, rank: ModuleRank): { elements: LandscapeElement[] } {
+    return {
+      elements: level.elements.map(element => this.filterElementByRank(element, rank)).flatMap(optional => optional.toArray()),
+    };
+  }
+
+  private filterElementByRank(element: LandscapeElement, rank: ModuleRank): Optional<LandscapeElement> {
+    return element instanceof LandscapeFeature ? this.filterFeature(element, rank) : this.filterModule(element, rank);
+  }
+
+  private filterFeature(feature: LandscapeFeature, rank: ModuleRank): Optional<LandscapeElement> {
+    if (this.dependencyFeatureOfRankedModule(feature.slug(), rank)) {
+      return Optional.of(feature);
+    }
+
+    return Optional.of(feature.modules)
+      .filter(modules => modules.some(module => this.moduleMatchingRank(module, rank)))
+      .map(modules => modules.filter(module => this.moduleMatchingRank(module, rank)))
+      .map(filteredModules => new LandscapeFeature(feature.slug(), filteredModules));
+  }
+
+  private dependencyFeatureOfRankedModule(featureSlug: LandscapeFeatureSlug, rank: ModuleRank): boolean {
+    return Array.from(this.modules.values())
+      .filter(module => module.rank() === rank)
+      .some(rankedModule => rankedModule.dependencies().some(dep => dep.get() === featureSlug.get()));
+  }
+
+  private moduleMatchingRank(module: LandscapeModule, rank: ModuleRank): boolean {
+    return module.rank() === rank || this.dependencyOfRankedModule(module, rank);
+  }
+
+  private dependencyOfRankedModule(module: LandscapeModule, rank: ModuleRank): boolean {
+    return Optional.of(Array.from(this.modules.values()))
+      .map(modules => modules.filter(m => m.rank() === rank))
+      .map(rankedModules => rankedModules.some(rankedModule => rankedModule.dependencies().some(dep => dep.get() === module.slug().get())))
+      .orElse(false);
+  }
+
+  private filterModule(element: LandscapeElement, rank: ModuleRank): Optional<LandscapeElement> {
+    return Optional.of(element.allModules()[0])
+      .filter(module => this.moduleMatchingRank(module, rank))
+      .map(() => element);
+  }
 }
 
 class LandscapeState {

src/main/webapp/app/module/domain/landscape/LandscapeModule.ts

@@ -1,3 +1,4 @@
+import { ModuleRank } from '@/module/domain/landscape/ModuleRank';
 import { ModulePropertyDefinition } from '../ModulePropertyDefinition';
 import { ModuleSlug } from '../ModuleSlug';
 import { LandscapeElement } from './LandscapeElement';
@@ -11,6 +12,7 @@ export interface LandscapeModuleInformation {
   operation: ModuleOperation;
   properties: ModulePropertyDefinition[];
   dependencies: LandscapeElementId[];
+  rank: ModuleRank;
 }
 
 export interface LandscapeModuleContext {
@@ -49,6 +51,10 @@ export class LandscapeModule implements LandscapeElement {
     return this.information.dependencies;
   }
 
+  rank(): ModuleRank {
+    return this.information.rank;
+  }
+
   operation(): string {
     return this.information.operation;
   }

src/main/webapp/app/module/domain/landscape/ModuleRank.ts

@@ -0,0 +1,2 @@
+export const RANKS = ['RANK_D', 'RANK_C', 'RANK_B', 'RANK_A', 'RANK_S'] as const;
+export type ModuleRank = (typeof RANKS)[number];

src/main/webapp/app/module/primary/landscape-rank-module-filter/LandscapeRankModuleFilter.component.ts

@@ -0,0 +1,54 @@
+import type { ModuleRank } from '@/module/domain/landscape/ModuleRank';
+import { RANKS } from '@/module/domain/landscape/ModuleRank';
+import type { ModuleRankStatistics } from '@/module/domain/ModuleRankStatistics';
+import type { RankDescription } from '@/module/domain/RankDescription';
+import { PropType, defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  name: 'LandscapeRankModuleFilterVue',
+  props: {
+    moduleRankStatistics: {
+      type: Array as PropType<ModuleRankStatistics>,
+      required: true,
+    },
+  },
+  emits: ['selected'],
+  setup(props, { emit }) {
+    const ranks = RANKS;
+    const selectedRank = ref<ModuleRank | undefined>(undefined);
+
+    const rankDescriptions: RankDescription = {
+      RANK_D: 'Experimental or advanced module requiring specific expertise',
+      RANK_C: 'Module without known production usage',
+      RANK_B: 'Module with at least one confirmed production usage',
+      RANK_A: 'Module with multiple production usages across different projects and documented through talks, books or blog posts',
+      RANK_S: 'Production-proven module providing unique features, validated by community feedback (10+ endorsements)',
+    };
+
+    const isRankSelected = (rank: ModuleRank): boolean => selectedRank.value === rank;
+
+    const toggleRank = (rank: ModuleRank): void => {
+      if (selectedRank.value === rank) {
+        selectedRank.value = undefined;
+      } else {
+        selectedRank.value = rank;
+      }
+      emit('selected', selectedRank.value);
+    };
+
+    const formatRank = (rank: ModuleRank): string => rank.replace('RANK_', '');
+
+    const getRankDescription = (rank: ModuleRank): string => rankDescriptions[rank];
+
+    const isRankDisabled = (rank: ModuleRank): boolean => props.moduleRankStatistics.find(ru => ru.rank === rank)?.quantity === 0;
+
+    return {
+      ranks,
+      isRankSelected,
+      toggleRank,
+      formatRank,
+      getRankDescription,
+      isRankDisabled,
+    };
+  },
+});

src/main/webapp/app/module/primary/landscape-rank-module-filter/LandscapeRankModuleFilter.html

@@ -0,0 +1,16 @@
+<div class="landscape-rank-module-filter">
+  <div class="jhlite-landscape-rank-module-filter--ranks">
+    <button
+      v-for="rank in ranks"
+      :key="rank"
+      class="jhlite-button-toggle"
+      :class="{ '-active': isRankSelected(rank) }"
+      @click="toggleRank(rank)"
+      :data-testid="`rank-${rank}-filter`"
+      :title="getRankDescription(rank)"
+      :disabled="isRankDisabled(rank)"
+    >
+      {{ formatRank(rank) }}
+    </button>
+  </div>
+</div>

src/main/webapp/app/module/primary/landscape-rank-module-filter/LandscapeRankModuleFilter.vue

@@ -0,0 +1,3 @@
+<template src="./LandscapeRankModuleFilter.html"></template>
+
+<script lang="ts" src="./LandscapeRankModuleFilter.component.ts"></script>

src/main/webapp/app/module/primary/landscape-rank-module-filter/index.ts

@@ -0,0 +1,3 @@
+import LandscapeRankModuleFilterVue from './LandscapeRankModuleFilter.vue';
+
+export { LandscapeRankModuleFilterVue };