feat: allow copying filenames into clipboard

apps/frontend/src/app/app.config.ts

@@ -1,10 +1,12 @@
+import { ClipboardModule } from '@angular/cdk/clipboard';
 import { provideHttpClient } from '@angular/common/http';
 import {
   ApplicationConfig,
   importProvidersFrom,
   provideZoneChangeDetection,
 } from '@angular/core';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideRouter, withComponentInputBinding } from '@angular/router';
 
@@ -19,5 +21,7 @@ export const appConfig: ApplicationConfig = {
     provideErrorHandler(AppErrorHandler),
     provideAnimationsAsync(),
     importProvidersFrom(MatDialogModule),
+    importProvidersFrom(MatSnackBarModule),
+    importProvidersFrom(ClipboardModule),
   ],
 };

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

@@ -2,3 +2,15 @@
   margin-left: 15px;
   margin-top: 10px;
 }
+
+.copy-icon {
+  font-size: 16px;
+  padding: 0px;
+  margin: 0px;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.copy-link {
+  cursor: pointer;
+}

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

@@ -16,7 +16,12 @@ <h2 class="title mat-dialog-title">
       <table mat-table [dataSource]="detailDataSource">
         <ng-container matColumnDef="fileName">
           <th mat-header-cell *matHeaderCellDef>Module</th>
-          <td mat-cell *matCellDef="let element">{{ element.fileName }}</td>
+          <td mat-cell *matCellDef="let element">
+            <a class="copy-link" (click)="copy(element.fileName)">
+              <mat-icon class="copy-icon">content_copy</mat-icon>
+              {{ element.fileName }}
+            </a>
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="commits">

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

@@ -1,3 +1,4 @@
+import { Clipboard } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
 import {
   Component,
@@ -8,8 +9,10 @@ import {
   viewChild,
 } from '@angular/core';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatProgressBar } from '@angular/material/progress-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 
@@ -27,13 +30,17 @@ import { HotspotStore } from '../hotspot.store';
     MatPaginator,
     MatProgressBar,
     MatDialogModule,
+    MatIconModule,
   ],
   templateUrl: './hotspot-detail.component.html',
   styleUrl: './hotspot-detail.component.css',
 })
 export class HotspotDetailComponent {
   private hotspotStore = inject(HotspotStore);
 
+  private clipboard = inject(Clipboard);
+  private snackBar = inject(MatSnackBar);
+
   module = this.hotspotStore.filter.module;
   color = computed(() => getScoreTypeColor(this.hotspotStore.scoreType()));
 
@@ -67,6 +74,20 @@ export class HotspotDetailComponent {
       }
     });
   }
+
+  copy(fileName: string) {
+    if (this.clipboard.copy(fileName)) {
+      this.snackBar.open('Filename copied to clipboard', 'Ok', {
+        duration: 3000,
+      });
+    } else {
+      console.log('Error writing to clipboard');
+      this.snackBar.open(
+        'Writing the filename to the clipboard did not work',
+        'Ok'
+      );
+    }
+  }
 }
 
 function formatHotspots(

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

@@ -55,3 +55,8 @@
 .min-score {
   width: 120px;
 }
+
+.docu-link {
+  margin-right: 15px;
+  margin-left: 0px;
+}

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

@@ -1,6 +1,15 @@
 <div class="forensic-filter">
   <div>
-    <mat-label>Min. Score: (%)</mat-label>
+    <a
+      mat-stroked-button
+      class="docu-link"
+      target="_blank"
+      href="https://github.com/angular-architects/detective?tab=readme-ov-file#filtering-the-git-log"
+    >
+      Filter
+    </a>
+
+    <mat-label>Tolerance</mat-label>
 
     <mat-slider min="0" max="100" step="1" style="width: 150px">
       <input matSliderThumb value="1" [(ngModel)]="minScore().value" />
@@ -19,7 +28,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. 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 lower half is displayed yellow and the upper half is red."
+      matTooltip="A Hotspot is a complex file that was previously changed quite often and hence comes with a higher risk for bugs."
       matTooltipPosition="above"
       class="help-icon-hotspot"
     >

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

@@ -1,6 +1,7 @@
 import { Component, computed, inject } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -62,6 +63,7 @@ interface Option {
     MatIconModule,
     MatTooltipModule,
     TreeMapComponent,
+    MatButtonModule,
   ],
   templateUrl: './hotspot.component.html',
   styleUrl: './hotspot.component.css',
@@ -156,7 +158,7 @@ export class HotspotComponent {
       0,
       result.warningBoundary,
       result.hotspotBoundary,
-      result.maxScore,
+      result.maxScore + 1,
     ];
     return range;
   }