Fixed bug with filtering and pagination.

src/app/components/pagination-component/pagination-component.sass

@@ -6,16 +6,18 @@
   display: grid
   justify-content: center
 
-ngb-pagination ::ng-deep .page-item .page-link
-  border: none !important
-  display: flex
-  justify-content: center
-  align-items: center
-  border-radius: 6px
+ngb-pagination
+  &::ng-deep .page-item .page-link
+    border: none !important
+    display: flex
+    justify-content: center
+    align-items: center
+    border-radius: 6px
   & span
     display: none
-ngb-pagination ::ng-deep *
-  font-size: 14px
+    ngb-pagination
+      &::ng-deep *
+        font-size: 14px
 .page_button
   display: inline-block
   width: 16px

src/app/components/pagination-component/pagination.component.html

@@ -5,6 +5,9 @@
         [collectionSize]="(pageInfo.totalPages || currentPage) * 10"
         [maxSize]="7"
         [(page)]="currentPage"
+        [directionLinks]="false"
+        [rotate]="true"
+        [ellipses]="true"
         (pageChange)="onPageChange(currentPage)"
         aria-label="Custom pagination"
     >

src/app/dataset-block/metadata-block/components/block-navigation/block-navigation.component.html

@@ -30,7 +30,11 @@
     </div>
     <div class="d-flex flex-column gap-4" *ngIf="datasetHistory">
         <ng-container
-            *ngIf="datasetHistory.history | eventTypeFilter: eventTypeFilters | blockHashFilter: searchHash as result"
+            *ngIf="
+                datasetHistory.history
+                    | eventTypeFilter: eventTypeFilters:allHistory
+                    | blockHashFilter: searchHash:allHistory as result
+            "
         >
             <div *ngFor="let block of result" class="d-flex lh-lg align-items-center justify-content-between">
                 <div class="flex-grow-1 no-wrap lh-1">
@@ -52,12 +56,16 @@
             <ng-container *ngIf="result.length === 0">
                 <p class="mt-4 text-center">No block matches</p>
             </ng-container>
-            <app-pagination
-                *ngIf="result.length"
-                [currentPage]="currentPage - 1"
-                [pageInfo]="datasetHistory.pageInfo"
-                (pageChangeEvent)="onPageChange($event)"
-            ></app-pagination>
+            <ngb-pagination
+                class="d-flex justify-content-center mt-4"
+                (pageChange)="onPageChange($event)"
+                [collectionSize]="eventTypeFilters.length || searchHash ? result.length : allHistory.length"
+                [directionLinks]="false"
+                [maxSize]="7"
+                [page]="1"
+                [rotate]="true"
+                [ellipses]="true"
+            ></ngb-pagination>
         </ng-container>
     </div>
 </div>

src/app/dataset-block/metadata-block/components/block-navigation/block-navigation.component.ts

@@ -4,6 +4,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
 import { DatasetInfo } from "src/app/interface/navigation.interface";
 import { MaybeNull } from "src/app/common/app.types";
 import { IDropdownSettings } from "ng-multiselect-dropdown";
+import { MetadataBlockFragment } from "src/app/api/kamu.graphql.interface";
 
 @Component({
     selector: "app-block-navigation",
@@ -15,6 +16,7 @@ export class BlockNavigationComponent {
     @Input() public datasetHistory: MaybeNull<DatasetHistoryUpdate>;
     @Input() public currentBlockHash: string;
     @Input() public datasetInfo: DatasetInfo;
+    @Input() public allHistory: MetadataBlockFragment[];
     @Output() public onPageChangeEmit = new EventEmitter<number>();
     public searchHash = "";
     public currentPage = 1;

src/app/dataset-block/metadata-block/components/block-navigation/pipes/block-hash-filter.pipe.ts

@@ -5,8 +5,12 @@ import { MetadataBlockFragment } from "src/app/api/kamu.graphql.interface";
     name: "blockHashFilter",
 })
 export class BlockHashFilterPipe implements PipeTransform {
-    transform(blocks: MetadataBlockFragment[], filter: string): MetadataBlockFragment[] {
+    transform(
+        blocks: MetadataBlockFragment[],
+        filter: string,
+        allHistory: MetadataBlockFragment[],
+    ): MetadataBlockFragment[] {
         if (filter === "") return blocks;
-        return blocks.filter((block: MetadataBlockFragment) => (block.blockHash as string).includes(filter));
+        return allHistory.filter((block: MetadataBlockFragment) => (block.blockHash as string).includes(filter));
     }
 }

src/app/dataset-block/metadata-block/components/block-navigation/pipes/event-type-filter.pipe.ts

@@ -5,13 +5,17 @@ import { MetadataBlockFragment } from "src/app/api/kamu.graphql.interface";
     name: "eventTypeFilter",
 })
 export class EventTypeFilterPipe implements PipeTransform {
-    transform(blocks: MetadataBlockFragment[], filters: string[]): MetadataBlockFragment[] {
+    transform(
+        blocks: MetadataBlockFragment[],
+        filters: string[],
+        allHistory: MetadataBlockFragment[],
+    ): MetadataBlockFragment[] {
         if (!filters.length) {
             return blocks;
         } else {
             const result = [] as MetadataBlockFragment[];
             filters.forEach((filter: string) =>
-                result.push(...blocks.filter((block) => block.event.__typename === filter)),
+                result.push(...allHistory.filter((block) => block.event.__typename === filter)),
             );
             return result;
         }

src/app/dataset-block/metadata-block/metadata-block.component.html

@@ -31,6 +31,7 @@
             <div class="container-content">
                 <app-block-navigation
                     [datasetHistory]="datasetHistoryUpdate"
+                    [allHistory]="allHistory"
                     [currentBlockHash]="blockHash"
                     [datasetInfo]="datasetInfo"
                     (onPageChangeEmit)="onPageChange($event)"

src/app/dataset-block/metadata-block/metadata-block.component.ts

@@ -13,6 +13,7 @@ import { NavigationEnd, Router } from "@angular/router";
 import { BlockService } from "./block.service";
 import { AppDatasetSubscriptionsService } from "src/app/dataset-view/dataset.subscriptions.service";
 import _ from "lodash";
+import { MetadataBlockFragment } from "src/app/api/kamu.graphql.interface";
 
 @Component({
     selector: "app-metadata-block",
@@ -37,6 +38,7 @@ export class MetadataBlockComponent extends BaseProcessingComponent implements O
     public blockHash: string;
     public datasetHistoryUpdate: MaybeNull<DatasetHistoryUpdate> = null;
     private blocksPerPage = 10;
+    public mapHistory = new Map<number, DatasetHistoryUpdate>();
 
     ngOnInit(): void {
         this.datasetInfo = this.getDatasetInfoFromUrl();
@@ -54,14 +56,31 @@ export class MetadataBlockComponent extends BaseProcessingComponent implements O
             this.loadMetadataBlock(),
             this.loadHistory(),
             this.appDatasetSubsService.onDatasetHistoryChanges.subscribe((result: DatasetHistoryUpdate) => {
-                this.datasetHistoryUpdate = result;
+                this.mapHistory.set(result.pageInfo.currentPage, result);
+                if (result.pageInfo.hasNextPage && result.pageInfo.totalPages !== this.mapHistory.size) {
+                    this.loadHistory(result.pageInfo.currentPage + 1);
+                }
+                const firstPageHistory = this.mapHistory.get(0);
+                if (firstPageHistory) {
+                    this.datasetHistoryUpdate = firstPageHistory;
+                }
                 this.cdr.detectChanges();
             }),
         );
     }
 
+    public get allHistory(): MetadataBlockFragment[] {
+        return Array.from(this.mapHistory.values())
+            .map((item) => item.history)
+            .reduce((acc, cur) => [...acc, ...cur], []);
+    }
+
     public onPageChange(currentPage: number): void {
-        this.trackSubscription(this.loadHistory(currentPage - 1));
+        const currentHistory = this.mapHistory.get(currentPage - 1);
+        if (currentHistory) {
+            this.datasetHistoryUpdate = currentHistory;
+            this.cdr.detectChanges();
+        }
     }
 
     private loadMetadataBlock(): Subscription {

src/app/dataset-block/metadata-block/metadata-block.module.ts

@@ -46,6 +46,7 @@ import { EventTimePropertyComponent } from "./components/event-details/component
 import { OrderPropertyComponent } from "./components/event-details/components/common/order-property/order-property.component";
 import { CommandPropertyComponent } from "./components/event-details/components/common/command-property/command-property.component";
 import { StepTypePropertyComponent } from "./components/event-details/components/common/step-type-property/step-type-property.component";
+import { NgbPaginationModule } from "@ng-bootstrap/ng-bootstrap";
 
 @NgModule({
     declarations: [
@@ -98,6 +99,7 @@ import { StepTypePropertyComponent } from "./components/event-details/components
         DisplayTimeModule,
         DisplayHashModule,
         SharedModule,
+        NgbPaginationModule,
     ],
     exports: [MetadataBlockComponent],
 })

src/styles.sass

@@ -129,8 +129,8 @@ a
   & .navbar
     padding: 0
 [data-test-id="appLogo"]
-  background: none
-  border: none
+    background: none
+    border: none
 .mat-progress-spinner circle
   stroke: $app-darkSeaGreen !important
 
@@ -296,7 +296,7 @@ a:visited
   a:visited
     color: inherit
 router-outlet
-    display: none
+  display: none
 .app-content__card-columns
   column-count: 1
   grid-column-gap: 1.25rem
@@ -499,9 +499,9 @@ router-outlet
   > i
     font-size: 18px
 [data-test-id="searchInput"]
-  padding-left: 35px
-  &::placeholder
-    color: $app-white
+    padding-left: 35px
+    &::placeholder
+      color: $app-white
 
 #searchInput.searchSidenav .input-group > [data-test-id="searchInput"].form-control
   background: $app-white
@@ -883,13 +883,13 @@ app-account .dropdown-menu
     width: 20px
     font-size: 20px
 [role="menu"] .UnderlineNav-item
-  display: flex
-  justify-content: flex-start
-  align-items: center
+    display: flex
+    justify-content: flex-start
+    align-items: center
 details summary::-webkit-details-marker,
 details summary::marker
-  display: none
-  content: ""
+    display: none
+    content: ""
 .UnderlineNav-item
   padding: 8px 16px
   font-size: 14px