update ui to support pagination

Author: sagely1

libs/explorers/comparison-tool/src/lib/comparison-tool-table/base-table/base-table.component.html

@@ -3,6 +3,8 @@
   <p-table
     #table
     [value]="data()"
+    [totalRecords]="totalRecords() ?? data().length"
+    [lazy]="true"
     [customSort]="true"
     (sortFunction)="sortCallback($event)"
     sortMode="multiple"

libs/explorers/comparison-tool/src/lib/comparison-tool-table/base-table/base-table.component.ts

@@ -39,6 +39,7 @@ export class BaseTableComponent {
   shouldPaginate = input<boolean>(true);
   shouldShowNoDataMessage = input<boolean>(true);
   columnWidth = input<string>('auto');
+  totalRecords = input<number | undefined>(undefined);
 
   paginationConfig: PaginationOptions = {
     rows: 10,

libs/explorers/comparison-tool/src/lib/comparison-tool-table/comparison-tool-table.component.html

@@ -66,5 +66,6 @@
     [shouldPaginate]="true"
     [shouldShowNoDataMessage]="true"
     [columnWidth]="columnWidth"
+    [totalRecords]="totalResultsCount()"
   />
 </div>

libs/explorers/comparison-tool/src/lib/comparison-tool-table/comparison-tool-table.component.ts

@@ -47,6 +47,7 @@ export class ComparisonToolTableComponent implements AfterViewInit {
   maxPinnedItems = this.comparisonToolService.maxPinnedItems;
   hasMaxPinnedItems = this.comparisonToolService.hasMaxPinnedItems;
   disabledPinTooltip = this.comparisonToolService.disabledPinTooltip;
+  totalResultsCount = this.comparisonToolService.totalResultsCount;
 
   searchTerm = this.comparisonToolFilterService.searchTerm;
   hasSelectedFilters = this.comparisonToolFilterService.hasSelectedFilters;

libs/model-ad/disease-correlation-comparison-tool/src/lib/disease-correlation-comparison-tool.component.ts

@@ -138,7 +138,7 @@ export class DiseaseCorrelationComparisonToolComponent implements OnInit {
         next: (response: DiseaseCorrelationsPage) => {
           const data = response.diseaseCorrelations;
           this.comparisonToolService.setUnpinnedData(data);
-          this.comparisonToolService.totalResultsCount.set(data.length);
+          this.comparisonToolService.totalResultsCount.set(response.page.totalElements);
         },
         error: (error) => {
           throw new Error('Error fetching disease correlation data:', { cause: error });

libs/model-ad/model-overview-comparison-tool/src/lib/model-overview-comparison-tool.component.ts

@@ -115,7 +115,7 @@ export class ModelOverviewComparisonToolComponent implements OnInit {
         next: (response: ModelOverviewsPage) => {
           const data = response.modelOverviews;
           this.comparisonToolService.setUnpinnedData(data);
-          this.comparisonToolService.totalResultsCount.set(data.length);
+          this.comparisonToolService.totalResultsCount.set(response.page.totalElements);
         },
         error: (error) => {
           throw new Error('Error fetching model overview data:', { cause: error });