From 752c022b8f7d85c9a689483873fe3fd2531e43f0 Mon Sep 17 00:00:00 2001
From: MatthijsSmets <s1122126@student.hsleiden.nl>
Date: Thu, 27 Jun 2024 16:41:00 +0200
Subject: [PATCH 1/2] fix: selected report in table stays selected when new
 reports are loaded

---
 src/app/debug/table/table.component.html |  2 +-
 src/app/debug/table/table.component.ts   | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app/debug/table/table.component.html b/src/app/debug/table/table.component.html
index 870252ac..a3db73bb 100644
--- a/src/app/debug/table/table.component.html
+++ b/src/app/debug/table/table.component.html
@@ -117,7 +117,7 @@ <h4 class="progress-report-timout">[One or more reports are in progress for more
             @for (row of tableSettings.reportMetadata.slice(0, tableSettings.displayAmount); let index = $index; track row.storageId) {
               <tr class="table-row"
                   (click)="openSelectedReport(row.storageId, index);"
-                  [ngClass]="{'highlight': selectedRow === index}"
+                  [ngClass]="{'highlight': row.storageId === selectedReportStorageId}"
                   [style.background-color]="getStatusColor(row)"
                   [attr.data-cy-record-table-index]="index"
               >
diff --git a/src/app/debug/table/table.component.ts b/src/app/debug/table/table.component.ts
index 2bd16df3..b2523060 100644
--- a/src/app/debug/table/table.component.ts
+++ b/src/app/debug/table/table.component.ts
@@ -17,17 +17,17 @@ import { ToastComponent } from '../../shared/components/toast/toast.component';
 import { MatSortModule } from '@angular/material/sort';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { ActiveFiltersComponent } from '../active-filters/active-filters.component';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {
   NgbDropdown,
-  NgbDropdownToggle,
-  NgbDropdownMenu,
   NgbDropdownButtonItem,
   NgbDropdownItem,
+  NgbDropdownMenu,
+  NgbDropdownToggle,
 } from '@ng-bootstrap/ng-bootstrap';
 import { ButtonComponent } from '../../shared/components/button/button.component';
 import { FilterSideDrawerComponent } from '../filter-side-drawer/filter-side-drawer.component';
-import { NgIf, NgFor, NgClass, KeyValuePipe } from '@angular/common';
+import { KeyValuePipe, NgClass, NgFor, NgIf } from '@angular/common';
 
 @Component({
   selector: 'app-table',
@@ -124,6 +124,7 @@ export class TableComponent implements OnInit, OnDestroy {
   hasTimedOut: boolean = false;
   reportsInProgress: Record<string, number> = {};
   reportsInProgressThreshold!: number;
+  protected selectedReportStorageId?: string;
 
   constructor(
     private httpService: HttpService,
@@ -489,6 +490,7 @@ export class TableComponent implements OnInit, OnDestroy {
   }
 
   openSelectedReport(storageId: string, index: number) {
+    this.selectedReportStorageId = storageId;
     this.openReport(storageId);
     this.highLightRow(index);
   }

From eb811f9562651ad1d8dd3e40730a6aca1fa6f906 Mon Sep 17 00:00:00 2001
From: MatthijsSmets <s1122126@student.hsleiden.nl>
Date: Thu, 27 Jun 2024 19:11:33 +0200
Subject: [PATCH 2/2] refactor: cleanup code

---
 src/app/debug/table/table.component.html | 2 +-
 src/app/debug/table/table.component.ts   | 9 +--------
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/app/debug/table/table.component.html b/src/app/debug/table/table.component.html
index a3db73bb..44ad7415 100644
--- a/src/app/debug/table/table.component.html
+++ b/src/app/debug/table/table.component.html
@@ -116,7 +116,7 @@ <h4 class="progress-report-timout">[One or more reports are in progress for more
           <tbody data-cy-debug="tableBody">
             @for (row of tableSettings.reportMetadata.slice(0, tableSettings.displayAmount); let index = $index; track row.storageId) {
               <tr class="table-row"
-                  (click)="openSelectedReport(row.storageId, index);"
+                  (click)="openSelectedReport(row.storageId);"
                   [ngClass]="{'highlight': row.storageId === selectedReportStorageId}"
                   [style.background-color]="getStatusColor(row)"
                   [attr.data-cy-record-table-index]="index"
diff --git a/src/app/debug/table/table.component.ts b/src/app/debug/table/table.component.ts
index b2523060..b438592c 100644
--- a/src/app/debug/table/table.component.ts
+++ b/src/app/debug/table/table.component.ts
@@ -104,7 +104,6 @@ export class TableComponent implements OnInit, OnDestroy {
   @Output() openReportEvent = new EventEmitter<any>();
   @ViewChild(TableSettingsModalComponent)
   tableSettingsModal!: TableSettingsModalComponent;
-  selectedRow: number = -1;
   doneRetrieving: boolean = false;
   tableSpacing!: number;
   tableSpacingSubscription?: Subscription;
@@ -232,7 +231,6 @@ export class TableComponent implements OnInit, OnDestroy {
     this.viewSettings.currentViewName = event.target.value;
     this.clearFilters();
     this.debugReportService.changeView(this.viewSettings.currentView);
-    this.selectedRow = -1;
     this.filterService.setMetadataLabels(this.viewSettings.currentView.metadataLabels);
     this.viewChange.next(this.viewSettings.currentViewName);
   }
@@ -485,14 +483,9 @@ export class TableComponent implements OnInit, OnDestroy {
     });
   }
 
-  highLightRow(event: any): void {
-    this.selectedRow = event;
-  }
-
-  openSelectedReport(storageId: string, index: number) {
+  openSelectedReport(storageId: string) {
     this.selectedReportStorageId = storageId;
     this.openReport(storageId);
-    this.highLightRow(index);
   }
 
   openLatestReports(amount: number): void {