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

multiblock label overlays

Browse Source
This commit is contained in:
Mononaut 2024-09-19 19:41:29 +00:00
parent afffb04b00
commit 3a0edc6133
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
7 changed files with 67 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/app/components/block-overview-multi/block-overview-multi.component.ts
View File

@ -73,6 +73,7 @@ export class BlockOverviewMultiComponent implements AfterViewInit, OnDestroy, On
animationHeartBeat: number;
displayWidth: number;
displayHeight: number;
displayBlockWidth: number;
cssWidth: number;
cssHeight: number;
shaderProgram: WebGLProgram;
@ -386,21 +387,22 @@ export class BlockOverviewMultiComponent implements AfterViewInit, OnDestroy, On
this.cssHeight = this.canvas.nativeElement.offsetParent.clientHeight;
this.displayWidth = window.devicePixelRatio * this.cssWidth;
this.displayHeight = window.devicePixelRatio * this.cssHeight;
this.displayBlockWidth = window.devicePixelRatio * this.blockWidth;
this.canvas.nativeElement.width = this.displayWidth;
this.canvas.nativeElement.height = this.displayHeight;
if (this.gl) {
this.gl.viewport(0, 0, this.displayWidth, this.displayHeight);
}
for (let i = 0; i < this.scenes.length; i++) {
const blocksPerRow = Math.floor((this.displayWidth + this.padding) / (this.blockWidth + this.padding));
const x = (i % blocksPerRow) * (this.blockWidth + this.padding);
const blocksPerRow = Math.floor((this.displayWidth + this.padding) / (this.displayBlockWidth + this.padding));
const x = (i % blocksPerRow) * (this.displayBlockWidth + this.padding);
const row = Math.floor(i / blocksPerRow);
const y = this.displayHeight - ((row + 1) * this.blockWidth);
const y = this.displayHeight - ((row + 1) * this.displayBlockWidth);
if (this.scenes[i]) {
this.scenes[i].resize({ x, y, width: this.blockWidth, height: this.blockWidth, animate: false });
this.scenes[i].resize({ x, y, width: this.displayBlockWidth, height: this.displayBlockWidth, animate: false });
this.start();
} else {
this.scenes[i] = new BlockScene({ x, y, width: this.blockWidth, height: this.blockWidth, resolution: this.resolution,
this.scenes[i] = new BlockScene({ x, y, width: this.displayBlockWidth, height: this.displayBlockWidth, resolution: this.resolution,
blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray, theme: this.themeService,
highlighting: this.auditHighlighting, animationDuration: this.animationDuration, animationOffset: this.animationOffset,
colorFunction: this.getColorFunction() });

17
frontend/src/app/components/eight-blocks/eight-blocks.component.html
View File

@ -1,8 +1,5 @@
<!-- <div class="blocks" [class.wrap]="wrapBlocks">
<ng-container *ngFor="let i of blockIndices">
<div class="block-wrapper" [style]="wrapperStyle">
<div class="block-container" [style]="containerStyle"> -->
<app-block-overview-multi
<app-block-overview-multi
#blockGraph
[isLoading]="false"
[numBlocks]="numBlocks"
@ -14,12 +11,16 @@
[animationDuration]="animationDuration"
[animationOffset]="animationOffset"
[disableSpinner]="true"
></app-block-overview-multi>
<!-- <div *ngIf="showInfo && blockInfo[i]" class="info" @infoChange>
></app-block-overview-multi>
<div class="blocks" [class.wrap]="wrapBlocks">
<ng-container *ngFor="let i of blockIndices">
<div class="block-wrapper" [style]="wrapperStyle">
<div class="block-container" [style]="containerStyle">
<div *ngIf="showInfo && blockInfo[i]" class="info" @infoChange>
<h1 class="height">{{ blockInfo[i].height }}</h1>
<h2 class="mined-by">by {{ blockInfo[i].extras.pool.name || 'Unknown' }}</h2>
</div>
</div>
</div>
</ng-container>
</div> -->
</div>

3
frontend/src/app/components/eight-blocks/eight-blocks.component.scss
View File

@ -1,4 +1,7 @@
.blocks {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
min-width: 100vw;

2
frontend/src/app/components/eight-blocks/eight-blocks.component.ts
View File

@ -81,6 +81,7 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
wrapperStyle = {
'--block-width': '1080px',
width: '1080px',
height: '1080px',
maxWidth: '1080px',
padding: '',
};
@ -125,6 +126,7 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
this.wrapperStyle = {
'--block-width': this.blockWidth + 'px',
width: this.blockWidth + 'px',
height: this.blockWidth + 'px',
maxWidth: this.blockWidth + 'px',
padding: (this.padding || 0) +'px 0px',
};

19
frontend/src/app/components/eight-mempool/eight-mempool.component.html
View File

@ -1,8 +1,4 @@
<!-- <div class="blocks" [class.wrap]="wrapBlocks">
<ng-container *ngFor="let i of blockIndices">
<div class="block-wrapper" [style]="wrapperStyle">
<div class="block-container" [style]="containerStyle"> -->
<app-block-overview-multi
<app-block-overview-multi
#blockGraph
[isLoading]="false"
[numBlocks]="numBlocks"
@ -15,12 +11,15 @@
[animationDuration]="animationDuration"
[animationOffset]="animationOffset"
[disableSpinner]="true"
></app-block-overview-multi>
<!-- <div *ngIf="showInfo && blockInfo[i]" class="info" @infoChange>
<h1 class="height">{{ blockInfo[i].height }}</h1>
<h2 class="mined-by">by {{ blockInfo[i].extras.pool.name || 'Unknown' }}</h2>
></app-block-overview-multi>
<div class="blocks" [class.wrap]="wrapBlocks">
<ng-container *ngFor="let i of blockIndices">
<div class="block-wrapper" [style]="wrapperStyle">
<div class="block-container" [style]="containerStyle">
<div *ngIf="showInfo && blockInfo[i]" class="info" @infoChange>
<h1 class="height">{{ blockInfo[i].label }}</h1>
</div>
</div>
</div>
</ng-container>
</div> -->
</div>

3
frontend/src/app/components/eight-mempool/eight-mempool.component.scss
View File

@ -1,4 +1,7 @@
.blocks {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
min-width: 100vw;

23
frontend/src/app/components/eight-mempool/eight-mempool.component.ts
View File

@ -27,10 +27,6 @@ function bestFitResolution(min, max, n): number {
return best;
}
interface BlockInfo extends BlockExtended {
timeString: string;
}
@Component({
selector: 'app-eight-mempool',
templateUrl: './eight-mempool.component.html',
@ -53,11 +49,11 @@ export class EightMempoolComponent implements OnInit, OnDestroy {
webGlEnabled = true;
hoverTx: string | null = null;
tipSubscription: Subscription;
networkChangedSubscription: Subscription;
queryParamsSubscription: Subscription;
graphChangeSubscription: Subscription;
blockSub: Subscription;
mempoolBlockSub: Subscription;
chainDirection: string = 'right';
poolDirection: string = 'left';
@ -78,11 +74,16 @@ export class EightMempoolComponent implements OnInit, OnDestroy {
testShiftTimeout: number;
showInfo: boolean = true;
blockInfo: BlockInfo[] = [];
blockInfo: { label: string}[] = [
{ label: '' },
{ label: 'mempool' },
{ label: 'blocks' },
];
wrapperStyle = {
'--block-width': '1080px',
width: '1080px',
height: '1080px',
maxWidth: '1080px',
padding: '',
};
@ -104,7 +105,7 @@ export class EightMempoolComponent implements OnInit, OnDestroy {
}
ngOnInit(): void {
this.websocketService.want(['blocks']);
this.websocketService.want(['blocks', 'mempool-blocks']);
this.network = this.stateService.network;
this.blockSub = this.stateService.mempoolBlockUpdate$.subscribe((update) => {
@ -149,6 +150,10 @@ export class EightMempoolComponent implements OnInit, OnDestroy {
}
});
this.mempoolBlockSub = this.stateService.mempoolBlocks$.subscribe((blocks) => {
this.blockInfo[0].label = `+${blocks.length - this.numBlocks}`;
});
this.queryParamsSubscription = this.route.queryParams.subscribe((params) => {
this.numBlocks = Number.isInteger(Number(params.numBlocks)) ? Number(params.numBlocks) : 8;
this.blockIndices = [...Array(this.numBlocks).keys()];
@ -170,6 +175,7 @@ export class EightMempoolComponent implements OnInit, OnDestroy {
this.wrapperStyle = {
'--block-width': this.blockWidth + 'px',
width: this.blockWidth + 'px',
height: this.blockWidth + 'px',
maxWidth: this.blockWidth + 'px',
padding: (this.padding || 0) +'px 0px',
};
@ -183,7 +189,8 @@ export class EightMempoolComponent implements OnInit, OnDestroy {
ngOnDestroy(): void {
this.stateService.markBlock$.next({});
this.tipSubscription.unsubscribe();
this.blockSub.unsubscribe();
this.mempoolBlockSub.unsubscribe();
this.networkChangedSubscription?.unsubscribe();
this.queryParamsSubscription?.unsubscribe();
}