Simple Goggle Toggles

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

@@ -42,6 +42,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   @Input() showFilters: boolean = false;
   @Input() excludeFilters: string[] = [];
   @Input() filterFlags: bigint | null = null;
+  @Input() filterMode: 'and' | 'or' = 'and';
   @Input() blockConversion: Price;
   @Input() overrideColors: ((tx: TxView) => Color) | null = null;
   @Output() txClickEvent = new EventEmitter<{ tx: TransactionStripped, keyModifier: boolean}>();
@@ -113,7 +114,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     if (changes.overrideColor && this.scene) {
       this.scene.setColorFunction(this.overrideColors);
     }
-    if ((changes.filterFlags || changes.showFilters)) {
+    if ((changes.filterFlags || changes.showFilters || changes.filterMode)) {
       this.setFilterFlags();
     }
   }
@@ -121,8 +122,8 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   setFilterFlags(flags?: bigint | null): void {
     this.activeFilterFlags = this.filterFlags || flags || null;
     if (this.scene) {
-      if (flags != null) {
+      if (this.activeFilterFlags != null) {
-        this.scene.setColorFunction(this.getFilterColorFunction(flags));
+        this.scene.setColorFunction(this.getFilterColorFunction(this.activeFilterFlags));
       } else {
         this.scene.setColorFunction(this.overrideColors);
       }
@@ -523,7 +524,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
 
   getFilterColorFunction(flags: bigint): ((tx: TxView) => Color) {
     return (tx: TxView) => {
-      if ((tx.bigintFlags & flags) === flags) {
+      if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (tx.bigintFlags & flags) > 0n)) {
         return defaultColorFunction(tx);
       } else {
         return defaultColorFunction(

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

@@ -1,11 +1,13 @@
 <app-block-overview-graph
   #blockGraph
   [isLoading]="isLoading$ | async"
-  [resolution]="86"
+  [resolution]="resolution"
   [blockLimit]="stateService.blockVSize"
   [orientation]="timeLtr ? 'right' : 'left'"
   [flip]="true"
   [showFilters]="showFilters"
+  [filterFlags]="filterFlags"
+  [filterMode]="filterMode"
   [overrideColors]="overrideColors"
   (txClickEvent)="onTxClick($event)"
 ></app-block-overview-graph>

frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts

@@ -18,8 +18,11 @@ import TxView from '../block-overview-graph/tx-view';
 })
 export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
   @Input() index: number;
+  @Input() resolution = 86;
   @Input() showFilters: boolean = false;
   @Input() overrideColors: ((tx: TxView) => Color) | null = null;
+  @Input() filterFlags: bigint | undefined = undefined;
+  @Input() filterMode: 'and' | 'or' = 'and';
   @Output() txPreviewEvent = new EventEmitter<TransactionStripped | void>();
 
   @ViewChild('blockGraph') blockGraph: BlockOverviewGraphComponent;

frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss

@@ -26,7 +26,7 @@
     height: 345px;
   }
   @media (min-width: 992px) {
-    height: 442px;
+    height: 472px;
   }
 }
 

frontend/src/app/dashboard/dashboard.component.html

@@ -18,13 +18,27 @@
       <div class="card graph-card">
         <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
           <ng-template [ngIf]="(network$ | async) !== 'liquid'" [ngIfElse]="liquidPegs">
-            <a class="title-link" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
+            <a class="title-link mb-0" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
-              <h5 class="card-title d-inline" i18n="dashboard.mempool-goggles-next-block">Mempool Goggles: Next Block</h5>
+              <h5 class="card-title d-inline" i18n="dashboard.mempool-goggles-next-block">Mempool Goggles: {{ goggleCycle[goggleIndex].name }}</h5>
               <span>&nbsp;</span>
               <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
             </a>
+            <div class="quick-filter">
+              <ng-container *ngFor="let filter of goggleCycle">
+                <div
+                  class="badge badge-primary"
+                  [class.active]="filter.index === goggleIndex"
+                  (click)="goggleIndex = filter.index"
+                >{{ filter.name }}</div>
+              </ng-container>
+            </div>
             <div class="mempool-block-wrapper">
-              <app-mempool-block-overview [index]="0"></app-mempool-block-overview>
+              <app-mempool-block-overview
+                [index]="0"
+                [resolution]="goggleResolution"
+                [filterFlags]="goggleCycle[goggleIndex].flag"
+                filterMode="or"
+              ></app-mempool-block-overview>
             </div>
           </ng-template>
           <ng-template #liquidPegs>

frontend/src/app/dashboard/dashboard.component.scss

@@ -375,8 +375,8 @@
 }
 
 .mempool-block-wrapper {
-  max-height: 430px;
+  max-height: 410px;
-  max-width: 430px;
+  max-width: 410px;
   margin: auto;
 
   @media (min-width: 768px) {
@@ -384,7 +384,18 @@
     max-width: 344px;
   }
   @media (min-width: 992px) {
-    max-height: 430px;
+    max-height: 410px;
-    max-width: 430px;
+    max-width: 410px;
+  }
+}
+
+.badge {
+  margin: 6px 5px 8px;
+  background: none;
+  border: solid 2px #105fb0;
+  cursor: pointer;
+
+  &.active {
+    background: #105fb0;
   }
 }

frontend/src/app/dashboard/dashboard.component.ts

@@ -62,6 +62,15 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   private lastPegAmount: string = '';
   private lastReservesBlockUpdate: number = 0;
 
+  goggleResolution = 82;
+  goggleCycle = [
+    { index: 0, name: 'All' },
+    { index: 1, name: 'CPFP', flag: 0b00000010_00000000_00000000n },
+    { index: 2, name: 'RBF', flag: 0b00000100_00000000_00000000n },
+    { index: 3, name: '💩', flag: 0b00000100_00000000_00000000_00000000n | 0b00000010_00000000_00000000_00000000n | 0b00000001_00000000_00000000_00000000n },
+  ];
+  goggleIndex = 0; // Math.floor(Math.random() * this.goggleCycle.length);
+
   private destroy$ = new Subject();
 
   constructor(
@@ -357,10 +366,13 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   onResize(): void {
     if (window.innerWidth >= 992) {
       this.incomingGraphHeight = 300;
+      this.goggleResolution = 82;
     } else if (window.innerWidth >= 768) {
       this.incomingGraphHeight = 215;
+      this.goggleResolution = 80;
     } else {
       this.incomingGraphHeight = 180;
+      this.goggleResolution = 86;
     }
   }
 }