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

Pixel-aligned grids for sharper block visualizations

Browse Source
This commit is contained in:
Mononaut 2023-04-02 06:54:42 +09:00
parent f15f0570d4
commit 3cca6f6b8b
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
6 changed files with 30 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,17 @@
<div class="block-overview-graph">
<canvas class="block-overview-canvas" [class.clickable]="!!hoverTx" #blockCanvas></canvas>
<div class="loader-wrapper" [class.hidden]="(!isLoading || disableSpinner) && !unavailable">
<div *ngIf="isLoading" class="spinner-border ml-3 loading" role="status"></div>
<div *ngIf="!isLoading && unavailable" class="ml-3" i18n="block.not-available">not available</div>
</div>
<app-block-overview-tooltip <div class="grid-align" [style.gridTemplateColumns]="'repeat(auto-fit, ' + resolution + 'px)'">
[tx]="selectedTx || hoverTx" <div class="block-overview-graph">
[cursorPosition]="tooltipPosition" <canvas class="block-overview-canvas" [class.clickable]="!!hoverTx" #blockCanvas></canvas>
[clickable]="!!selectedTx" <div class="loader-wrapper" [class.hidden]="(!isLoading || disableSpinner) && !unavailable">
[auditEnabled]="auditHighlighting" <div *ngIf="isLoading" class="spinner-border ml-3 loading" role="status"></div>
[blockConversion]="blockConversion" <div *ngIf="!isLoading && unavailable" class="ml-3" i18n="block.not-available">not available</div>
></app-block-overview-tooltip> </div>
<app-block-overview-tooltip
[tx]="selectedTx || hoverTx"
[cursorPosition]="tooltipPosition"
[clickable]="!!selectedTx"
[auditEnabled]="auditHighlighting"
[blockConversion]="blockConversion"
></app-block-overview-tooltip>
</div>
</div> </div>

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

@ -6,8 +6,16 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
grid-column: 1/-1;
} }
.grid-align {
position: relative;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, 75px);
justify-content: center;
}
.block-overview-canvas { .block-overview-canvas {
position: absolute; position: absolute;

2
frontend/src/app/components/block/block-preview.component.html
View File

@ -71,7 +71,7 @@
<app-block-overview-graph <app-block-overview-graph
#blockGraph #blockGraph
[isLoading]="false" [isLoading]="false"
[resolution]="75" [resolution]="80"
[blockLimit]="stateService.blockVSize" [blockLimit]="stateService.blockVSize"
[orientation]="'top'" [orientation]="'top'"
[flip]="false" [flip]="false"

4
frontend/src/app/components/block/block-preview.component.scss
View File

@ -52,8 +52,8 @@
.chart-container { .chart-container {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
width: 470px; width: 480px;
min-width: 470px; min-width: 480px;
padding: 0; padding: 0;
margin-right: 15px; margin-right: 15px;
} }

6
frontend/src/app/components/block/block.component.html
View File

@ -110,7 +110,7 @@
<app-block-overview-graph <app-block-overview-graph
#blockGraphActual #blockGraphActual
[isLoading]="isLoadingOverview" [isLoading]="isLoadingOverview"
[resolution]="75" [resolution]="80"
[blockLimit]="stateService.blockVSize" [blockLimit]="stateService.blockVSize"
[orientation]="'top'" [orientation]="'top'"
[flip]="false" [flip]="false"
@ -227,7 +227,7 @@
<div class="col-sm"> <div class="col-sm">
<h3 class="block-subtitle" *ngIf="!isMobile"><ng-container i18n="block.expected-block">Expected Block</ng-container> <span class="badge badge-pill badge-warning beta" i18n="beta">beta</span></h3> <h3 class="block-subtitle" *ngIf="!isMobile"><ng-container i18n="block.expected-block">Expected Block</ng-container> <span class="badge badge-pill badge-warning beta" i18n="beta">beta</span></h3>
<div class="block-graph-wrapper"> <div class="block-graph-wrapper">
<app-block-overview-graph #blockGraphProjected [isLoading]="isLoadingOverview" [resolution]="75" <app-block-overview-graph #blockGraphProjected [isLoading]="isLoadingOverview" [resolution]="80"
[blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" [auditHighlighting]="showAudit" [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" [auditHighlighting]="showAudit"
(txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="!isMobile && !showAudit"></app-block-overview-graph> (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="!isMobile && !showAudit"></app-block-overview-graph>
<ng-container *ngIf="!isMobile || mode !== 'actual'; else emptyBlockInfo"></ng-container> <ng-container *ngIf="!isMobile || mode !== 'actual'; else emptyBlockInfo"></ng-container>
@ -239,7 +239,7 @@
<div class="col-sm" *ngIf="!isMobile"> <div class="col-sm" *ngIf="!isMobile">
<h3 class="block-subtitle actual" *ngIf="!isMobile"><ng-container i18n="block.actual-block">Actual Block</ng-container> <a class="info-link" [routerLink]="['/docs/faq' | relativeUrl ]" fragment="how-do-block-audits-work"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></a></h3> <h3 class="block-subtitle actual" *ngIf="!isMobile"><ng-container i18n="block.actual-block">Actual Block</ng-container> <a class="info-link" [routerLink]="['/docs/faq' | relativeUrl ]" fragment="how-do-block-audits-work"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></a></h3>
<div class="block-graph-wrapper"> <div class="block-graph-wrapper">
<app-block-overview-graph #blockGraphActual [isLoading]="isLoadingOverview" [resolution]="75" <app-block-overview-graph #blockGraphActual [isLoading]="isLoadingOverview" [resolution]="80"
[blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" mode="mined" [auditHighlighting]="showAudit" [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" mode="mined" [auditHighlighting]="showAudit"
(txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="isMobile && !showAudit"></app-block-overview-graph> (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="isMobile && !showAudit"></app-block-overview-graph>
<ng-container *ngTemplateOutlet="emptyBlockInfo"></ng-container> <ng-container *ngTemplateOutlet="emptyBlockInfo"></ng-container>

2
frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
View File

@ -1,7 +1,7 @@
<app-block-overview-graph <app-block-overview-graph
#blockGraph #blockGraph
[isLoading]="isLoading$ | async" [isLoading]="isLoading$ | async"
[resolution]="75" [resolution]="80"
[blockLimit]="stateService.blockVSize" [blockLimit]="stateService.blockVSize"
[orientation]="timeLtr ? 'right' : 'left'" [orientation]="timeLtr ? 'right' : 'left'"
[flip]="true" [flip]="true"