highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-09-21 17:11:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add 'None' filter mode to mempool goggles

Browse Source
This commit is contained in:
natsoni
2025-08-01 14:50:38 +02:00
parent 5fc8a9f594
commit 252b7961d1
4 changed files with 33 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/app/components/block-filters/block-filters.component.html
View File

@@ -1,4 +1,4 @@
<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">
<div class="block-filters" [class.filters-active]="activeFilters.length > 0" [class.any-mode]="filterMode === 'or'" [class.none-mode]="filterMode === 'nor'" [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 float-right" i18n-ngbTooltip="Mempool Goggles&trade; tooltip" ngbTooltip="select filter categories to highlight matching transactions">
<fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" size="lg"></fa-icon>
</a>
@@ -23,6 +23,9 @@
<label class="btn btn-xs green mode-toggle" [class.active]="filterMode === 'or'">
<input type="radio" [value]="'any'" fragment="any" (click)="setFilterMode('or')"><ng-container i18n="mempool-goggles.any">Any</ng-container>
</label>
<label class="btn btn-xs red mode-toggle" [class.active]="filterMode === 'nor'">
<input type="radio" [value]="'nor'" fragment="nor" (click)="setFilterMode('nor')"><ng-container i18n="mempool-goggles.none">None</ng-container>
</label>
</div>
</div>
<div class="filter-element">

15
frontend/src/app/components/block-filters/block-filters.component.scss
View File

@@ -94,6 +94,15 @@
}
}
&.none-mode {
.filter-tag {
border: solid 1px var(--danger);
&.selected {
background-color: var(--danger);
}
}
}
.btn-group {
font-size: 0.9em;
margin-right: 0.25em;
@@ -126,6 +135,12 @@
background: var(--success);
}
}
&.red {
border: solid 1px var(--danger);
&.active {
background: var(--danger);
}
}
&.yellow {
border: solid 1px #bf7815;
&.active {

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

@@ -656,7 +656,19 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
getFilterColorFunction(flags: bigint, gradient: 'fee' | 'age'): ((tx: TxView) => Color) {
return (tx: TxView) => {
if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) {
let matches = false;
switch (this.filterMode) {
case 'and':
matches = (tx.bigintFlags & flags) === flags;
break;
case 'or':
matches = flags === 0n || (tx.bigintFlags & flags) > 0n;
break;
case 'nor':
matches = flags === 0n || (tx.bigintFlags & flags) === 0n;
break;
}
if (matches) {
if (this.themeService.theme !== 'contrast' && this.themeService.theme !== 'bukele') {
return (gradient === 'age') ? ageColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)) : defaultColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000));
} else {

2
frontend/src/app/shared/filters.utils.ts
View File

@@ -9,7 +9,7 @@ export interface Filter {
txPage?: boolean,
}
export type FilterMode = 'and' | 'or';
export type FilterMode = 'and' | 'or' | 'nor';
export type GradientMode = 'fee' | 'age';