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,