Merge pull request #4810 from mempool/mononaut/tx-tags

Show goggles badges on block overview tooltip
This commit is contained in:
softsimon 2024-03-23 14:10:30 +09:00 committed by GitHub
commit 4374e6e0eb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 151 additions and 72 deletions

View File

@ -12,6 +12,8 @@
[clickable]="!!selectedTx" [clickable]="!!selectedTx"
[auditEnabled]="auditHighlighting" [auditEnabled]="auditHighlighting"
[blockConversion]="blockConversion" [blockConversion]="blockConversion"
[filterFlags]="activeFilterFlags"
[filterMode]="filterMode"
></app-block-overview-tooltip> ></app-block-overview-tooltip>
<app-block-filters *ngIf="webGlEnabled && 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"> <div *ngIf="!webGlEnabled" class="placeholder">

View File

@ -30,6 +30,7 @@ export default class TxView implements TransactionStripped {
feerate: number; feerate: number;
acc?: boolean; acc?: boolean;
rate?: number; rate?: number;
flags: number;
bigintFlags?: bigint | null = 0b00000100_00000000_00000000_00000000n; bigintFlags?: bigint | null = 0b00000100_00000000_00000000_00000000n;
status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'freshcpfp' | 'added' | 'censored' | 'selected' | 'rbf' | 'accelerated'; status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'freshcpfp' | 'added' | 'censored' | 'selected' | 'rbf' | 'accelerated';
context?: 'projected' | 'actual'; context?: 'projected' | 'actual';
@ -59,6 +60,7 @@ export default class TxView implements TransactionStripped {
this.acc = tx.acc; this.acc = tx.acc;
this.rate = tx.rate; this.rate = tx.rate;
this.status = tx.status; this.status = tx.status;
this.flags = tx.flags || 0;
this.bigintFlags = tx.flags ? (BigInt(tx.flags) | (this.acc ? TransactionFlags.acceleration : 0n)): 0n; this.bigintFlags = tx.flags ? (BigInt(tx.flags) | (this.acc ? TransactionFlags.acceleration : 0n)): 0n;
this.initialised = false; this.initialised = false;
this.vertexArray = scene.vertexArray; this.vertexArray = scene.vertexArray;

View File

@ -6,61 +6,70 @@
[style.left]="tooltipPosition.x + 'px'" [style.left]="tooltipPosition.x + 'px'"
[style.top]="tooltipPosition.y + 'px'" [style.top]="tooltipPosition.y + 'px'"
> >
<table> <table class="table-fixed">
<tbody> <tbody>
<tr> <tr>
<td class="td-width" i18n="shared.transaction">Transaction</td> <td class="label" i18n="shared.transaction">Transaction</td>
<td> <td class="value">
<a [routerLink]="['/tx/' | relativeUrl, txid]">{{ txid | shortenString : 16}}</a> <a [routerLink]="['/tx/' | relativeUrl, txid]">{{ txid | shortenString : 16}}</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="td-width" i18n="dashboard.latest-transactions.amount">Amount</td> <td class="label" i18n="dashboard.latest-transactions.amount">Amount</td>
<td><app-amount [blockConversion]="blockConversion" [satoshis]="value" [noFiat]="true"></app-amount></td> <td class="value"><app-amount [blockConversion]="blockConversion" [satoshis]="value" [noFiat]="true"></app-amount></td>
</tr> </tr>
<tr> <tr>
<td class="td-width" i18n="transaction.fee|Transaction fee">Fee</td> <td class="label" i18n="transaction.fee|Transaction fee">Fee</td>
<td>{{ fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> &nbsp; <span class="fiat"><app-fiat [blockConversion]="blockConversion" [value]="fee"></app-fiat></span></td> <td class="value">{{ fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> &nbsp; <span class="fiat"><app-fiat [blockConversion]="blockConversion" [value]="fee"></app-fiat></span>
</tr> </tr>
<tr> <tr>
<td class="td-width" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td> <td class="label" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
<td> <td class="value">
<app-fee-rate [fee]="feeRate"></app-fee-rate> <app-fee-rate [fee]="feeRate"></app-fee-rate>
</td> </td>
</tr> </tr>
<tr *ngIf="hasEffectiveRate && effectiveRate != null"> <tr *ngIf="hasEffectiveRate && effectiveRate != null">
<td *ngIf="!this.acceleration" class="td-width" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td> <td *ngIf="!this.acceleration" class="label" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
<td *ngIf="this.acceleration" class="td-width" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Accelerated fee rate</td> <td *ngIf="this.acceleration" class="label" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Accelerated fee rate</td>
<td> <td class="value">
<app-fee-rate [fee]="effectiveRate"></app-fee-rate> <app-fee-rate [fee]="effectiveRate"></app-fee-rate>
</td> </td>
</tr> </tr>
<tr *only-vsize> <tr *only-vsize>
<td class="td-width" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td> <td class="label" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
<td [innerHTML]="'&lrm;' + (vsize | vbytes: 2)"></td> <td class="value" [innerHTML]="'&lrm;' + (vsize | vbytes: 2)"></td>
</tr> </tr>
<tr *only-weight> <tr *only-weight>
<td class="td-width" i18n="transaction.weight|Transaction Weight">Weight</td> <td class="label" i18n="transaction.weight|Transaction Weight">Weight</td>
<td [innerHTML]="'&lrm;' + ((vsize * 4) | wuBytes: 2)"></td> <td class="value" [innerHTML]="'&lrm;' + ((vsize * 4) | wuBytes: 2)"></td>
</tr> </tr>
<tr *ngIf="auditEnabled && tx && tx.status && tx.status.length"> <tr *ngIf="auditEnabled && tx && tx.status && tx.status.length">
<td class="td-width" i18n="transaction.audit-status">Audit status</td> <td class="label" i18n="transaction.audit-status">Audit status</td>
<td class="value">
<ng-container [ngSwitch]="tx?.status"> <ng-container [ngSwitch]="tx?.status">
<td *ngSwitchCase="'found'"><span class="badge badge-success" i18n="transaction.audit.match">Match</span></td> <span *ngSwitchCase="'found'" class="badge badge-success" i18n="transaction.audit.match">Match</span>
<td *ngSwitchCase="'censored'"><span class="badge badge-danger" i18n="transaction.audit.removed">Removed</span></td> <span *ngSwitchCase="'censored'" class="badge badge-danger" i18n="transaction.audit.removed">Removed</span>
<td *ngSwitchCase="'missing'"><span class="badge badge-warning" i18n="transaction.audit.marginal">Marginal fee rate</span></td> <span *ngSwitchCase="'missing'" class="badge badge-warning" i18n="transaction.audit.marginal">Marginal fee rate</span>
<td *ngSwitchCase="'sigop'"><span class="badge badge-warning" i18n="transaction.audit.sigop">High sigop count</span></td> <span *ngSwitchCase="'sigop'" class="badge badge-warning" i18n="transaction.audit.sigop">High sigop count</span>
<td *ngSwitchCase="'fresh'"><span class="badge badge-warning" i18n="transaction.audit.recently-broadcasted">Recently broadcasted</span></td> <span *ngSwitchCase="'fresh'" class="badge badge-warning" i18n="transaction.audit.recently-broadcasted">Recently broadcasted</span>
<td *ngSwitchCase="'freshcpfp'"><span class="badge badge-warning" i18n="transaction.audit.recently-cpfped">Recently CPFP'd</span></td> <span *ngSwitchCase="'freshcpfp'" class="badge badge-warning" i18n="transaction.audit.recently-cpfped">Recently CPFP'd</span>
<td *ngSwitchCase="'added'"><span class="badge badge-warning" i18n="transaction.audit.added">Added</span></td> <span *ngSwitchCase="'added'" class="badge badge-warning" i18n="transaction.audit.added">Added</span>
<td *ngSwitchCase="'selected'"><span class="badge badge-warning" i18n="transaction.audit.marginal">Marginal fee rate</span></td> <span *ngSwitchCase="'selected'" class="badge badge-warning" i18n="transaction.audit.marginal">Marginal fee rate</span>
<td *ngSwitchCase="'rbf'"><span class="badge badge-warning" i18n="transaction.audit.conflicting">Conflicting</span></td> <span *ngSwitchCase="'rbf'" class="badge badge-warning" i18n="transaction.audit.conflicting">Conflicting</span>
<td *ngSwitchCase="'accelerated'"><span class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span></td> <span *ngSwitchCase="'accelerated'" class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span>
</ng-container> </ng-container>
</td>
</tr> </tr>
<tr *ngIf="!auditEnabled && tx && tx.status === 'accelerated'"> {{ activeFilters.rbf }}
<td class="td-width"></td> <tr *ngIf="(!auditEnabled && tx && tx.status === 'accelerated') || filters.length">
<td><span class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span></td> <td colspan="2">
<div class="tags mt-2" [class.any-mode]="filterMode === 'or'">
<span *ngIf="!auditEnabled && tx && tx.status === 'accelerated'" class="badge badge-accelerated" i18n="transaction.audit.accelerated">Accelerated</span>
<ng-container *ngFor="let filter of filters;">
<span class="btn badge filter-tag" [class.matching]="activeFilters[filter.key]">{{ filter.label }}</span>
</ng-container>
</div>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

View File

@ -10,6 +10,7 @@
padding: 10px 15px; padding: 10px 15px;
text-align: left; text-align: left;
min-width: 320px; min-width: 320px;
max-width: 320px;
pointer-events: none; pointer-events: none;
z-index: 11; z-index: 11;
@ -18,8 +19,14 @@
} }
} }
.td-width { th, td {
padding-right: 10px; &.label {
width: 30%;
}
&.value {
width: 70%;
text-align: end;
}
} }
.badge.badge-accelerated { .badge.badge-accelerated {
@ -29,6 +36,40 @@
animation: acceleratePulse 1s infinite; animation: acceleratePulse 1s infinite;
} }
.tags {
display: flex;
flex-wrap: wrap;
row-gap: 0.25em;
margin-top: 0.2em;
max-width: 100%;
.badge {
border-radius: 0.2rem;
padding: 0.2em 0.5em;
margin-right: 0.25em;
}
.filter-tag {
background: #181b2daf;
border: solid 1px #105fb0;
color: white;
transition: background-color 300ms;
&.matching {
background-color: #105fb0;
}
}
&.any-mode {
.filter-tag {
border: solid 1px #1a9436;
&.matching {
background-color: #1a9436;
}
}
}
}
@keyframes acceleratePulse { @keyframes acceleratePulse {
0% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; } 0% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
50% { background-color: #8457bb; box-shadow: #ad7de5 0px 0px 18px -2px;} 50% { background-color: #8457bb; box-shadow: #ad7de5 0px 0px 18px -2px;}

View File

@ -1,8 +1,8 @@
import { Component, ElementRef, ViewChild, Input, OnChanges, ChangeDetectionStrategy } from '@angular/core'; import { Component, ElementRef, ViewChild, Input, OnChanges, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { Position } from '../../components/block-overview-graph/sprite-types.js'; import { Position } from '../../components/block-overview-graph/sprite-types.js';
import { Price } from '../../services/price.service'; import { Price } from '../../services/price.service';
import { TransactionStripped } from '../../interfaces/node-api.interface.js'; import { TransactionStripped } from '../../interfaces/node-api.interface.js';
import { TransactionFlags } from '../../shared/filters.utils'; import { Filter, FilterMode, TransactionFlags, toFilters } from '../../shared/filters.utils';
@Component({ @Component({
selector: 'app-block-overview-tooltip', selector: 'app-block-overview-tooltip',
@ -15,6 +15,8 @@ export class BlockOverviewTooltipComponent implements OnChanges {
@Input() clickable: boolean; @Input() clickable: boolean;
@Input() auditEnabled: boolean = false; @Input() auditEnabled: boolean = false;
@Input() blockConversion: Price; @Input() blockConversion: Price;
@Input() filterFlags: bigint | null = null;
@Input() filterMode: FilterMode = 'and';
txid = ''; txid = '';
fee = 0; fee = 0;
@ -24,12 +26,16 @@ export class BlockOverviewTooltipComponent implements OnChanges {
effectiveRate; effectiveRate;
acceleration; acceleration;
hasEffectiveRate: boolean = false; hasEffectiveRate: boolean = false;
filters: Filter[] = [];
activeFilters: { [key: string]: boolean } = {};
tooltipPosition: Position = { x: 0, y: 0 }; tooltipPosition: Position = { x: 0, y: 0 };
@ViewChild('tooltip') tooltipElement: ElementRef<HTMLCanvasElement>; @ViewChild('tooltip') tooltipElement: ElementRef<HTMLCanvasElement>;
constructor() {} constructor(
private cd: ChangeDetectorRef,
) {}
ngOnChanges(changes): void { ngOnChanges(changes): void {
if (changes.cursorPosition && changes.cursorPosition.currentValue) { if (changes.cursorPosition && changes.cursorPosition.currentValue) {
@ -48,17 +54,25 @@ export class BlockOverviewTooltipComponent implements OnChanges {
this.tooltipPosition = { x, y }; this.tooltipPosition = { x, y };
} }
if (changes.tx) { if (this.tx && (changes.tx || changes.filterFlags || changes.filterMode)) {
const tx = changes.tx.currentValue || {}; this.txid = this.tx.txid || '';
this.txid = tx.txid || ''; this.fee = this.tx.fee || 0;
this.fee = tx.fee || 0; this.value = this.tx.value || 0;
this.value = tx.value || 0; this.vsize = this.tx.vsize || 1;
this.vsize = tx.vsize || 1;
this.feeRate = this.fee / this.vsize; this.feeRate = this.fee / this.vsize;
this.effectiveRate = tx.rate; this.effectiveRate = this.tx.rate;
this.acceleration = tx.acc; this.acceleration = this.tx.acc;
const txFlags = BigInt(this.tx.flags) || 0n;
this.hasEffectiveRate = Math.abs((this.fee / this.vsize) - this.effectiveRate) > 0.05 this.hasEffectiveRate = Math.abs((this.fee / this.vsize) - this.effectiveRate) > 0.05
|| (tx.bigintFlags && (tx.bigintFlags & (TransactionFlags.cpfp_child | TransactionFlags.cpfp_parent)) > 0n); || (txFlags && (txFlags & (TransactionFlags.cpfp_child | TransactionFlags.cpfp_parent)) > 0n);
this.filters = this.tx.flags ? toFilters(txFlags).filter(f => f.tooltip) : [];
this.activeFilters = {}
for (const filter of this.filters) {
if (this.filterFlags && (this.filterFlags & BigInt(filter.flag))) {
this.activeFilters[filter.key] = true;
}
}
this.cd.markForCheck();
} }
} }
} }

View File

@ -5,6 +5,7 @@ export interface Filter {
toggle?: string, toggle?: string,
group?: string, group?: string,
important?: boolean, important?: boolean,
tooltip?: boolean,
} }
export type FilterMode = 'and' | 'or'; export type FilterMode = 'and' | 'or';
@ -61,42 +62,52 @@ export function toFlags(filters: string[]): bigint {
return flag; return flag;
} }
export function toFilters(flags: bigint): Filter[] {
const filters = [];
for (const filter of Object.values(TransactionFilters).filter(f => f !== undefined)) {
if (flags & filter.flag) {
filters.push(filter);
}
}
return filters;
}
export const TransactionFilters: { [key: string]: Filter } = { export const TransactionFilters: { [key: string]: Filter } = {
/* features */ /* features */
rbf: { key: 'rbf', label: 'RBF enabled', flag: TransactionFlags.rbf, toggle: 'rbf', important: true }, rbf: { key: 'rbf', label: 'RBF enabled', flag: TransactionFlags.rbf, toggle: 'rbf', important: true, tooltip: true, },
no_rbf: { key: 'no_rbf', label: 'RBF disabled', flag: TransactionFlags.no_rbf, toggle: 'rbf', important: true }, no_rbf: { key: 'no_rbf', label: 'RBF disabled', flag: TransactionFlags.no_rbf, toggle: 'rbf', important: true, tooltip: true, },
v1: { key: 'v1', label: 'Version 1', flag: TransactionFlags.v1, toggle: 'version' }, v1: { key: 'v1', label: 'Version 1', flag: TransactionFlags.v1, toggle: 'version', tooltip: true, },
v2: { key: 'v2', label: 'Version 2', flag: TransactionFlags.v2, toggle: 'version' }, v2: { key: 'v2', label: 'Version 2', flag: TransactionFlags.v2, toggle: 'version', tooltip: true, },
v3: { key: 'v3', label: 'Version 3', flag: TransactionFlags.v3, toggle: 'version' }, v3: { key: 'v3', label: 'Version 3', flag: TransactionFlags.v3, toggle: 'version', tooltip: true, },
nonstandard: { key: 'nonstandard', label: 'Non-Standard', flag: TransactionFlags.nonstandard, important: true }, nonstandard: { key: 'nonstandard', label: 'Non-Standard', flag: TransactionFlags.nonstandard, important: true, tooltip: true, },
/* address types */ /* address types */
p2pk: { key: 'p2pk', label: 'P2PK', flag: TransactionFlags.p2pk, important: true }, p2pk: { key: 'p2pk', label: 'P2PK', flag: TransactionFlags.p2pk, important: true, tooltip: true, },
p2ms: { key: 'p2ms', label: 'Bare multisig', flag: TransactionFlags.p2ms, important: true }, p2ms: { key: 'p2ms', label: 'Bare multisig', flag: TransactionFlags.p2ms, important: true, tooltip: true, },
p2pkh: { key: 'p2pkh', label: 'P2PKH', flag: TransactionFlags.p2pkh, important: true }, p2pkh: { key: 'p2pkh', label: 'P2PKH', flag: TransactionFlags.p2pkh, important: true, tooltip: false, },
p2sh: { key: 'p2sh', label: 'P2SH', flag: TransactionFlags.p2sh, important: true }, p2sh: { key: 'p2sh', label: 'P2SH', flag: TransactionFlags.p2sh, important: true, tooltip: false, },
p2wpkh: { key: 'p2wpkh', label: 'P2WPKH', flag: TransactionFlags.p2wpkh, important: true }, p2wpkh: { key: 'p2wpkh', label: 'P2WPKH', flag: TransactionFlags.p2wpkh, important: true, tooltip: false, },
p2wsh: { key: 'p2wsh', label: 'P2WSH', flag: TransactionFlags.p2wsh, important: true }, p2wsh: { key: 'p2wsh', label: 'P2WSH', flag: TransactionFlags.p2wsh, important: true, tooltip: false, },
p2tr: { key: 'p2tr', label: 'Taproot', flag: TransactionFlags.p2tr, important: true }, p2tr: { key: 'p2tr', label: 'Taproot', flag: TransactionFlags.p2tr, important: true, tooltip: false, },
/* behavior */ /* behavior */
cpfp_parent: { key: 'cpfp_parent', label: 'Paid for by child', flag: TransactionFlags.cpfp_parent, important: true }, cpfp_parent: { key: 'cpfp_parent', label: 'Paid for by child', flag: TransactionFlags.cpfp_parent, important: true, tooltip: true, },
cpfp_child: { key: 'cpfp_child', label: 'Pays for parent', flag: TransactionFlags.cpfp_child, important: true }, cpfp_child: { key: 'cpfp_child', label: 'Pays for parent', flag: TransactionFlags.cpfp_child, important: true, tooltip: true, },
replacement: { key: 'replacement', label: 'Replacement', flag: TransactionFlags.replacement, important: true }, replacement: { key: 'replacement', label: 'Replacement', flag: TransactionFlags.replacement, important: true, tooltip: true, },
acceleration: window?.['__env']?.ACCELERATOR ? { key: 'acceleration', label: 'Accelerated', flag: TransactionFlags.acceleration, important: false } : undefined, acceleration: window?.['__env']?.ACCELERATOR ? { key: 'acceleration', label: 'Accelerated', flag: TransactionFlags.acceleration, important: false } : undefined,
/* data */ /* data */
op_return: { key: 'op_return', label: 'OP_RETURN', flag: TransactionFlags.op_return, important: true }, op_return: { key: 'op_return', label: 'OP_RETURN', flag: TransactionFlags.op_return, important: true, tooltip: true, },
fake_pubkey: { key: 'fake_pubkey', label: 'Fake pubkey', flag: TransactionFlags.fake_pubkey }, fake_pubkey: { key: 'fake_pubkey', label: 'Fake pubkey', flag: TransactionFlags.fake_pubkey, tooltip: true, },
inscription: { key: 'inscription', label: 'Inscription', flag: TransactionFlags.inscription, important: true }, inscription: { key: 'inscription', label: 'Inscription', flag: TransactionFlags.inscription, important: true, tooltip: true, },
fake_scripthash: { key: 'fake_scripthash', label: 'Fake scripthash', flag: TransactionFlags.fake_scripthash }, fake_scripthash: { key: 'fake_scripthash', label: 'Fake scripthash', flag: TransactionFlags.fake_scripthash, tooltip: true,},
/* heuristics */ /* heuristics */
coinjoin: { key: 'coinjoin', label: 'Coinjoin', flag: TransactionFlags.coinjoin, important: true }, coinjoin: { key: 'coinjoin', label: 'Coinjoin', flag: TransactionFlags.coinjoin, important: true, tooltip: true, },
consolidation: { key: 'consolidation', label: 'Consolidation', flag: TransactionFlags.consolidation }, consolidation: { key: 'consolidation', label: 'Consolidation', flag: TransactionFlags.consolidation, tooltip: true, },
batch_payout: { key: 'batch_payout', label: 'Batch payment', flag: TransactionFlags.batch_payout }, batch_payout: { key: 'batch_payout', label: 'Batch payment', flag: TransactionFlags.batch_payout, tooltip: true, },
/* sighash */ /* sighash */
sighash_all: { key: 'sighash_all', label: 'sighash_all', flag: TransactionFlags.sighash_all }, sighash_all: { key: 'sighash_all', label: 'sighash_all', flag: TransactionFlags.sighash_all },
sighash_none: { key: 'sighash_none', label: 'sighash_none', flag: TransactionFlags.sighash_none }, sighash_none: { key: 'sighash_none', label: 'sighash_none', flag: TransactionFlags.sighash_none, tooltip: true, },
sighash_single: { key: 'sighash_single', label: 'sighash_single', flag: TransactionFlags.sighash_single }, sighash_single: { key: 'sighash_single', label: 'sighash_single', flag: TransactionFlags.sighash_single, tooltip: true, },
sighash_default: { key: 'sighash_default', label: 'sighash_default', flag: TransactionFlags.sighash_default }, sighash_default: { key: 'sighash_default', label: 'sighash_default', flag: TransactionFlags.sighash_default },
sighash_acp: { key: 'sighash_acp', label: 'sighash_anyonecanpay', flag: TransactionFlags.sighash_acp }, sighash_acp: { key: 'sighash_acp', label: 'sighash_anyonecanpay', flag: TransactionFlags.sighash_acp, tooltip: true, },
}; };
export const FilterGroups: { label: string, filters: Filter[]}[] = [ export const FilterGroups: { label: string, filters: Filter[]}[] = [