From 943ff2f0dcd2c84360537992ad59ba421846d6e7 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 14 Dec 2024 11:37:39 +0100
Subject: [PATCH] Feature/improve usability of X-ray page by hiding empty rule
 categories (#4108)

* Hide empty rule categories

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../src/app/portfolio/portfolio.controller.ts |  4 +--
 .../portfolio/x-ray/x-ray-page.component.html | 35 ++++++++++++++++---
 .../portfolio/x-ray/x-ray-page.component.ts   |  2 +-
 4 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 349e62646..449b610f5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the usability of the _X-ray_ page by hiding empty rule categories
 - Improved the language localization for German (`de`)
 
 ## 2.128.0 - 2024-12-12
diff --git a/apps/api/src/app/portfolio/portfolio.controller.ts b/apps/api/src/app/portfolio/portfolio.controller.ts
index 0e4022969..797d0449a 100644
--- a/apps/api/src/app/portfolio/portfolio.controller.ts
+++ b/apps/api/src/app/portfolio/portfolio.controller.ts
@@ -619,9 +619,7 @@ export class PortfolioController {
       this.request.user.subscription.type === 'Basic'
     ) {
       for (const rule in report.rules) {
-        if (report.rules[rule]) {
-          report.rules[rule] = [];
-        }
+        report.rules[rule] = null;
       }
 
       report.statistics = {
diff --git a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.html b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.html
index 37d9c89c4..4af225c49 100644
--- a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.html
+++ b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.html
@@ -24,7 +24,12 @@
           <ng-container i18n>rules align with your portfolio.</ng-container>
         }
       </p>
-      <div class="mb-4">
+      <div
+        class="mb-4"
+        [ngClass]="{
+          'd-none': emergencyFundRules?.length === 0
+        }"
+      >
         <h4 class="align-items-center d-flex m-0">
           <span i18n>Emergency Fund</span>
           @if (user?.subscription?.type === 'Basic') {
@@ -43,7 +48,12 @@
           (rulesUpdated)="onRulesUpdated($event)"
         />
       </div>
-      <div class="mb-4">
+      <div
+        class="mb-4"
+        [ngClass]="{
+          'd-none': currencyClusterRiskRules?.length === 0
+        }"
+      >
         <h4 class="align-items-center d-flex m-0">
           <span i18n>Currency Cluster Risks</span>
           @if (user?.subscription?.type === 'Basic') {
@@ -62,7 +72,12 @@
           (rulesUpdated)="onRulesUpdated($event)"
         />
       </div>
-      <div class="mb-4">
+      <div
+        class="mb-4"
+        [ngClass]="{
+          'd-none': accountClusterRiskRules?.length === 0
+        }"
+      >
         <h4 class="align-items-center d-flex m-0">
           <span i18n>Account Cluster Risks</span>
           @if (user?.subscription?.type === 'Basic') {
@@ -81,7 +96,12 @@
           (rulesUpdated)="onRulesUpdated($event)"
         />
       </div>
-      <div class="mb-4">
+      <div
+        class="mb-4"
+        [ngClass]="{
+          'd-none': economicMarketClusterRiskRules?.length === 0
+        }"
+      >
         <h4 class="align-items-center d-flex m-0">
           <span i18n>Economic Market Cluster Risks</span>
           @if (user?.subscription?.type === 'Basic') {
@@ -100,7 +120,12 @@
           (rulesUpdated)="onRulesUpdated($event)"
         />
       </div>
-      <div class="mb-4">
+      <div
+        class="mb-4"
+        [ngClass]="{
+          'd-none': feeRules?.length === 0
+        }"
+      >
         <h4 class="align-items-center d-flex m-0">
           <span i18n>Fees</span>
           @if (user?.subscription?.type === 'Basic') {
diff --git a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts
index 86bc37737..9bfe30fb6 100644
--- a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts
@@ -134,7 +134,7 @@ export class XRayPageComponent {
     let inactiveRules: PortfolioReportRule[] = [];
 
     for (const category in rules) {
-      const rulesArray = rules[category];
+      const rulesArray = rules[category] || [];
 
       inactiveRules = inactiveRules.concat(
         rulesArray.filter(({ isActive }) => {