Resolve conflicts in dashboard component

2024-02-13 09:47:45 +01:00
parent 55cd2f5678 512f632475
commit d55d5db01d
25 changed files with 750 additions and 109 deletions
--- a/frontend/src/app/components/block-filters/block-filters.component.html
+++ b/frontend/src/app/components/block-filters/block-filters.component.html
@@ -1,4 +1,4 @@
-<div class="block-filters" [class.filters-active]="activeFilters.length > 0" [class.menu-open]="menuOpen" [class.small]="cssWidth < 500" [class.vsmall]="cssWidth < 400" [class.tiny]="cssWidth < 200">
+<div class="block-filters" [class.filters-active]="activeFilters.length > 0" [class.any-mode]="filterMode === 'or'" [class.menu-open]="menuOpen" [class.small]="cssWidth < 500" [class.vsmall]="cssWidth < 400" [class.tiny]="cssWidth < 200">
  <a *ngIf="menuOpen" [routerLink]="['/docs/faq' | relativeUrl]" fragment="how-do-mempool-goggles-work" class="info-badges" i18n-ngbTooltip="Mempool Goggles tooltip" ngbTooltip="select filter categories to highlight matching transactions">
    <span class="badge badge-pill badge-warning beta" i18n="beta">beta</span>
    <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" size="lg"></fa-icon>
@@ -14,6 +14,15 @@
    </div>
  </div>
  <div class="filter-menu" *ngIf="menuOpen && cssWidth > 280">
+    <h5>Match</h5>
+    <div class="btn-group btn-group-toggle">
+      <label class="btn btn-xs blue mode-toggle" [class.active]="filterMode === 'and'">
+        <input type="radio" [value]="'all'" fragment="all" (click)="setFilterMode('and')">All
+      </label>
+      <label class="btn btn-xs green mode-toggle" [class.active]="filterMode === 'or'">
+        <input type="radio" [value]="'any'" fragment="any" (click)="setFilterMode('or')">Any
+      </label>
+    </div>
    <ng-container *ngFor="let group of filterGroups;">
      <h5>{{ group.label }}</h5>
      <div class="filter-group">
--- a/frontend/src/app/components/block-filters/block-filters.component.scss
+++ b/frontend/src/app/components/block-filters/block-filters.component.scss
@@ -77,6 +77,49 @@
    }
  }

+  &.any-mode {
+    .filter-tag {
+      border: solid 1px #1a9436;
+      &.selected {
+        background-color: #1a9436;
+      }
+    }
+  }
+
+  .btn-group {
+    font-size: 0.9em;
+    margin-right: 0.25em;
+  }
+
+  .mode-toggle {
+    padding: 0.2em 0.5em;
+    pointer-events: all;
+    line-height: 1.5;
+    background: #181b2daf;
+
+    &:first-child {
+      border-top-left-radius: 0.2rem;
+      border-bottom-left-radius: 0.2rem;
+    }
+    &:last-child {
+      border-top-right-radius: 0.2rem;
+      border-bottom-right-radius: 0.2rem;
+    }
+
+    &.blue {
+      border: solid 1px #105fb0;
+      &.active {
+        background: #105fb0;
+      }
+    }
+    &.green {
+      border: solid 1px #1a9436;
+      &.active {
+        background: #1a9436;
+      }
+    }
+  }
+
  :host-context(.block-overview-graph:hover) &, &:hover, &:active {
    .menu-toggle {
      opacity: 0.5;
@@ -132,6 +175,11 @@
    .filter-tag {
      font-size: 0.7em;
    }
+    .mode-toggle {
+      font-size: 0.7em;
+      margin-bottom: 5px;
+      margin-top: 2px;
+    }
  }

  &.tiny {
--- 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,5 @@
 import { Component, EventEmitter, Output, HostListener, Input, ChangeDetectorRef, OnChanges, SimpleChanges, OnInit, OnDestroy } from '@angular/core';
-import { FilterGroups, TransactionFilters } from '../../shared/filters.utils';
+import { ActiveFilter, FilterGroups, FilterMode, TransactionFilters } from '../../shared/filters.utils';
 import { StateService } from '../../services/state.service';
 import { Subscription } from 'rxjs';

@@ -12,7 +12,7 @@ import { Subscription } from 'rxjs';
 export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
  @Input() cssWidth: number = 800;
  @Input() excludeFilters: string[] = [];
-  @Output() onFilterChanged: EventEmitter<bigint | null> = new EventEmitter();
+  @Output() onFilterChanged: EventEmitter<ActiveFilter | null> = new EventEmitter();

  filterSubscription: Subscription;

@@ -21,6 +21,7 @@ export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
  disabledFilters: { [key: string]: boolean } = {};
  activeFilters: string[] = [];
  filterFlags: { [key: string]: boolean } = {};
+  filterMode: FilterMode = 'and';
  menuOpen: boolean = false;

  constructor(
@@ -29,15 +30,16 @@ export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
  ) {}

  ngOnInit(): void {
-    this.filterSubscription = this.stateService.activeGoggles$.subscribe((activeFilters: string[]) => {
+    this.filterSubscription = this.stateService.activeGoggles$.subscribe((active: ActiveFilter) => {
+      this.filterMode = active.mode;
      for (const key of Object.keys(this.filterFlags)) {
        this.filterFlags[key] = false;
      }
-      for (const key of activeFilters) {
+      for (const key of active.filters) {
        this.filterFlags[key] = !this.disabledFilters[key];
      }
-      this.activeFilters = [...activeFilters.filter(key => !this.disabledFilters[key])];
-      this.onFilterChanged.emit(this.getBooleanFlags());
+      this.activeFilters = [...active.filters.filter(key => !this.disabledFilters[key])];
+      this.onFilterChanged.emit({ mode: active.mode, filters: this.activeFilters });
    });
  }

@@ -53,6 +55,12 @@ export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
    }
  }

+  setFilterMode(mode): void {
+    this.filterMode = mode;
+    this.onFilterChanged.emit({ mode: this.filterMode, filters: this.activeFilters });
+    this.stateService.activeGoggles$.next({ mode: this.filterMode, filters: [...this.activeFilters] });
+  }
+
  toggleFilter(key): void {
    const filter = this.filters[key];
    this.filterFlags[key] = !this.filterFlags[key];
@@ -73,8 +81,8 @@ export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
      this.activeFilters = this.activeFilters.filter(f => f != key);
    }
    const booleanFlags = this.getBooleanFlags();
-    this.onFilterChanged.emit(booleanFlags);
-    this.stateService.activeGoggles$.next([...this.activeFilters]);
+    this.onFilterChanged.emit({ mode: this.filterMode, filters: this.activeFilters });
+    this.stateService.activeGoggles$.next({ mode: this.filterMode, filters: [...this.activeFilters] });
  }
  
  getBooleanFlags(): bigint | null {
@@ -90,7 +98,7 @@ export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
  @HostListener('document:click', ['$event'])
  onClick(event): boolean {
    // click away from menu
-    if (!event.target.closest('button')) {
+    if (!event.target.closest('button') && !event.target.closest('label')) {
      this.menuOpen = false;
    }
    return true;
--- 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,9 @@
      [auditEnabled]="auditHighlighting"
      [blockConversion]="blockConversion"
    ></app-block-overview-tooltip>
-    <app-block-filters *ngIf="showFilters && filtersAvailable" [excludeFilters]="excludeFilters" [cssWidth]="cssWidth" (onFilterChanged)="setFilterFlags($event)"></app-block-filters>
+    <app-block-filters *ngIf="webGlEnabled && showFilters && filtersAvailable" [excludeFilters]="excludeFilters" [cssWidth]="cssWidth" (onFilterChanged)="setFilterFlags($event)"></app-block-filters>
+    <div *ngIf="!webGlEnabled" class="placeholder">
+      <span i18n="webgl-disabled">Your browser does not support this feature.</span>
+    </div>
  </div>
 </div>
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss
@@ -7,6 +7,19 @@
  justify-content: center;
  align-items: center;
  grid-column: 1/-1;
+
+  .placeholder {
+    display: flex;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+  }
 }

 .grid-align {
--- 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
@@ -9,6 +9,8 @@ import { Price } from '../../services/price.service';
 import { StateService } from '../../services/state.service';
 import { Subscription } from 'rxjs';
 import { defaultColorFunction, setOpacity, defaultFeeColors, defaultAuditFeeColors, defaultMarginalFeeColors, defaultAuditColors } from './utils';
+import { ActiveFilter, FilterMode, toFlags } from '../../shared/filters.utils';
+import { detectWebGL } from '../../shared/graphs.utils';

 const unmatchedOpacity = 0.2;
 const unmatchedFeeColors = defaultFeeColors.map(c => setOpacity(c, unmatchedOpacity));
@@ -42,7 +44,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() filterMode: FilterMode = 'and';
  @Input() blockConversion: Price;
  @Input() overrideColors: ((tx: TxView) => Color) | null = null;
  @Output() txClickEvent = new EventEmitter<{ tx: TransactionStripped, keyModifier: boolean}>();
@@ -76,11 +78,14 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
  filtersAvailable: boolean = true;
  activeFilterFlags: bigint | null = null;

+  webGlEnabled = true;
+
  constructor(
    readonly ngZone: NgZone,
    readonly elRef: ElementRef,
    private stateService: StateService,
  ) {
+    this.webGlEnabled = detectWebGL();
    this.vertexArray = new FastVertexArray(512, TxSprite.dataSize);
    this.searchSubscription = this.stateService.searchText$.subscribe((text) => {
      this.searchText = text;
@@ -119,10 +124,11 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
    }
  }

-  setFilterFlags(flags?: bigint | null): void {
-    this.activeFilterFlags = this.filterFlags || flags || null;
+  setFilterFlags(goggle?: ActiveFilter): void {
+    this.filterMode = goggle?.mode || this.filterMode;
+    this.activeFilterFlags = goggle?.filters ? toFlags(goggle.filters) : this.filterFlags;
    if (this.scene) {
-      if (this.activeFilterFlags != null) {
+      if (this.activeFilterFlags != null && this.filtersAvailable) {
        this.scene.setColorFunction(this.getFilterColorFunction(this.activeFilterFlags));
      } else {
        this.scene.setColorFunction(this.overrideColors);
@@ -157,7 +163,11 @@ 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);
+    const filtersAvailable = transactions.reduce((flagSet, tx) => flagSet || tx.flags > 0, false);
+    if (filtersAvailable !== this.filtersAvailable) {
+      this.setFilterFlags();
+    }
+    this.filtersAvailable = filtersAvailable;
    if (this.scene) {
      this.scene.setup(transactions);
      this.readyNextFrame = true;
@@ -500,11 +510,13 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
  }

  onTxClick(cssX: number, cssY: number, keyModifier: boolean = false) {
-    const x = cssX * window.devicePixelRatio;
-    const y = cssY * window.devicePixelRatio;
-    const selected = this.scene.getTxAt({ x, y });
-    if (selected && selected.txid) {
-      this.txClickEvent.emit({ tx: selected, keyModifier });
+    if (this.scene) {
+      const x = cssX * window.devicePixelRatio;
+      const y = cssY * window.devicePixelRatio;
+      const selected = this.scene.getTxAt({ x, y });
+      if (selected && selected.txid) {
+        this.txClickEvent.emit({ tx: selected, keyModifier });
+      }
    }
  }

@@ -524,7 +536,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On

  getFilterColorFunction(flags: bigint): ((tx: TxView) => Color) {
    return (tx: TxView) => {
-      if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (tx.bigintFlags & flags) > 0n)) {
+      if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) {
        return defaultColorFunction(tx);
      } else {
        return defaultColorFunction(
--- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
+++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
@@ -10,6 +10,7 @@ import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pi
 import { Router } from '@angular/router';
 import { Color } from '../block-overview-graph/sprite-types';
 import TxView from '../block-overview-graph/tx-view';
+import { FilterMode } from '../../shared/filters.utils';

@Component({
  selector: 'app-mempool-block-overview',
@@ -22,7 +23,7 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
  @Input() showFilters: boolean = false;
  @Input() overrideColors: ((tx: TxView) => Color) | null = null;
  @Input() filterFlags: bigint | undefined = undefined;
-  @Input() filterMode: 'and' | 'or' = 'and';
+  @Input() filterMode: FilterMode = 'and';
  @Output() txPreviewEvent = new EventEmitter<TransactionStripped | void>();

  @ViewChild('blockGraph') blockGraph: BlockOverviewGraphComponent;
@@ -99,7 +100,7 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
          const inOldBlock = {};
          const inNewBlock = {};
          const added: TransactionStripped[] = [];
-          const changed: { txid: string, rate: number | undefined, acc: boolean | undefined }[] = [];
+          const changed: { txid: string, rate: number | undefined, flags: number, acc: boolean | undefined }[] = [];
          const removed: string[] = [];
          for (const tx of transactionsStripped) {
            inNewBlock[tx.txid] = true;
@@ -117,6 +118,7 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
              changed.push({
                txid: tx.txid,
                rate: tx.rate,
+                flags: tx.flags,
                acc: tx.acc
              });
            }
--- a/frontend/src/app/components/menu/menu.component.scss
+++ b/frontend/src/app/components/menu/menu.component.scss
@@ -85,6 +85,6 @@
  background-color: #f1c40f;
 }

-.badge-platinium {
+.badge-platinum {
  background-color: #653b9c;
 }