Enable goggles on supported mined block visualizations

frontend/src/app/components/block-filters/block-filters.component.html

@@ -18,7 +18,7 @@
       <h5>{{ group.label }}</h5>
       <div class="filter-group">
         <ng-container *ngFor="let filter of group.filters;">
-          <button class="btn filter-tag" [class.selected]="filterFlags[filter.key]" (click)="toggleFilter(filter.key)">{{ filter.label }}</button>
+          <button *ngIf="!disabledFilters[filter.key]" class="btn filter-tag" [class.selected]="filterFlags[filter.key]" (click)="toggleFilter(filter.key)">{{ filter.label }}</button>
         </ng-container>
       </div>
     </ng-container>

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<bigint | null> = 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();
+  }
 }

frontend/src/app/components/block-overview-graph/block-overview-graph.component.html

@@ -13,6 +13,6 @@
       [auditEnabled]="auditHighlighting"
       [blockConversion]="blockConversion"
     ></app-block-overview-tooltip>
-    <app-block-filters *ngIf="showFilters" [cssWidth]="cssWidth" (onFilterChanged)="setFilterFlags($event)"></app-block-filters>
+    <app-block-filters *ngIf="showFilters && filtersAvailable" [excludeFilters]="excludeFilters" [cssWidth]="cssWidth" (onFilterChanged)="setFilterFlags($event)"></app-block-filters>
   </div>
 </div>

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) {
+    if ((changes.filterFlags || changes.showFilters)) {
-      this.setFilterFlags(this.filterFlags);
+      this.setFilterFlags();
     }
   }
 
-  setFilterFlags(flags: bigint | null): void {
+  setFilterFlags(flags?: bigint | null): void {
-    if (flags != null) {
+    this.activeFilterFlags = this.filterFlags || flags || null;
-      this.scene.setColorFunction(this.getFilterColorFunction(flags));
+    if (this.scene) {
-    } else {
+      if (flags != null) {
-      this.scene.setColorFunction(this.overrideColors);
+        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) {

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)"
           ></app-block-overview-graph>
           <ng-container *ngTemplateOutlet="emptyBlockInfo"></ng-container>
@@ -229,7 +231,8 @@
         <div class="block-graph-wrapper">
           <app-block-overview-graph #blockGraphProjected [isLoading]="isLoadingOverview" [resolution]="86"
             [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" [auditHighlighting]="showAudit"
-            (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="!isMobile && !showAudit"></app-block-overview-graph>
+            (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="!isMobile && !showAudit"
+            [showFilters]="true" [excludeFilters]="['replacement']"></app-block-overview-graph>
           <ng-container *ngIf="!isMobile || mode !== 'actual'; else emptyBlockInfo"></ng-container>
         </div>
         <ng-container *ngIf="network !== 'liquid'">
@@ -243,7 +246,8 @@
         <div class="block-graph-wrapper">
           <app-block-overview-graph #blockGraphActual [isLoading]="isLoadingOverview" [resolution]="86"
             [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" mode="mined"  [auditHighlighting]="showAudit"
-            (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="isMobile && !showAudit"></app-block-overview-graph>
+            (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="isMobile && !showAudit"
+            [showFilters]="true" [excludeFilters]="['replacement']"></app-block-overview-graph>
           <ng-container *ngTemplateOutlet="emptyBlockInfo"></ng-container>
         </div>
         <ng-container *ngIf="network !== 'liquid'">

frontend/src/app/services/state.service.ts

@@ -150,6 +150,8 @@ export class StateService {
   searchFocus$: Subject<boolean> = new Subject<boolean>();
   menuOpen$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
+  activeGoggles$: BehaviorSubject<string[]> = new BehaviorSubject([]);
+
   constructor(
     @Inject(PLATFORM_ID) private platformId: any,
     @Inject(LOCALE_ID) private locale: string,