machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Handle missing webgl on dashboards

Browse Source
This commit is contained in:
Mononaut 2024-02-09 18:01:25 +00:00
parent d4db628c3b
commit ade256efc7
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
3 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,9 @@
[auditEnabled]="auditHighlighting" [auditEnabled]="auditHighlighting"
[blockConversion]="blockConversion" [blockConversion]="blockConversion"
></app-block-overview-tooltip> ></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>
</div> </div>

13
frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss
View File

@ -7,6 +7,19 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
grid-column: 1/-1; 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 { .grid-align {

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

@ -10,6 +10,7 @@ import { StateService } from '../../services/state.service';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { defaultColorFunction, setOpacity, defaultFeeColors, defaultAuditFeeColors, defaultMarginalFeeColors, defaultAuditColors } from './utils'; import { defaultColorFunction, setOpacity, defaultFeeColors, defaultAuditFeeColors, defaultMarginalFeeColors, defaultAuditColors } from './utils';
import { ActiveFilter, FilterMode, toFlags } from '../../shared/filters.utils'; import { ActiveFilter, FilterMode, toFlags } from '../../shared/filters.utils';
import { detectWebGL } from '../../shared/graphs.utils';
const unmatchedOpacity = 0.2; const unmatchedOpacity = 0.2;
const unmatchedFeeColors = defaultFeeColors.map(c => setOpacity(c, unmatchedOpacity)); const unmatchedFeeColors = defaultFeeColors.map(c => setOpacity(c, unmatchedOpacity));
@ -77,11 +78,14 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
filtersAvailable: boolean = true; filtersAvailable: boolean = true;
activeFilterFlags: bigint | null = null; activeFilterFlags: bigint | null = null;
webGlEnabled = true;
constructor( constructor(
readonly ngZone: NgZone, readonly ngZone: NgZone,
readonly elRef: ElementRef, readonly elRef: ElementRef,
private stateService: StateService, private stateService: StateService,
) { ) {
this.webGlEnabled = detectWebGL();
this.vertexArray = new FastVertexArray(512, TxSprite.dataSize); this.vertexArray = new FastVertexArray(512, TxSprite.dataSize);
this.searchSubscription = this.stateService.searchText$.subscribe((text) => { this.searchSubscription = this.stateService.searchText$.subscribe((text) => {
this.searchText = text; this.searchText = text;
@ -506,6 +510,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
} }
onTxClick(cssX: number, cssY: number, keyModifier: boolean = false) { onTxClick(cssX: number, cssY: number, keyModifier: boolean = false) {
if (this.scene) {
const x = cssX * window.devicePixelRatio; const x = cssX * window.devicePixelRatio;
const y = cssY * window.devicePixelRatio; const y = cssY * window.devicePixelRatio;
const selected = this.scene.getTxAt({ x, y }); const selected = this.scene.getTxAt({ x, y });
@ -513,6 +518,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
this.txClickEvent.emit({ tx: selected, keyModifier }); this.txClickEvent.emit({ tx: selected, keyModifier });
} }
} }
}
onTxHover(hoverId: string) { onTxHover(hoverId: string) {
this.txHoverEvent.emit(hoverId); this.txHoverEvent.emit(hoverId);
@ -529,7 +535,6 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
} }
getFilterColorFunction(flags: bigint): ((tx: TxView) => Color) { getFilterColorFunction(flags: bigint): ((tx: TxView) => Color) {
console.log('getting filter color function: ', flags, this.filterMode);
return (tx: TxView) => { return (tx: TxView) => {
if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) { if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) {
return defaultColorFunction(tx); return defaultColorFunction(tx);