feat: make treemap responsive

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',

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"
     >

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);
 

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>

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];