From 3cca6f6b8bb867faaec12e819652029751bedb4e Mon Sep 17 00:00:00 2001 From: Mononaut Date: Sun, 2 Apr 2023 06:54:42 +0900 Subject: [PATCH 1/3] Pixel-aligned grids for sharper block visualizations --- .../block-overview-graph.component.html | 28 ++++++++++--------- .../block-overview-graph.component.scss | 8 ++++++ .../block/block-preview.component.html | 2 +- .../block/block-preview.component.scss | 4 +-- .../app/components/block/block.component.html | 6 ++-- .../mempool-block-overview.component.html | 2 +- 6 files changed, 30 insertions(+), 20 deletions(-) diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html index 2a357843b..a625a0385 100644 --- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html +++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html @@ -1,15 +1,17 @@ -
- -
- -
not available
-
- +
+
+ +
+ +
not available
+
+ +
diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss index 58b53aebf..d30dd3305 100644 --- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss +++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss @@ -6,8 +6,16 @@ display: flex; justify-content: 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 { position: absolute; diff --git a/frontend/src/app/components/block/block-preview.component.html b/frontend/src/app/components/block/block-preview.component.html index 83962857c..0c33246a7 100644 --- a/frontend/src/app/components/block/block-preview.component.html +++ b/frontend/src/app/components/block/block-preview.component.html @@ -71,7 +71,7 @@

Expected Block beta

- @@ -239,7 +239,7 @@

Actual Block

- diff --git a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html index 37c82afad..7d5ddec30 100644 --- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html +++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html @@ -1,7 +1,7 @@ Date: Fri, 14 Jul 2023 14:44:15 +0900 Subject: [PATCH 2/3] tweak default sizes & resolutions --- .../block-overview-graph.component.ts | 3 +- .../block-overview-graph/block-scene.ts | 30 ++++++------------- .../app/components/block/block.component.html | 8 ++--- .../app/components/block/block.component.scss | 4 +++ .../app/components/clock/clock.component.html | 2 +- .../mempool-block-overview.component.html | 3 +- .../mempool-block-overview.component.ts | 1 - 7 files changed, 20 insertions(+), 31 deletions(-) diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts index cc9934af8..49da16d55 100644 --- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts +++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts @@ -25,7 +25,6 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On @Input() unavailable: boolean = false; @Input() auditHighlighting: boolean = false; @Input() blockConversion: Price; - @Input() pixelAlign: boolean = false; @Output() txClickEvent = new EventEmitter<{ tx: TransactionStripped, keyModifier: boolean}>(); @Output() txHoverEvent = new EventEmitter(); @Output() readyEvent = new EventEmitter(); @@ -219,7 +218,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On } else { this.scene = new BlockScene({ width: this.displayWidth, height: this.displayHeight, resolution: this.resolution, blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray, - highlighting: this.auditHighlighting, pixelAlign: this.pixelAlign }); + highlighting: this.auditHighlighting }); this.start(); } } diff --git a/frontend/src/app/components/block-overview-graph/block-scene.ts b/frontend/src/app/components/block-overview-graph/block-scene.ts index e7241141d..510803f03 100644 --- a/frontend/src/app/components/block-overview-graph/block-scene.ts +++ b/frontend/src/app/components/block-overview-graph/block-scene.ts @@ -15,7 +15,6 @@ export default class BlockScene { gridWidth: number; gridHeight: number; gridSize: number; - pixelAlign: boolean; vbytesPerUnit: number; unitPadding: number; unitWidth: number; @@ -24,24 +23,19 @@ export default class BlockScene { animateUntil = 0; dirty: boolean; - constructor({ width, height, resolution, blockLimit, orientation, flip, vertexArray, highlighting, pixelAlign }: + constructor({ width, height, resolution, blockLimit, orientation, flip, vertexArray, highlighting }: { width: number, height: number, resolution: number, blockLimit: number, - orientation: string, flip: boolean, vertexArray: FastVertexArray, highlighting: boolean, pixelAlign: boolean } + orientation: string, flip: boolean, vertexArray: FastVertexArray, highlighting: boolean } ) { - this.init({ width, height, resolution, blockLimit, orientation, flip, vertexArray, highlighting, pixelAlign }); + this.init({ width, height, resolution, blockLimit, orientation, flip, vertexArray, highlighting }); } resize({ width = this.width, height = this.height, animate = true }: { width?: number, height?: number, animate: boolean }): void { this.width = width; this.height = height; this.gridSize = this.width / this.gridWidth; - if (this.pixelAlign) { - this.unitPadding = Math.max(1, Math.floor(this.gridSize / 2.5)); - this.unitWidth = this.gridSize - (this.unitPadding); - } else { - this.unitPadding = width / 500; - this.unitWidth = this.gridSize - (this.unitPadding * 2); - } + this.unitPadding = Math.max(1, Math.floor(this.gridSize / 5)); + this.unitWidth = this.gridSize - (this.unitPadding * 2); this.dirty = true; if (this.initialised && this.scene) { @@ -219,15 +213,14 @@ export default class BlockScene { this.animateUntil = Math.max(this.animateUntil, tx.setHighlight(value)); } - private init({ width, height, resolution, blockLimit, orientation, flip, vertexArray, highlighting, pixelAlign }: + private init({ width, height, resolution, blockLimit, orientation, flip, vertexArray, highlighting }: { width: number, height: number, resolution: number, blockLimit: number, - orientation: string, flip: boolean, vertexArray: FastVertexArray, highlighting: boolean, pixelAlign: boolean } + orientation: string, flip: boolean, vertexArray: FastVertexArray, highlighting: boolean } ): void { this.orientation = orientation; this.flip = flip; this.vertexArray = vertexArray; this.highlightingEnabled = highlighting; - this.pixelAlign = pixelAlign; this.scene = { count: 0, @@ -353,12 +346,7 @@ export default class BlockScene { private gridToScreen(position: Square | void): Square { if (position) { const slotSize = (position.s * this.gridSize); - let squareSize; - if (this.pixelAlign) { - squareSize = slotSize - (this.unitPadding); - } else { - squareSize = slotSize - (this.unitPadding * 2); - } + const squareSize = slotSize - (this.unitPadding * 2); // The grid is laid out notionally left-to-right, bottom-to-top, // so we rotate and/or flip the y axis to match the target configuration. @@ -434,7 +422,7 @@ export default class BlockScene { // calculates and returns the size of the tx in multiples of the grid size private txSize(tx: TxView): number { - const scale = Math.max(1, Math.round(Math.sqrt(tx.vsize / this.vbytesPerUnit))); + const scale = Math.max(1, Math.round(Math.sqrt(1.1 * tx.vsize / this.vbytesPerUnit))); return Math.min(this.gridWidth, Math.max(1, scale)); // bound between 1 and the max displayable size (just in case!) } diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html index 84fdfcd91..e65905cd2 100644 --- a/frontend/src/app/components/block/block.component.html +++ b/frontend/src/app/components/block/block.component.html @@ -100,7 +100,7 @@
-
+
@@ -110,7 +110,7 @@

Expected Block beta

- @@ -239,7 +239,7 @@

Actual Block

- diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss index a15c876e6..7f042552e 100644 --- a/frontend/src/app/components/block/block.component.scss +++ b/frontend/src/app/components/block/block.component.scss @@ -293,3 +293,7 @@ h1 { margin-top: 0.75rem; } } + +.graph-col { + flex-grow: 1.11; +} diff --git a/frontend/src/app/components/clock/clock.component.html b/frontend/src/app/components/clock/clock.component.html index 373653b7e..bdddef730 100644 --- a/frontend/src/app/components/clock/clock.component.html +++ b/frontend/src/app/components/clock/clock.component.html @@ -25,7 +25,7 @@
- +
diff --git a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html index 7d5ddec30..503f2e38d 100644 --- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html +++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html @@ -1,10 +1,9 @@ diff --git a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts index 540046e13..30632a862 100644 --- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts +++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts @@ -16,7 +16,6 @@ import { Router } from '@angular/router'; }) export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit { @Input() index: number; - @Input() pixelAlign: boolean = false; @Output() txPreviewEvent = new EventEmitter(); @ViewChild('blockGraph') blockGraph: BlockOverviewGraphComponent; From 7f0218e343e34c897426e83b72b5deeb2a63689a Mon Sep 17 00:00:00 2001 From: Mononaut Date: Fri, 14 Jul 2023 18:39:28 +0900 Subject: [PATCH 3/3] add margin between mobile audit tabs & visualization --- frontend/src/app/components/block/block.component.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss index 7f042552e..c413b1fce 100644 --- a/frontend/src/app/components/block/block.component.scss +++ b/frontend/src/app/components/block/block.component.scss @@ -239,6 +239,7 @@ h1 { .nav-tabs { border-color: white; border-width: 1px; + margin-bottom: 1em; } .nav-tabs .nav-link {