package-lock.json

 {
   "name": "@sing-group/s-locus-finder-reporter-frontend",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@sing-group/s-locus-finder-reporter-frontend",
-      "version": "1.0.0-rc.1",
+      "version": "1.0.0-rc.4",
       "license": "GPL-3.0",
       "dependencies": {
         "@angular/animations": "^16.2.7",

package.json

 {
   "name": "@sing-group/s-locus-finder-reporter-frontend",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.4",
   "description": "A frontend application for S-Locus Finder reports.",
   "author": {
     "name": "Alex Gómez González",

src/app/components/families-tree/families-tree.component.ts

@@ -84,7 +84,7 @@ export class FamiliesTreeComponent implements AfterViewInit {
         showLabels: true,
         showLeafLabels: true,
         size: screenSize,
-        alignLabels: true,
+        alignLabels: false,
         nodeSize: nodeSize,
         fillColour: '#3f51b5',
         source: newickTree,

src/app/components/result/result.component.html

@@ -58,7 +58,7 @@
           <th mat-header-cell *matHeaderCellDef>Predicted</th>
           <td mat-cell *matCellDef="let analysis">
             <mat-slide-toggle color="primary" [checked]="isChecked(analysis)"
-                              (toggleChange)="onToggleRow(analysis)"
+                              (change)="onToggleRow(analysis)"
                               [disabled]="!analysis.hasBothAnalysis()">
             </mat-slide-toggle>
           </td>
@@ -127,7 +127,7 @@
         <tr mat-row *matRowDef="let row; columns: displayedColumns;">
       </table>
       <mat-paginator #paginator
-                     [pageSize]="8" [pageSizeOptions]="[5, 10, 20, 50]"
+                     [pageSize]="10" [pageSizeOptions]="[5, 10, 20, 50]"
                      [length]="dataSource.count$ | async">
       </mat-paginator>
     </div>

src/app/components/result/result.component.ts

-import {Component, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, ParamMap, Router} from '@angular/router';
 import {SpeciesAnalysis} from 'src/app/models/SpeciesAnalysis';
 import {DataService} from 'src/app/services/data.service';
@@ -31,8 +31,7 @@ class SpeciesPaginatedProvider implements PaginatedDataProvider<SpeciesRow> {
 
 
   public isChecked(analysis: SpeciesRow): boolean {
-    const modelChecked = this.checkedAnalysis?.get(analysis.regionName);
-    return modelChecked !== undefined && modelChecked.get(analysis.modelName) === true;
+    return this.checkedAnalysis.get(analysis.regionName)?.get(analysis.modelName) === true;
   }
 
   public onToggleRow(analysis: SpeciesRow): void {
@@ -42,7 +41,6 @@ class SpeciesPaginatedProvider implements PaginatedDataProvider<SpeciesRow> {
   }
 
   public setCheckedAnalysis(): void {
-
     this.dataService.getSpecieResults(this.family, this.species).subscribe(rowDataArray => {
         Object.values(rowDataArray).forEach(rowData => {
           if (!this.checkedAnalysis?.has(rowData.regionName)) {
@@ -71,7 +69,7 @@ class SpeciesPaginatedProvider implements PaginatedDataProvider<SpeciesRow> {
   templateUrl: './result.component.html',
   styleUrls: ['./result.component.scss']
 })
-export class ResultComponent implements OnInit {
+export class ResultComponent implements OnInit, AfterViewInit {
   @ViewChild(MatPaginator) public paginator?: MatPaginator;
   @ViewChild(MatSort) public sort?: MatSort;
   public id: string;
@@ -90,6 +88,7 @@ export class ResultComponent implements OnInit {
   constructor(
     private readonly route: ActivatedRoute,
     private readonly router: Router,
+    private readonly changeDetector: ChangeDetectorRef,
     private readonly dataService: DataService
   ) {
     const paramMap = this.route.snapshot.paramMap;
@@ -107,7 +106,6 @@ export class ResultComponent implements OnInit {
   public ngOnInit(): void {
     this.dataService.getFamily(this.familyName)
       .subscribe(familyAnalysis => {
-        console.log(familyAnalysis);
         this.speciesAnalysis = familyAnalysis.speciesAnalysis[this.id];
         this.speciesAnalysisNames = Object.keys(familyAnalysis.speciesAnalysis)
           .filter(speciesName => speciesName.includes(this.speciesName));
@@ -116,6 +114,10 @@ export class ResultComponent implements OnInit {
     this.changeId(this.id);
   }
 
+  public ngAfterViewInit(): void {
+    this._dataSource?.setControls(this.paginator, this.sort);
+  }
+
   private changeId(id: string): void {
     this.id = id;
     const paramMap: ParamMap = this.route.snapshot.paramMap;
@@ -130,7 +132,11 @@ export class ResultComponent implements OnInit {
   private updateDataSource(): void {
     this.dataProvider = new SpeciesPaginatedProvider(this.familyName, this.id, this.dataService);
     this._dataSource = new MatPaginatedDataSource<SpeciesRow>(this.dataProvider);
-    this._dataSource?.setControls(this.paginator, this.sort);
+
+    if (this.paginator !== undefined && this.sort !== undefined) {
+      this.paginator.firstPage();
+      this._dataSource?.setControls(this.paginator, this.sort);
+    }
   }
 
   public get dataSource(): MatPaginatedDataSource<SpeciesRow> {
@@ -141,7 +147,6 @@ export class ResultComponent implements OnInit {
   }
 
   public onChangeResults(value: string): void {
-    console.log("EVENT");
     this.changeId(value);
   }
 
@@ -151,6 +156,7 @@ export class ResultComponent implements OnInit {
 
   public onToggleRow(analysis: SpeciesRow): void {
     this.dataProvider?.onToggleRow(analysis);
+    this.changeDetector.detectChanges();
   }
 
   public buildFileUrl(filePath: string): string {