From 5d7327bf041db3263d1a8d7870d3ee65741f6ce9 Mon Sep 17 00:00:00 2001
From: Manfred Steyer <manfred.steyer@gmx.net>
Date: Tue, 15 Oct 2024 11:25:48 +0200
Subject: [PATCH] feat: make treemap responsive

---
 .../app/features/hotspot/hotspot-adapter.ts   | 25 +++++++++++++------
 .../features/hotspot/hotspot.component.html   |  2 +-
 .../app/features/hotspot/hotspot.component.ts |  6 ++---
 .../src/app/ui/treemap/treemap.component.html |  4 +--
 .../src/app/ui/treemap/treemap.component.ts   |  2 +-
 5 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/apps/frontend/src/app/features/hotspot/hotspot-adapter.ts b/apps/frontend/src/app/features/hotspot/hotspot-adapter.ts
index 122bc5e..d121df2 100644
--- a/apps/frontend/src/app/features/hotspot/hotspot-adapter.ts
+++ b/apps/frontend/src/app/features/hotspot/hotspot-adapter.ts
@@ -4,25 +4,34 @@ import { ChartEvent, InteractionItem } from 'chart.js';
 
 import { AggregatedHotspot } from '../../model/hotspot-result';
 import { TreeMapChartConfig } from '../../ui/treemap/treemap.component';
+import { lastSegments } from '../../utils/segments';
 
 export type ScoreType = 'hotspot' | 'warning' | 'fine';
-export type AggregatedHotspotWithType = AggregatedHotspot & {
+export type AggregatedHotspotVM = AggregatedHotspot & {
   type: ScoreType;
+  displayParent: string;
 };
 
 export function toTreeMapConfig(
   aggregated: AggregatedHotspot[]
 ): TreeMapChartConfig {
-  const values = aggregated.flatMap((v) => [
-    { ...v, count: v.countHotspot, type: 'hotspot' },
-    { ...v, count: v.countWarning, type: 'warning' },
-    { ...v, count: v.countOk, type: 'fine' },
-  ]);
+  const values = aggregated
+    .map((a) => ({
+      ...a,
+      displayParent: lastSegments(a.parent, 1),
+    }))
+    .flatMap((v) => [
+      { ...v, count: v.countHotspot, type: 'hotspot' },
+      { ...v, count: v.countWarning, type: 'warning' },
+      { ...v, count: v.countOk, type: 'fine' },
+    ]) as AggregatedHotspotVM[];
 
   const options = {
+    responsive: true,
+    maintainAspectRatio: false,
     onHover: (event: ChartEvent, elements: InteractionItem[]) => {
       const chartElement = event.native?.target as HTMLCanvasElement;
-      if (elements.length >= 2) {
+      if (elements.length > 2) {
         chartElement.style.cursor = 'pointer';
       } else {
         chartElement.style.cursor = 'default';
@@ -53,7 +62,7 @@ export function toTreeMapConfig(
         {
           data: values,
           key: 'count',
-          groups: ['parent', 'module', 'type'],
+          groups: ['displayParent', 'module', 'type'],
           spacing: 1,
           borderWidth: 0.5,
           borderColor: '#EFEFEF',
diff --git a/apps/frontend/src/app/features/hotspot/hotspot.component.html b/apps/frontend/src/app/features/hotspot/hotspot.component.html
index 6d1fd46..0250f5f 100644
--- a/apps/frontend/src/app/features/hotspot/hotspot.component.html
+++ b/apps/frontend/src/app/features/hotspot/hotspot.component.html
@@ -19,7 +19,7 @@
     </mat-form-field>
 
     <mat-icon
-      matTooltip="A Hotspot is a complex file that was previously changed quite often and hence comes with a higher risk for bugs."
+      matTooltip="A Hotspot is a complex file that was previously changed quite often and hence comes with a higher risk for bugs. The calculated hotspot score is the product of the amount of changes and the complexity. You can see it as an sort index and you cannot compare it with other hotspot analyses. The slider on the left defines when a region is identified as a hotspot. For instance, 33% defines that each region having 33% or more of the maximum hotspot score is a hotspot. For a better overview, these hotspots are seperated into two equal areas: the lowever half is displayed yellow and the upper half is red."
       matTooltipPosition="above"
       class="help-icon-hotspot"
     >
diff --git a/apps/frontend/src/app/features/hotspot/hotspot.component.ts b/apps/frontend/src/app/features/hotspot/hotspot.component.ts
index 78898ec..f4e6ba3 100644
--- a/apps/frontend/src/app/features/hotspot/hotspot.component.ts
+++ b/apps/frontend/src/app/features/hotspot/hotspot.component.ts
@@ -32,7 +32,7 @@ import { lastSegments } from '../../utils/segments';
 import { mirror } from '../../utils/signal-helpers';
 
 import {
-  AggregatedHotspotWithType,
+  AggregatedHotspotVM,
   ScoreType,
   toTreeMapConfig,
 } from './hotspot-adapter';
@@ -119,7 +119,7 @@ export class HotspotComponent {
   }
 
   selectModule(event: TreeMapEvent): void {
-    const selected = event.entry as AggregatedHotspotWithType;
+    const selected = event.entry as AggregatedHotspotVM;
     const selectedModule = [selected.parent, selected.module].join('/');
     const scoreRange = this.getScoreRange(selected);
 
@@ -137,7 +137,7 @@ export class HotspotComponent {
     });
   }
 
-  private getScoreRange(selected: AggregatedHotspotWithType) {
+  private getScoreRange(selected: AggregatedHotspotVM) {
     const range = this.getScoreBoundaries();
     const index = getScoreIndex(selected.type);
 
diff --git a/apps/frontend/src/app/ui/treemap/treemap.component.html b/apps/frontend/src/app/ui/treemap/treemap.component.html
index bcacfdc..73e9854 100644
--- a/apps/frontend/src/app/ui/treemap/treemap.component.html
+++ b/apps/frontend/src/app/ui/treemap/treemap.component.html
@@ -1,3 +1,3 @@
-<div class="tm-container">
-  <canvas #canvas class="tm-diagram"></canvas>
+<div class="tm-container" style="width: 100%">
+  <canvas #canvas class="tm-diagram" style="width: 100%"></canvas>
 </div>
diff --git a/apps/frontend/src/app/ui/treemap/treemap.component.ts b/apps/frontend/src/app/ui/treemap/treemap.component.ts
index 3bcb21a..8405c4f 100644
--- a/apps/frontend/src/app/ui/treemap/treemap.component.ts
+++ b/apps/frontend/src/app/ui/treemap/treemap.component.ts
@@ -82,7 +82,7 @@ export class TreeMapComponent implements OnChanges, OnDestroy {
       _event: ChartEvent,
       elements: InteractionItem[]
     ) => {
-      if (elements.length > 0) {
+      if (elements.length > 2) {
         const element = elements[elements.length - 1];
         const dataIndex = element.index;
         const dataset = config.data.datasets[0];