diff --git a/frontend/src/app/components/block-filters/block-filters.component.html b/frontend/src/app/components/block-filters/block-filters.component.html
index 7b1c2f9e5..f60b04cdd 100644
--- a/frontend/src/app/components/block-filters/block-filters.component.html
+++ b/frontend/src/app/components/block-filters/block-filters.component.html
@@ -18,7 +18,7 @@
{{ group.label }}
-
+
diff --git a/frontend/src/app/components/block-filters/block-filters.component.ts b/frontend/src/app/components/block-filters/block-filters.component.ts
index ce0dd76ab..9951984df 100644
--- a/frontend/src/app/components/block-filters/block-filters.component.ts
+++ b/frontend/src/app/components/block-filters/block-filters.component.ts
@@ -1,5 +1,7 @@
-import { Component, EventEmitter, Output, HostListener, Input, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Output, HostListener, Input, ChangeDetectorRef, OnChanges, SimpleChanges, OnInit, OnDestroy } from '@angular/core';
import { FilterGroups, TransactionFilters } from '../../shared/filters.utils';
+import { StateService } from '../../services/state.service';
+import { Subscription } from 'rxjs';
@Component({
@@ -7,24 +9,48 @@ import { FilterGroups, TransactionFilters } from '../../shared/filters.utils';
templateUrl: './block-filters.component.html',
styleUrls: ['./block-filters.component.scss'],
})
-export class BlockFiltersComponent implements OnChanges {
+export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
@Input() cssWidth: number = 800;
+ @Input() excludeFilters: string[] = [];
@Output() onFilterChanged: EventEmitter = new EventEmitter();
+ filterSubscription: Subscription;
+
filters = TransactionFilters;
filterGroups = FilterGroups;
+ disabledFilters: { [key: string]: boolean } = {};
activeFilters: string[] = [];
filterFlags: { [key: string]: boolean } = {};
menuOpen: boolean = false;
constructor(
+ private stateService: StateService,
private cd: ChangeDetectorRef,
) {}
+ ngOnInit(): void {
+ this.filterSubscription = this.stateService.activeGoggles$.subscribe((activeFilters: string[]) => {
+ for (const key of Object.keys(this.filterFlags)) {
+ this.filterFlags[key] = false;
+ }
+ for (const key of activeFilters) {
+ this.filterFlags[key] = !this.disabledFilters[key];
+ }
+ this.activeFilters = [...activeFilters.filter(key => !this.disabledFilters[key])];
+ this.onFilterChanged.emit(this.getBooleanFlags());
+ });
+ }
+
ngOnChanges(changes: SimpleChanges): void {
if (changes.cssWidth) {
this.cd.markForCheck();
}
+ if (changes.excludeFilters) {
+ this.disabledFilters = {};
+ this.excludeFilters.forEach(filter => {
+ this.disabledFilters[filter] = true;
+ });
+ }
}
toggleFilter(key): void {
@@ -46,7 +72,9 @@ export class BlockFiltersComponent implements OnChanges {
// remove active filter
this.activeFilters = this.activeFilters.filter(f => f != key);
}
- this.onFilterChanged.emit(this.getBooleanFlags());
+ const booleanFlags = this.getBooleanFlags();
+ this.onFilterChanged.emit(booleanFlags);
+ this.stateService.activeGoggles$.next([...this.activeFilters]);
}
getBooleanFlags(): bigint | null {
@@ -67,4 +95,8 @@ export class BlockFiltersComponent implements OnChanges {
}
return true;
}
+
+ ngOnDestroy(): void {
+ this.filterSubscription.unsubscribe();
+ }
}
\ No newline at end of file
diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html
index 9f5e7cb47..9d27d8d90 100644
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html
@@ -13,6 +13,6 @@
[auditEnabled]="auditHighlighting"
[blockConversion]="blockConversion"
>
-
+
diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
index 8a449a121..d6000e27b 100644
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
@@ -40,6 +40,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
@Input() unavailable: boolean = false;
@Input() auditHighlighting: boolean = false;
@Input() showFilters: boolean = false;
+ @Input() excludeFilters: string[] = [];
@Input() filterFlags: bigint | null = null;
@Input() blockConversion: Price;
@Input() overrideColors: ((tx: TxView) => Color) | null = null;
@@ -71,6 +72,8 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
searchText: string;
searchSubscription: Subscription;
+ filtersAvailable: boolean = true;
+ activeFilterFlags: bigint | null = null;
constructor(
readonly ngZone: NgZone,
@@ -110,16 +113,19 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
if (changes.overrideColor && this.scene) {
this.scene.setColorFunction(this.overrideColors);
}
- if ((changes.filterFlags || changes.showFilters) && this.scene) {
- this.setFilterFlags(this.filterFlags);
+ if ((changes.filterFlags || changes.showFilters)) {
+ this.setFilterFlags();
}
}
- setFilterFlags(flags: bigint | null): void {
- if (flags != null) {
- this.scene.setColorFunction(this.getFilterColorFunction(flags));
- } else {
- this.scene.setColorFunction(this.overrideColors);
+ setFilterFlags(flags?: bigint | null): void {
+ this.activeFilterFlags = this.filterFlags || flags || null;
+ if (this.scene) {
+ if (flags != null) {
+ this.scene.setColorFunction(this.getFilterColorFunction(flags));
+ } else {
+ this.scene.setColorFunction(this.overrideColors);
+ }
}
this.start();
}
@@ -150,6 +156,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
// initialize the scene without any entry transition
setup(transactions: TransactionStripped[]): void {
+ this.filtersAvailable = transactions.reduce((flagSet, tx) => flagSet || tx.flags > 0, false);
if (this.scene) {
this.scene.setup(transactions);
this.readyNextFrame = true;
@@ -260,7 +267,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
this.scene = new BlockScene({ width: this.displayWidth, height: this.displayHeight, resolution: this.resolution,
blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray,
highlighting: this.auditHighlighting, animationDuration: this.animationDuration, animationOffset: this.animationOffset,
- colorFunction: this.overrideColors });
+ colorFunction: this.getColorFunction() });
this.start();
}
}
@@ -504,6 +511,16 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
this.txHoverEvent.emit(hoverId);
}
+ getColorFunction(): ((tx: TxView) => Color) {
+ if (this.filterFlags) {
+ return this.getFilterColorFunction(this.filterFlags);
+ } else if (this.activeFilterFlags) {
+ return this.getFilterColorFunction(this.activeFilterFlags);
+ } else {
+ return this.overrideColors;
+ }
+ }
+
getFilterColorFunction(flags: bigint): ((tx: TxView) => Color) {
return (tx: TxView) => {
if ((tx.bigintFlags & flags) === flags) {
diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index 1e6edd2c8..0cc7c5832 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -115,6 +115,8 @@
[orientation]="'top'"
[flip]="false"
[blockConversion]="blockConversion"
+ [showFilters]="true"
+ [excludeFilters]="['replacement']"
(txClickEvent)="onTxClick($event)"
>
@@ -229,7 +231,8 @@
+ (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="!isMobile && !showAudit"
+ [showFilters]="true" [excludeFilters]="['replacement']">
@@ -243,7 +246,8 @@
+ (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="isMobile && !showAudit"
+ [showFilters]="true" [excludeFilters]="['replacement']">
diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts
index db1268379..f87a3dc31 100644
--- a/frontend/src/app/services/state.service.ts
+++ b/frontend/src/app/services/state.service.ts
@@ -150,6 +150,8 @@ export class StateService {
searchFocus$: Subject = new Subject();
menuOpen$: BehaviorSubject = new BehaviorSubject(false);
+ activeGoggles$: BehaviorSubject = new BehaviorSubject([]);
+
constructor(
@Inject(PLATFORM_ID) private platformId: any,
@Inject(LOCALE_ID) private locale: string,