feat: allow user to select amount of spacing

src/app/debug/table/table-settings-modal/table-settings-modal.component.html

@@ -21,6 +21,16 @@ <h5>Debug tree</h5>
         </div>
       </div>
       <hr>
+      <div class="form-group">
+        <h5>Report table</h5>
+        <div title="Configure the amount of spacing in the report table">
+          <label for="show-multiple">Spacing for report table</label>
+          <select #spacingOptionsDropdown class="form-control custom-select mr-sm-2" (click)="changeTableSpacing(spacingOptionsDropdown.value)">
+            <option [value]="option" *ngFor="let option of spacingOptions" [selected]="option === tableSpacing">{{option}}</option>
+          </select>
+        </div>
+      </div>
+      <hr>
       <div class="form-group">
         <label>Report generator</label>
         <select class="form-control custom-select mr-sm-2" formControlName="generatorEnabled">

src/app/debug/table/table-settings-modal/table-settings-modal.component.ts

@@ -16,8 +16,12 @@ export class TableSettingsModalComponent implements OnDestroy {
   @ViewChild('modal') modal!: ElementRef;
   showMultipleAtATime!: boolean;
   showMultipleAtATimeSubscription!: Subscription;
-  settingsForm = new UntypedFormGroup({
+  tableSpacing: number = 0;
+  spacingOptions: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+  tableSpacingSubscription!: Subscription;
+  settingsForm: UntypedFormGroup = new UntypedFormGroup({
     showMultipleFilesAtATime: new UntypedFormControl(false),
+    tableSpacing: new UntypedFormControl(this.tableSpacing),
     generatorEnabled: new UntypedFormControl('Enabled'),
     regexFilter: new UntypedFormControl(''),
     transformationEnabled: new UntypedFormControl(true),
@@ -38,6 +42,7 @@ export class TableSettingsModalComponent implements OnDestroy {
 
   ngOnDestroy() {
     this.showMultipleAtATimeSubscription.unsubscribe();
+    this.tableSpacingSubscription.unsubscribe();
   }
 
   subscribeToSettingsServiceObservables(): void {
@@ -47,6 +52,10 @@ export class TableSettingsModalComponent implements OnDestroy {
         this.settingsForm.get('showMultipleFilesAtATime')?.setValue(this.showMultipleAtATime);
       }
     );
+    this.tableSpacingSubscription = this.settingsService.tableSpacingObservable.subscribe((value: number) => {
+      this.tableSpacing = value;
+      this.settingsForm.get('tableSpacing')?.setValue(this.tableSpacing);
+    });
   }
 
   setShowMultipleAtATime() {
@@ -121,4 +130,8 @@ export class TableSettingsModalComponent implements OnDestroy {
     this.settingsForm.get('generatorEnabled')?.setValue(generatorStatus);
     this.settingsForm.get('regexFilter')?.setValue(response.regexFilter);
   }
+
+  changeTableSpacing(value: any): void {
+    this.settingsService.setTableSpacing(Number(value));
+  }
 }

src/app/debug/table/table.component.css

@@ -25,18 +25,10 @@
   height: 100%;
 }
 
-tr {
-  padding: 0.05rem 0 0.05rem 0;
-}
-
 th {
   padding: 0 0 0 0;
 }
 
-td {
-  padding: 0;
-}
-
 .table-row:hover {
   cursor: pointer;
   filter: brightness(85%);
@@ -48,7 +40,6 @@ td {
   justify-content: center;
   text-align: center;
   vertical-align: middle;
-  padding-right: 0.25rem;
 }
 
 .header-padding {

src/app/debug/table/table.component.html

@@ -62,11 +62,11 @@
     <mat-spinner [mode]="'indeterminate'" [diameter]="30"></mat-spinner>
   </div>
   <div [hidden]="!doneRetrieving" class="table-responsive" id="metadataTable">
-    <table class="table mb-0" matSort (matSortChange)="helperService.sortData($event, tableSettings.reportMetadata)">
+    <table class="table mb-0" matSort (matSortChange)="helperService.sortData($event, tableSettings.reportMetadata)" [style.font-size]="getFontSize()">
       <thead id="table-header">
         <tr>
           <th class="table-row-checkbox header-padding">
-            <input type="checkbox" class="vertical-middle" data-cy-select-all-reports [checked]="allRowsSelected" (click)="selectAllRows()" title="Select all rows">
+            <input type="checkbox" class="vertical-middle" data-cy-select-all-reports [checked]="allRowsSelected" (click)="selectAllRows()" title="Select all rows" [style.width]="getCheckBoxSize()" [style.height]="getCheckBoxSize()">
           </th>
           <th class="text-center header-cell header-padding" *ngFor="let header of viewSettings.currentView.metadataLabels; let i = index"
               mat-sort-header="{{i}}" [title]="header">{{getShortenedTableHeaderNames(header)}}</th>
@@ -86,13 +86,13 @@
         <tr class="table-row" *ngFor="let row of tableSettings.reportMetadata.slice(0, tableSettings.displayAmount); let i = index"
             (click)="highLightRow(i);"
             [ngClass]="{'highlight': selectedRow === i}"
-            style="background-color: {{getStatusColor(row)}}"
+            style="background-color: {{getStatusColor(row)}};"
             [attr.data-cy-record-table-index]=i
         >
-          <td class="table-row-checkbox">
-            <input type="checkbox" [checked]="row.checked" (click)="toggleCheck(row)">
+          <td class="table-row-checkbox" [style.padding]="getTableSpacing()">
+            <input type="checkbox" [checked]="row.checked" (click)="toggleCheck(row)" [style.width]="getCheckBoxSize()" [style.height]="getCheckBoxSize()">
           </td>
-          <td class="table-cell" *ngFor="let metadataName of viewSettings.currentView.metadataNames" (click)="openReport(row.storageId);" [title]="row[metadataName]">{{row[metadataName]|tableCellShortener}}</td>
+          <td [style.padding]="getTableSpacing()" class="table-cell" *ngFor="let metadataName of viewSettings.currentView.metadataNames" (click)="openReport(row.storageId);" [title]="row[metadataName]">{{row[metadataName]|tableCellShortener}}</td>
         </tr>
       </tbody>
     </table>

src/app/debug/table/table.component.ts

@@ -1,20 +1,21 @@
-import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
 import { ToastComponent } from '../../shared/components/toast/toast.component';
 import { HelperService } from '../../shared/services/helper.service';
 import { HttpService } from '../../shared/services/http.service';
 import { TableSettingsModalComponent } from './table-settings-modal/table-settings-modal.component';
 import { TableSettings } from '../../shared/interfaces/table-settings';
-import { catchError } from 'rxjs';
+import { catchError, Subscription } from 'rxjs';
 import { Report } from '../../shared/interfaces/report';
 import { CookieService } from 'ngx-cookie-service';
 import { ChangeNodeLinkStrategyService } from '../../shared/services/node-link-strategy.service';
+import { SettingsService } from '../../shared/services/settings.service';
 
 @Component({
   selector: 'app-table',
   templateUrl: './table.component.html',
   styleUrls: ['./table.component.css'],
 })
-export class TableComponent implements OnInit {
+export class TableComponent implements OnInit, OnDestroy {
   DEFAULT_DISPLAY_AMOUNT: number = 10;
   metadataCount = 0;
   viewSettings: any = {
@@ -66,18 +67,32 @@ export class TableComponent implements OnInit {
   selectedRow: number = -1;
   doneRetrieving: boolean = false;
   @Output() openReportInSeparateTabEvent = new EventEmitter<any>();
+  tableSpacing!: number;
+  tableSpacingSubscription!: Subscription;
 
   constructor(
     private httpService: HttpService,
     public helperService: HelperService,
     private cookieService: CookieService,
-    private changeNodeLinkStrategyService: ChangeNodeLinkStrategyService
+    private changeNodeLinkStrategyService: ChangeNodeLinkStrategyService,
+    private settingsService: SettingsService
   ) {}
 
   ngOnInit(): void {
     this.cookieService.set('transformationEnabled', 'true');
     this.loadData();
     this.listenForViewUpdate();
+    this.subscribeToSettingsObservables();
+  }
+
+  ngOnDestroy(): void {
+    this.tableSpacingSubscription.unsubscribe();
+  }
+
+  subscribeToSettingsObservables(): void {
+    this.tableSpacingSubscription = this.settingsService.tableSpacingObservable.subscribe((value: number): void => {
+      this.tableSpacing = value;
+    });
   }
 
   retrieveRecords() {
@@ -409,4 +424,16 @@ export class TableComponent implements OnInit {
     }
     return fullName;
   }
+
+  getTableSpacing() {
+    return `${this.tableSpacing * 0.25}em 0 ${this.tableSpacing * 0.25}em 0`;
+  }
+
+  getFontSize() {
+    return `${8 + this.tableSpacing * 1.2}pt`;
+  }
+
+  getCheckBoxSize() {
+    return `${13 + this.tableSpacing}px`;
+  }
 }

src/app/shared/services/settings.service.ts

@@ -9,6 +9,11 @@ export class SettingsService {
     this.loadSettingsFromLocalStorage();
   }
 
+  private loadSettingsFromLocalStorage(): void {
+    this.setShowMultipleAtATime(localStorage.getItem(this.showMultipleAtATimeKey) === 'true');
+    this.setTableSpacing(Number(localStorage.getItem(this.tableSpacingKey)));
+  }
+
   //Show multiple files in debug tree
   private showMultipleAtATimeKey: string = 'showMultipleFilesAtATime';
   private showMultipleAtATime: boolean = false;
@@ -21,7 +26,15 @@ export class SettingsService {
     localStorage.setItem(this.showMultipleAtATimeKey, String(this.showMultipleAtATime));
   }
 
-  private loadSettingsFromLocalStorage(): void {
-    this.setShowMultipleAtATime(localStorage.getItem(this.showMultipleAtATimeKey) === 'true');
+  //Table spacing settings
+  private tableSpacingKey: string = 'tableSpacing';
+  private tableSpacing: number = 0;
+  private tableSpacingSubject: Subject<number> = new ReplaySubject(1);
+  public tableSpacingObservable: Observable<number> = this.tableSpacingSubject.asObservable();
+
+  public setTableSpacing(value: number = 0): void {
+    this.tableSpacing = value;
+    this.tableSpacingSubject.next(value);
+    localStorage.setItem(this.tableSpacingKey, String(value));
   }
 }