adding pagination support

Author: sagely1

libs/explorers/comparison-tool/src/index.ts

@@ -1 +1,3 @@
 export * from './lib/comparison-tool.component';
+export * from './lib/comparison-tool.helpers';
+export * from './lib/comparison-tool.variables';

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

@@ -1,10 +1,11 @@
 <div class="base-table-container">
-  @let pagination = shouldPaginate() && data().length !== 0 ? paginationConfig : null;
+  @let pagination = shouldPaginate() ? paginationConfig : null;
   <p-table
     #table
     [value]="data()"
     [totalRecords]="totalRecords() ?? data().length"
     [lazy]="true"
+    (onLazyLoad)="onLazyLoad($event)"
     [customSort]="true"
     (sortFunction)="sortCallback($event)"
     sortMode="multiple"
@@ -14,7 +15,7 @@
     showGridlines
     [paginator]="!!pagination"
     [paginatorStyleClass]="pagination?.paginatorStyleClass ?? ''"
-    [rows]="pagination?.rows ?? undefined"
+    [rows]="pagination?.rows"
     [showCurrentPageReport]="!!pagination?.showCurrentPageReport"
     [currentPageReportTemplate]="pagination?.currentPageReportTemplate ?? ''"
     [showPageLinks]="pagination?.showPageLinks ?? null"

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

@@ -1,8 +1,8 @@
-import { Component, inject, input, ViewEncapsulation } from '@angular/core';
+import { Component, inject, input, output, ViewEncapsulation } from '@angular/core';
 import { ComparisonToolService } from '@sagebionetworks/explorers/services';
 import { CommaSeparatePipe } from '@sagebionetworks/explorers/util';
 import { SortEvent } from 'primeng/api';
-import { TableModule } from 'primeng/table';
+import { TableModule, TableLazyLoadEvent } from 'primeng/table';
 import { TooltipModule } from 'primeng/tooltip';
 import { ComparisonToolTableLinkComponent } from '../comparison-tool-table-link/comparison-tool-table-link.component';
 import { HeatmapCircleComponent } from '../heatmap-circle/heatmap-circle.component';
@@ -41,6 +41,8 @@ export class BaseTableComponent {
   columnWidth = input<string>('auto');
   totalRecords = input<number | undefined>(undefined);
 
+  lazyLoad = output<TableLazyLoadEvent>();
+
   paginationConfig: PaginationOptions = {
     rows: 10,
     showCurrentPageReport: true,
@@ -52,4 +54,8 @@ export class BaseTableComponent {
   sortCallback(event: SortEvent) {
     this.comparisonToolService.setSort(event);
   }
+
+  onLazyLoad(event: TableLazyLoadEvent) {
+    this.lazyLoad.emit(event);
+  }
 }

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

@@ -67,5 +67,6 @@
     [shouldShowNoDataMessage]="true"
     [columnWidth]="columnWidth"
     [totalRecords]="totalResultsCount()"
+    (lazyLoad)="onLazyLoad($event)"
   />
 </div>

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

@@ -5,6 +5,7 @@ import {
   ElementRef,
   HostListener,
   inject,
+  output,
   viewChild,
   ViewEncapsulation,
 } from '@angular/core';
@@ -18,6 +19,7 @@ import {
 import { DownloadDomImageComponent } from '@sagebionetworks/explorers/ui';
 import { SvgIconComponent } from '@sagebionetworks/explorers/util';
 import { TooltipModule } from 'primeng/tooltip';
+import { TableLazyLoadEvent } from 'primeng/table';
 import { BaseTableComponent } from './base-table/base-table.component';
 import { ComparisonToolColumnsComponent } from './comparison-tool-columns/comparison-tool-columns.component';
 
@@ -57,6 +59,8 @@ export class ComparisonToolTableComponent implements AfterViewInit {
   pinnedData = this.comparisonToolService.pinnedData;
   unpinnedData = this.comparisonToolService.unpinnedData;
 
+  lazyLoad = output<TableLazyLoadEvent>();
+
   columnWidth = 'auto';
   primaryColumnWidth = 300;
 
@@ -123,4 +127,8 @@ export class ComparisonToolTableComponent implements AfterViewInit {
     const count = Math.max(nCols, 5);
     return Math.ceil((tableWidth - this.primaryColumnWidth) / count) + 'px';
   }
+
+  onLazyLoad(event: TableLazyLoadEvent) {
+    this.lazyLoad.emit(event);
+  }
 }

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

@@ -3,14 +3,16 @@
     <div id="loading">
       <explorers-loading-container [count]="loadingResultsCount()"></explorers-loading-container>
     </div>
-  } @else {
+  }
+
+  <div [style.display]="isLoading() ? 'none' : 'block'">
     <explorers-comparison-tool-header (filterToggle)="toggleFilterPanel()" />
     <explorers-comparison-tool-filter-list />
     <div class="comparison-tool-body">
       <div class="comparison-tool-body-inner">
         <div class="comparison-tool-tables">
           <explorers-comparison-tool-controls />
-          <explorers-comparison-tool-table />
+          <explorers-comparison-tool-table (lazyLoad)="onLazyLoad($event)" />
           <ng-content></ng-content>
           <explorers-help-links />
           <explorers-comparison-tool-filter-panel
@@ -20,5 +22,5 @@
         </div>
       </div>
     </div>
-  }
+  </div>
 </main>

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

@@ -1,3 +1,5 @@
+import { provideHttpClient } from '@angular/common/http';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import {
   provideComparisonToolFilterService,
   provideComparisonToolService,
@@ -16,6 +18,8 @@ async function setup() {
   const { fixture } = await render(ComparisonToolComponent, {
     imports: [LoadingContainerComponent],
     providers: [
+      provideHttpClient(),
+      provideNoopAnimations(),
       provideLoadingIconColors(),
       ...provideComparisonToolService({
         configs: mockComparisonToolConfigs,

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

@@ -1,6 +1,7 @@
-import { Component, inject, input, model } from '@angular/core';
+import { Component, inject, input, model, output } from '@angular/core';
 import { ComparisonToolService } from '@sagebionetworks/explorers/services';
 import { LoadingContainerComponent } from '@sagebionetworks/explorers/util';
+import { TableLazyLoadEvent } from 'primeng/table';
 import { ComparisonToolControlsComponent } from './comparison-tool-controls/comparison-tool-controls.component';
 import { ComparisonToolFilterListComponent } from './comparison-tool-filter-list/comparison-tool-filter-list.component';
 import { ComparisonToolFilterPanelComponent } from './comparison-tool-filter-panel/comparison-tool-filter-panel.component';
@@ -27,6 +28,8 @@ export class ComparisonToolComponent {
 
   isLoading = input(true);
 
+  lazyLoad = output<TableLazyLoadEvent>();
+
   currentConfig = this.comparisonToolService.currentConfig;
   loadingResultsCount = this.comparisonToolService.loadingResultsCount;
 
@@ -35,4 +38,8 @@ export class ComparisonToolComponent {
   toggleFilterPanel() {
     this.isFilterPanelOpen.update((isOpen) => !isOpen);
   }
+
+  onLazyLoad(event: TableLazyLoadEvent) {
+    this.lazyLoad.emit(event);
+  }
 }

libs/explorers/comparison-tool/src/lib/comparison-tool.helpers.spec.ts

@@ -0,0 +1,170 @@
+import { TableLazyLoadEvent } from 'primeng/table';
+import { getPaginationParams } from './comparison-tool.helpers';
+import { NUMBER_OF_ROWS_TO_DISPLAY } from './comparison-tool.variables';
+
+describe('comparison-tool.helpers', () => {
+  describe('getPaginationParams', () => {
+    it('should calculate correct pagination for first page', () => {
+      const event: TableLazyLoadEvent = {
+        first: 0,
+        rows: 10,
+      };
+
+      const result = getPaginationParams(event);
+
+      expect(result).toEqual({
+        pageNumber: 0,
+        pageSize: 10,
+      });
+    });
+
+    it('should calculate correct pagination for second page', () => {
+      const event: TableLazyLoadEvent = {
+        first: 10,
+        rows: 10,
+      };
+
+      const result = getPaginationParams(event);
+
+      expect(result).toEqual({
+        pageNumber: 1,
+        pageSize: 10,
+      });
+    });
+
+    it('should calculate correct pagination for third page', () => {
+      const event: TableLazyLoadEvent = {
+        first: 20,
+        rows: 10,
+      };
+
+      const result = getPaginationParams(event);
+
+      expect(result).toEqual({
+        pageNumber: 2,
+        pageSize: 10,
+      });
+    });
+
+    it('should handle different page sizes', () => {
+      const event: TableLazyLoadEvent = {
+        first: 25,
+        rows: 25,
+      };
+
+      const result = getPaginationParams(event);
+
+      expect(result).toEqual({
+        pageNumber: 1,
+        pageSize: 25,
+      });
+    });
+
+    it('should use default page size when rows is undefined', () => {
+      const event: TableLazyLoadEvent = {
+        first: 0,
+      };
+
+      const result = getPaginationParams(event);
+
+      expect(result).toEqual({
+        pageNumber: 0,
+        pageSize: NUMBER_OF_ROWS_TO_DISPLAY,
+      });
+    });
+
+    it('should use default page size when rows is null', () => {
+      const event: TableLazyLoadEvent = {
+        first: 0,
+        rows: null as unknown as number,
+      };
+
+      const result = getPaginationParams(event);
+
+      expect(result).toEqual({
+        pageNumber: 0,
+        pageSize: NUMBER_OF_ROWS_TO_DISPLAY,
+      });
+    });
+
+    it('should default to page 0 when first is undefined', () => {
+      const event: TableLazyLoadEvent = {
+        rows: 10,
+      };
+
+      const result = getPaginationParams(event);
+
+      expect(result).toEqual({
+        pageNumber: 0,
+        pageSize: 10,
+      });
+    });
+
+    it('should default to page 0 when first is null', () => {
+      const event: TableLazyLoadEvent = {
+        first: null as unknown as number,
+        rows: 10,
+      };
+
+      const result = getPaginationParams(event);
+
+      expect(result).toEqual({
+        pageNumber: 0,
+        pageSize: 10,
+      });
+    });
+
+    it('should handle both first and rows being undefined', () => {
+      const event: TableLazyLoadEvent = {};
+
+      const result = getPaginationParams(event);
+
+      expect(result).toEqual({
+        pageNumber: 0,
+        pageSize: NUMBER_OF_ROWS_TO_DISPLAY,
+      });
+    });
+
+    it('should correctly calculate page number with non-standard offsets', () => {
+      const event: TableLazyLoadEvent = {
+        first: 15,
+        rows: 10,
+      };
+
+      const result = getPaginationParams(event);
+
+      expect(result).toEqual({
+        pageNumber: 1,
+        pageSize: 10,
+      });
+    });
+
+    it('should handle large page numbers', () => {
+      const event: TableLazyLoadEvent = {
+        first: 1000,
+        rows: 50,
+      };
+
+      const result = getPaginationParams(event);
+
+      expect(result).toEqual({
+        pageNumber: 20,
+        pageSize: 50,
+      });
+    });
+
+    it('should handle zero rows per page (edge case)', () => {
+      const event: TableLazyLoadEvent = {
+        first: 0,
+        rows: 0,
+      };
+
+      const result = getPaginationParams(event);
+
+      // When rows is 0, Math.floor(0/0) = NaN, but the nullish coalescing
+      // operator doesn't catch 0, so we get NaN
+      expect(result.pageNumber).toBeNaN();
+      expect(result.pageSize).toBe(0);
+    });
+  });
+});

libs/explorers/comparison-tool/src/lib/comparison-tool.helpers.ts

@@ -0,0 +1,13 @@
+import { TableLazyLoadEvent } from 'primeng/table';
+import { NUMBER_OF_ROWS_TO_DISPLAY, PaginationParams } from './comparison-tool.variables';
+
+/**
+ * Calculates pagination parameters from a PrimeNG TableLazyLoadEvent
+ * @param event The lazy load event from PrimeNG table
+ * @returns Object containing pageNumber (zero-based) and pageSize
+ */
+export function getPaginationParams(event: TableLazyLoadEvent): PaginationParams {
+  const pageNumber = Math.floor((event.first ?? 0) / (event.rows ?? NUMBER_OF_ROWS_TO_DISPLAY));
+  const pageSize = event.rows ?? NUMBER_OF_ROWS_TO_DISPLAY;
+  return { pageNumber, pageSize };
+}