fix: only show hotspots in current score range (green, yellow, red)

apps/backend/project.json

@@ -14,7 +14,7 @@
         "runBuildTargetDependencies": false,
         "args": [
           "--path",
-          "/Users/manfredsteyer/tmp/angular",
+          "/Users/manfredsteyer/projects/public/standalone-example-cli",
           "--open",
           "false"
         ]

apps/backend/src/services/hotspot.ts

@@ -144,17 +144,15 @@ function aggregateStats(
     let countOk = 0;
 
     for (const stat of moduleStats) {
-      if (stat > hotspotBoundary) {
+      if (stat >= hotspotBoundary) {
         countHotspot++;
-      } else if (stat < warningBoundary) {
-        countOk++;
-      } else {
+      } else if (stat >= warningBoundary) {
         countWarning++;
+      } else {
+        countOk++;
       }
     }
 
-    // const countBelow = moduleStats.length - count;
-
     const displayFolder = toDisplayFolder(module);
     const parent = path.dirname(displayFolder);
 

apps/frontend/src/app/features/hotspot/hotspot-detail/hotspot-detail.component.html

@@ -11,7 +11,7 @@ <h2 class="title mat-dialog-title">
   <div class="p10">
     @if (loadingHotspots()) { Determining Hotspots ...
     <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-    } @else if (hotspotResult().hotspots.length > 0) {
+    } @else if (hotspots().length > 0) {
     <div xclass="mat-elevation-z8">
       <table mat-table [dataSource]="detailDataSource">
         <ng-container matColumnDef="fileName">

apps/frontend/src/app/features/hotspot/hotspot-detail/hotspot-detail.component.ts

@@ -45,11 +45,11 @@ export class HotspotDetailComponent {
   loadingHotspots = this.hotspotStore.loadingHotspots;
 
   aggregatedResult = this.hotspotStore.aggregatedResult;
-  hotspotResult = this.hotspotStore.hotspotResult;
+  hotspots = this.hotspotStore.hotspotsInRange;
 
   formattedHotspots = computed(() =>
     formatHotspots(
-      this.hotspotResult().hotspots,
+      this.hotspots(),
       untracked(() => this.hotspotStore.filter.module())
     )
   );

apps/frontend/src/app/features/hotspot/hotspot.component.ts

@@ -98,6 +98,8 @@ export class HotspotComponent {
   treeMapConfig = computed(() => toTreeMapConfig(this.formattedAggregated()));
 
   constructor() {
+    this.hotspotStore.resetResults();
+
     const loadAggregatedEvents = {
       filterChanged: this.eventService.filterChanged.pipe(startWith(null)),
       minScore: toObservable(this.minScore().value).pipe(

apps/frontend/src/app/features/hotspot/hotspot.store.ts

@@ -1,5 +1,11 @@
-import { inject } from '@angular/core';
-import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
+import { computed, inject } from '@angular/core';
+import {
+  patchState,
+  signalStore,
+  withComputed,
+  withMethods,
+  withState,
+} from '@ngrx/signals';
 import { rxMethod } from '@ngrx/signals/rxjs-interop';
 import { catchError, filter, Observable, of, pipe, switchMap, tap } from 'rxjs';
 
@@ -21,6 +27,7 @@ export type HotspotFilter = {
   minScore: number;
   metric: ComplexityMetric;
   module: string;
+  scoreRange: ScoreRange;
 };
 
 export type LoadAggregateOptions = {
@@ -62,6 +69,16 @@ export const HotspotStore = signalStore(
     loadingAggregated: false,
     loadingHotspots: false,
   }),
+  withComputed((store) => ({
+    hotspotsInRange: computed(() =>
+      store.hotspotResult().hotspots.filter((h) => {
+        return (
+          h.score >= store.filter().scoreRange.from &&
+          h.score < store.filter().scoreRange.to
+        );
+      })
+    ),
+  })),
   withMethods(
     (
       store,
@@ -132,7 +149,15 @@ export const HotspotStore = signalStore(
       },
     })
   ),
+
   withMethods((store) => ({
+    resetResults(): void {
+      patchState(store, {
+        aggregatedResult: initAggregatedHotspotsResult,
+        hotspotResult: initHotspotResult,
+      });
+    },
+
     updateFilter(filter: Partial<HotspotFilter>) {
       patchState(store, (state) => ({
         filter: {

apps/frontend/src/app/ui/treemap/treemap.component.ts

@@ -71,10 +71,16 @@ export class TreeMapComponent implements OnChanges, OnDestroy {
     const ctx = canvas.getContext('2d');
     const config = this.chartConfig();
 
+    if (config.data.datasets[0].data.length === 0) {
+      return;
+    }
+
     if (!ctx) {
       throw new Error('2d context not found');
     }
 
+    console.log('config', config);
+
     this.chart?.destroy();
 
     config.options = config.options ?? {};