From d4c9f6decb95aa9fb02cc0e353064214d70b5fc5 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Mon, 30 May 2022 21:53:39 +0000 Subject: [PATCH] Implement WebGL projected block visualization --- .../mempool-block-overview/block-scene.ts | 407 ++++++++++++++++++ .../fast-vertex-array.ts | 103 +++++ .../mempool-block-overview.component.html | 2 +- .../mempool-block-overview.component.scss | 15 + .../mempool-block-overview.component.ts | 305 ++++++++++++- .../mempool-block-overview/sprite-types.ts | 73 ++++ .../mempool-block-overview/tx-sprite.ts | 211 +++++++++ .../mempool-block-overview/tx-view.ts | 143 ++++++ 8 files changed, 1254 insertions(+), 5 deletions(-) create mode 100644 frontend/src/app/components/mempool-block-overview/block-scene.ts create mode 100644 frontend/src/app/components/mempool-block-overview/fast-vertex-array.ts create mode 100644 frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.scss create mode 100644 frontend/src/app/components/mempool-block-overview/sprite-types.ts create mode 100644 frontend/src/app/components/mempool-block-overview/tx-sprite.ts create mode 100644 frontend/src/app/components/mempool-block-overview/tx-view.ts diff --git a/frontend/src/app/components/mempool-block-overview/block-scene.ts b/frontend/src/app/components/mempool-block-overview/block-scene.ts new file mode 100644 index 000000000..343800dfc --- /dev/null +++ b/frontend/src/app/components/mempool-block-overview/block-scene.ts @@ -0,0 +1,407 @@ +import TxSprite from './tx-sprite' +import TxView from './tx-view' +import { Square } from './sprite-types' + +export default class BlockScene { + scene: { count: number, offset: { x: number, y: number}}; + txs: { [key: string]: TxView }; + width: number; + height: number; + gridWidth: number; + gridHeight: number; + gridSize: number; + vbytesPerUnit: number; + unitPadding: number; + unitWidth: number; + initialised: boolean; + layout: BlockLayout; + dirty: boolean; + + constructor ({ width, height, resolution, blockLimit }: { width: number, height: number, resolution: number, blockLimit: number}) { + this.init({ width, height, resolution, blockLimit }) + } + + destroy (): void { + Object.values(this.txs).forEach(tx => tx.destroy()) + } + + resize ({ width = this.width, height = this.height }: { width?: number, height?: number}): void { + this.width = width + this.height = height + this.gridSize = this.width / this.gridWidth + this.unitPadding = Math.floor(Math.max(1, width / 1000)) + this.unitWidth = this.gridSize - (this.unitPadding * 2) + + this.dirty = true + } + + // Animate new block entering scene + enter (txs: TxView[], direction) { + this.replace(txs, [], direction) + } + + // Animate block leaving scene + exit (direction: string): TxView[] { + const removed = [] + const startTime = performance.now() + Object.values(this.txs).forEach(tx => { + this.remove(tx.txid, startTime, direction) + removed.push(tx) + }) + return removed + } + + // Reset layout and replace with new set of transactions + replace (txs: TxView[], remove: TxView[], direction: string = 'left'): void { + const startTime = performance.now() + this.removeBatch(remove.map(tx => tx.txid), startTime, direction) + + // clean up sprites + setTimeout(() => { + remove.forEach(tx => { + tx.destroy() + }) + }, 1000) + + this.layout = new BlockLayout({ width: this.gridWidth, height: this.gridHeight }) + + txs.sort((a,b) => { return b.feerate - a.feerate }).forEach(tx => { + this.insert(tx, startTime, direction) + }) + } + + private init ({ width, height, resolution, blockLimit }: { width: number, height: number, resolution: number, blockLimit: number}): void { + this.scene = { + count: 0, + offset: { + x: 0, + y: 0 + } + } + + // Set the scale of the visualization (with a 5% margin) + this.vbytesPerUnit = blockLimit / Math.pow(resolution / 1.05, 2) + this.gridWidth = resolution + this.gridHeight = resolution + this.resize({ width, height }) + this.layout = new BlockLayout({ width: this.gridWidth, height: this.gridHeight }) + + this.txs = {} + + this.initialised = true + this.dirty = true + } + + private insert (tx: TxView, startTime: number, direction: string = 'left'): void { + this.txs[tx.txid] = tx + this.place(tx) + this.updateTx(tx, startTime, direction) + } + + private updateTx (tx: TxView, startTime: number, direction: string = 'left'): void { + if (tx.dirty || this.dirty) { + this.saveGridToScreenPosition(tx) + this.setTxOnScreen(tx, startTime, direction) + } + } + + private setTxOnScreen (tx: TxView, startTime: number, direction: string = 'left'): void { + if (!tx.initialised) { + const txColor = tx.getColor() + tx.update({ + display: { + position: { + x: tx.screenPosition.x + (direction == 'right' ? -this.width : this.width) * 1.4, + y: tx.screenPosition.y, + s: tx.screenPosition.s + }, + color: txColor, + }, + start: startTime, + delay: 0, + }) + tx.update({ + display: { + position: tx.screenPosition, + color: txColor + }, + duration: 1000, + start: startTime, + delay: 50, + }) + } else { + tx.update({ + display: { + position: tx.screenPosition + }, + duration: 1000, + minDuration: 1000, + start: startTime, + delay: 50, + }) + } + } + + private updateAll (startTime: number, direction: string = 'left'): void { + this.scene.count = 0 + const ids = this.getTxList() + startTime = startTime || performance.now() + for (let i = 0; i < ids.length; i++) { + this.updateTx(this.txs[ids[i]], startTime, direction) + } + this.dirty = false + } + + private remove (id: string, startTime: number, direction: string = 'left'): TxView | void { + const tx = this.txs[id] + if (tx) { + this.layout.remove(tx) + tx.update({ + display: { + position: { + x: tx.screenPosition.x + (direction == 'right' ? this.width : -this.width) * 1.4, + y: this.txs[id].screenPosition.y, + } + }, + duration: 1000, + start: startTime, + delay: 50 + }) + } + delete this.txs[id] + return tx + } + + private getTxList (): string[] { + return Object.keys(this.txs) + } + + private saveGridToScreenPosition (tx: TxView): void { + tx.screenPosition = this.gridToScreen(tx.gridPosition) + } + + // convert grid coordinates to screen coordinates + private gridToScreen (position: Square | void): Square { + if (position) { + const slotSize = (position.s * this.gridSize) + const squareSize = slotSize - (this.unitPadding * 2) + + // The grid is laid out notionally left-to-right, bottom-to-top + // So we rotate 90deg counterclockwise then flip the y axis + // + // grid screen + // ________ ________ ________ + // | | | b| | a| + // | | rotate | | flip | c | + // | c | --> | c | --> | | + // |a______b| |_______a| |_______b| + return { + x: this.width + (this.unitPadding * 2) - (this.gridSize * position.y) - slotSize, + y: this.height - ((this.gridSize * position.x) + (slotSize - this.unitPadding)), + s: squareSize + } + } else { + return { x: 0, y: 0, s: 0 } + } + } + + // calculates and returns the size of the tx in multiples of the grid size + private txSize (tx: TxView): number { + let scale = Math.max(1,Math.round(Math.sqrt(tx.vsize / this.vbytesPerUnit))) + return Math.min(this.gridWidth, Math.max(1, scale)) // bound between 1 and the max displayable size (just in case!) + } + + private place (tx: TxView): void { + const size = this.txSize(tx) + this.layout.insert(tx, size) + } + + private removeBatch (ids: string[], startTime: number, direction: string = 'left'): (TxView | void)[] { + if (!startTime) startTime = performance.now() + return ids.map(id => { + return this.remove(id, startTime, direction) + }).filter(tx => !!tx) + } +} + + +class Slot { + l: number + r: number + w: number + + constructor (l: number, r: number) { + this.l = l + this.r = r + this.w = r - l + } + + intersects (slot: Slot): boolean { + return !((slot.r <= this.l) || (slot.l >= this.r)) + } + + subtract (slot: Slot): Slot[] | void { + if (this.intersects(slot)) { + // from middle + if (slot.l > this.l && slot.r < this.r) { + return [ + new Slot(this.l, slot.l), + new Slot(slot.r, this.r) + ] + } // totally covered + else if (slot.l <= this.l && slot.r >= this.r) { + return [] + } // from left side + else if (slot.l <= this.l) { + if (slot.r == this.r) return [] + else return [new Slot(slot.r, this.r)] + } // from right side + else if (slot.r >= this.r) { + if (slot.l == this.l) return [] + else return [new Slot(this.l, slot.l)] + } + } else return [this] + } +} + +class TxSlot extends Slot { + tx: TxView + + constructor (l: number, r: number, tx: TxView) { + super(l, r) + this.tx = tx + } +} + +class Row { + y: number + w: number + filled: TxSlot[] + slots: Slot[] + + + constructor (y: number, width: number) { + this.y = y + this.w = width + this.filled = [] + this.slots = [new Slot(0, this.w)] + } + + // insert a transaction w/ given width into row starting at position x + insert (x: number, w: number, tx: TxView): void { + const newSlot = new TxSlot(x, x + w, tx) + // insert into filled list + let index = this.filled.findIndex((slot) => { return slot.l >= newSlot.r }) + if (index < 0) index = this.filled.length + this.filled.splice(index || 0, 0, newSlot) + // subtract from overlapping slots + for (let i = 0; i < this.slots.length; i++) { + if (newSlot.intersects(this.slots[i])) { + const diff = this.slots[i].subtract(newSlot) + if (diff) { + this.slots.splice(i, 1, ...diff) + i += diff.length - 1 + } + } + } + } + + remove (x: number, w: number): void { + const txIndex = this.filled.findIndex((slot) => { return slot.l == x }) + this.filled.splice(txIndex, 1) + + const newSlot = new Slot(x, x + w) + let slotIndex = this.slots.findIndex((slot) => { return slot.l >= newSlot.r }) + if (slotIndex < 0) slotIndex = this.slots.length + this.slots.splice(slotIndex || 0, 0, newSlot) + this.normalize() + } + + // merge any contiguous empty slots + private normalize (): void { + for (let i = 0; i < this.slots.length - 1; i++) { + if (this.slots[i].r == this.slots[i+1].l) { + this.slots[i].r = this.slots[i+1].r + this.slots[i].w += this.slots[i+1].w + this.slots.splice(i+1, 1) + i-- + } + } + } +} + +class BlockLayout { + width: number; + height: number; + rows: Row[]; + txPositions: { [key: string]: Square } + + + constructor ({ width, height } : { width: number, height: number }) { + this.width = width + this.height = height + this.rows = [new Row(0, this.width)] + this.txPositions = {} + } + + addRow (): void { + this.rows.push(new Row(this.rows.length, this.width)) + } + + remove (tx: TxView) { + const position = this.txPositions[tx.txid] + if (position) { + for (let y = position.y; y < position.y + position.s && y < this.rows.length; y++) { + this.rows[y].remove(position.x, position.s) + } + } + delete this.txPositions[tx.txid] + } + + insert (tx: TxView, width: number): Square { + const fit = this.fit(tx, width) + + // insert the tx into rows at that position + for (let y = fit.y; y < fit.y + width; y++) { + if (y >= this.rows.length) this.addRow() + this.rows[y].insert(fit.x, width, tx) + } + const position = { x: fit.x, y: fit.y, s: width } + this.txPositions[tx.txid] = position + tx.applyGridPosition(position) + return position + } + + // Find the first slot large enough to hold a transaction of this size + fit (tx: TxView, width: number): Square { + let fit + for (let y = 0; y < this.rows.length && !fit; y++) { + fit = this.findFit(0, this.width, y, y, width) + } + // fall back to placing tx in a new row at the top of the layout + if (!fit) { + fit = { x: 0, y: this.rows.length } + } + return fit + } + + // recursively check rows to see if there's space for a tx (depth-first) + // left/right: initial column boundaries to check + // row: current row to check + // start: starting row + // size: size of space needed + findFit (left: number, right: number, row: number, start: number, size: number) : Square { + if ((row - start) >= size || row >= this.rows.length) { + return { x: left, y: start } + } + for (let i = 0; i < this.rows[row].slots.length; i++) { + const slot = this.rows[row].slots[i] + const l = Math.max(left, slot.l) + const r = Math.min(right, slot.r) + if (r - l >= size) { + const fit = this.findFit(l, r, row + 1, start, size) + if (fit) return fit + } + } + } +} diff --git a/frontend/src/app/components/mempool-block-overview/fast-vertex-array.ts b/frontend/src/app/components/mempool-block-overview/fast-vertex-array.ts new file mode 100644 index 000000000..6bd025fdd --- /dev/null +++ b/frontend/src/app/components/mempool-block-overview/fast-vertex-array.ts @@ -0,0 +1,103 @@ +/* + Utility class for access and management of low-level sprite data + + Maintains a single Float32Array of sprite data, keeping track of empty slots + to allow constant-time insertion and deletion + + Automatically resizes by copying to a new, larger Float32Array when necessary, + or compacting into a smaller Float32Array when there's space to do so. +*/ + +import TxSprite from './tx-sprite' + +export class FastVertexArray { + length: number; + count: number; + stride: number; + sprites: TxSprite[]; + data: Float32Array; + freeSlots: number[]; + lastSlot: number; + + constructor (length, stride) { + this.length = length + this.count = 0 + this.stride = stride + this.sprites = [] + this.data = new Float32Array(this.length * this.stride) + this.freeSlots = [] + this.lastSlot = 0 + } + + insert (sprite: TxSprite): number { + this.count++ + + let position + if (this.freeSlots.length) { + position = this.freeSlots.shift() + } else { + position = this.lastSlot + this.lastSlot++ + if (this.lastSlot > this.length) { + this.expand() + } + } + this.sprites[position] = sprite + return position + } + + remove (index: number): void { + this.count-- + this.clearData(index) + this.freeSlots.push(index) + this.sprites[index] = null + if (this.length > 2048 && this.count < (this.length * 0.4)) this.compact() + } + + setData (index: number, dataChunk: number[]): void { + this.data.set(dataChunk, (index * this.stride)) + } + + clearData (index: number): void { + this.data.fill(0, (index * this.stride), ((index+1) * this.stride)) + } + + getData (index: number): Float32Array { + return this.data.subarray(index, this.stride) + } + + expand (): void { + this.length *= 2 + const newData = new Float32Array(this.length * this.stride) + newData.set(this.data) + this.data = newData + } + + compact (): void { + // New array length is the smallest power of 2 larger than the sprite count (but no smaller than 512) + const newLength = Math.max(512, Math.pow(2, Math.ceil(Math.log2(this.count)))) + if (newLength != this.length) { + this.length = newLength + this.data = new Float32Array(this.length * this.stride) + let sprite + const newSprites = [] + let i = 0 + for (var index in this.sprites) { + sprite = this.sprites[index] + if (sprite) { + newSprites.push(sprite) + sprite.moveVertexPointer(i) + sprite.compile() + i++ + } + } + this.sprites = newSprites + this.freeSlots = [] + this.lastSlot = i + } + } + + getVertexData (): Float32Array { + return this.data + } +} 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 275580f97..275cc8833 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,3 +1,3 @@
-

{{ mempoolBlock.transactions.length }}

+
diff --git a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.scss b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.scss new file mode 100644 index 000000000..d14af382f --- /dev/null +++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.scss @@ -0,0 +1,15 @@ +.mempool-block-overview { + position: relative; + width: 100%; + padding-bottom: 100%; + background: #181b2d; +} + +.block-overview { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + overflow: hidden; +} 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 9f7e3dbc2..9f2b99034 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 @@ -1,25 +1,48 @@ -import { Component, Input, OnInit, OnDestroy, OnChanges, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ElementRef, ViewChild, HostListener, Input, OnInit, OnDestroy, OnChanges, ChangeDetectionStrategy, NgZone } from '@angular/core'; import { StateService } from 'src/app/services/state.service'; import { MempoolBlockWithTransactions } from 'src/app/interfaces/websocket.interface'; import { Observable, Subscription } from 'rxjs'; import { WebsocketService } from 'src/app/services/websocket.service'; +import { FastVertexArray } from './fast-vertex-array'; +import BlockScene from './block-scene'; +import TxSprite from './tx-sprite'; +import TxView from './tx-view'; @Component({ selector: 'app-mempool-block-overview', templateUrl: './mempool-block-overview.component.html', - styleUrls: [], + styleUrls: ['./mempool-block-overview.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChanges { @Input() index: number; + @ViewChild('blockCanvas') + canvas: ElementRef; + + gl: WebGLRenderingContext; + animationFrameRequest: number; + displayWidth: number; + displayHeight: number; + shaderProgram: WebGLProgram; + vertexArray: FastVertexArray; + running: boolean; + scene: BlockScene; + txViews: { [key: string]: TxView }; + lastBlockHeight: number; + blockIndex: number; + sub: Subscription; mempoolBlock$: Observable; constructor( public stateService: StateService, private websocketService: WebsocketService, - ) { } + readonly _ngZone: NgZone, + ) { + this.vertexArray = new FastVertexArray(512, TxSprite.dataSize) + this.txViews = {} + } ngOnInit(): void { this.websocketService.startTrackMempoolBlock(this.index); @@ -29,8 +52,18 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang }) } + ngAfterViewInit(): void { + this.canvas.nativeElement.addEventListener("webglcontextlost", this.handleContextLost, false) + this.canvas.nativeElement.addEventListener("webglcontextrestored", this.handleContextRestored, false) + this.gl = this.canvas.nativeElement.getContext('webgl') + this.initCanvas() + + this.resizeCanvas() + } + ngOnChanges(changes): void { if (changes.index) { + this.clearBlock(changes.index.currentValue) this.websocketService.startTrackMempoolBlock(changes.index.currentValue); } } @@ -40,7 +73,271 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang this.websocketService.stopTrackMempoolBlock(); } + clearBlock(index: number): void { + if (this.scene && index != this.blockIndex) { + const direction = (this.blockIndex == null || this.index < this.blockIndex) ? 'left' : 'right' + const removed = this.scene.exit(direction) + setTimeout(() => { + removed.forEach(tx => tx.destroy()) + }, 1000) + this.txViews = {} + this.scene = null + } + } + updateBlock(block: MempoolBlockWithTransactions): void { - + if (!this.scene) { + this.scene = new BlockScene({ width: this.displayWidth, height: this.displayHeight, resolution: 75, blockLimit: this.stateService.blockVSize }) + } + const blockMined = (this.stateService.latestBlockHeight > this.lastBlockHeight) + + const nextIds = {} + let remove = [] + let add = [] + block.transactions.forEach(tx => { + nextIds[tx.txid] = true + }) + + // List old transactions to remove + Object.keys(this.txViews).forEach(txid => { + if (!nextIds[txid]) { + remove.push(this.txViews[txid]) + delete this.txViews[txid] + } + }) + + // List new transactions to add + block.transactions.forEach(tx => { + if (!this.txViews[tx.txid]) { + const txView = new TxView(tx, this.vertexArray) + this.txViews[tx.txid] = txView + add.push(txView) + } + }) + + if (this.blockIndex != this.index) { + const direction = (this.blockIndex == null || this.index < this.blockIndex) ? 'left' : 'right' + this.scene.enter(Object.values(this.txViews), direction) + } else if (blockMined) { + this.scene.replace(Object.values(this.txViews), remove, 'right') + } else { + this.scene.replace(Object.values(this.txViews), remove, 'left') + } + + this.lastBlockHeight = this.stateService.latestBlockHeight + this.blockIndex = this.index + } + + initCanvas (): void { + this.gl.clearColor(0.0, 0.0, 0.0, 0.0) + this.gl.clear(this.gl.COLOR_BUFFER_BIT) + + const shaderSet = [ + { + type: this.gl.VERTEX_SHADER, + src: vertShaderSrc + }, + { + type: this.gl.FRAGMENT_SHADER, + src: fragShaderSrc + } + ] + + this.shaderProgram = this.buildShaderProgram(shaderSet) + + this.gl.useProgram(this.shaderProgram) + + // Set up alpha blending + this.gl.enable(this.gl.BLEND); + this.gl.blendFunc(this.gl.ONE, this.gl.ONE_MINUS_SRC_ALPHA); + + const glBuffer = this.gl.createBuffer() + this.gl.bindBuffer(this.gl.ARRAY_BUFFER, glBuffer) + + /* SET UP SHADER ATTRIBUTES */ + Object.keys(attribs).forEach((key, i) => { + attribs[key].pointer = this.gl.getAttribLocation(this.shaderProgram, key) + this.gl.enableVertexAttribArray(attribs[key].pointer); + }) + + this.start() + } + + handleContextLost(event): void { + event.preventDefault() + cancelAnimationFrame(this.animationFrameRequest) + this.animationFrameRequest = null + this.running = false + } + + handleContextRestored(event): void { + this.initCanvas() + } + + @HostListener('window:resize', ['$event']) + resizeCanvas(): void { + this.displayWidth = this.canvas.nativeElement.parentElement.clientWidth + this.displayHeight = this.canvas.nativeElement.parentElement.clientHeight + this.canvas.nativeElement.width = this.displayWidth + this.canvas.nativeElement.height = this.displayHeight + if (this.gl) this.gl.viewport(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height) + if (this.scene) this.scene.resize({ width: this.displayWidth, height: this.displayHeight }) + } + + compileShader(src, type): WebGLShader { + let shader = this.gl.createShader(type) + + this.gl.shaderSource(shader, src) + this.gl.compileShader(shader) + + if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) { + console.log(`Error compiling ${type === this.gl.VERTEX_SHADER ? "vertex" : "fragment"} shader:`) + console.log(this.gl.getShaderInfoLog(shader)) + } + return shader + } + + buildShaderProgram(shaderInfo): WebGLProgram { + let program = this.gl.createProgram() + + shaderInfo.forEach((desc) => { + let shader = this.compileShader(desc.src, desc.type) + if (shader) { + this.gl.attachShader(program, shader) + } + }) + + this.gl.linkProgram(program) + + if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) { + console.log("Error linking shader program:") + console.log(this.gl.getProgramInfoLog(program)) + } + + return program + } + + start(): void { + this.running = true + this._ngZone.runOutsideAngular(() => this.run()) + } + + run (now?: DOMHighResTimeStamp): void { + if (!now) { + now = performance.now() + } + + /* SET UP SHADER UNIFORMS */ + // screen dimensions + this.gl.uniform2f(this.gl.getUniformLocation(this.shaderProgram, 'screenSize'), this.displayWidth, this.displayHeight) + // frame timestamp + this.gl.uniform1f(this.gl.getUniformLocation(this.shaderProgram, 'now'), now) + + /* SET UP SHADER ATTRIBUTES */ + Object.keys(attribs).forEach((key, i) => { + this.gl.vertexAttribPointer(attribs[key].pointer, + attribs[key].count, // number of primitives in this attribute + this.gl[attribs[key].type], // type of primitive in this attribute (e.g. gl.FLOAT) + false, // never normalised + stride, // distance between values of the same attribute + attribs[key].offset); // offset of the first value + }) + + const pointArray = this.vertexArray.getVertexData() + + if (pointArray.length) { + this.gl.bufferData(this.gl.ARRAY_BUFFER, pointArray, this.gl.DYNAMIC_DRAW) + this.gl.drawArrays(this.gl.TRIANGLES, 0, pointArray.length / TxSprite.vertexSize) + } + + /* LOOP */ + if (this.running) { + if (this.animationFrameRequest) { + cancelAnimationFrame(this.animationFrameRequest) + this.animationFrameRequest = null + } + this.animationFrameRequest = requestAnimationFrame(() => this.run()); + } } } + +// WebGL shader attributes +const attribs = { + offset: { type: 'FLOAT', count: 2, pointer: null, offset: 0 }, + posX: { type: 'FLOAT', count: 4, pointer: null, offset: 0 }, + posY: { type: 'FLOAT', count: 4, pointer: null, offset: 0 }, + posR: { type: 'FLOAT', count: 4, pointer: null, offset: 0 }, + colR: { type: 'FLOAT', count: 4, pointer: null, offset: 0 }, + colG: { type: 'FLOAT', count: 4, pointer: null, offset: 0 }, + colB: { type: 'FLOAT', count: 4, pointer: null, offset: 0 }, + colA: { type: 'FLOAT', count: 4, pointer: null, offset: 0 } +} +// Calculate the number of bytes per vertex based on specified attributes +const stride = Object.values(attribs).reduce((total, attrib) => { + return total + (attrib.count * 4) +}, 0) +// Calculate vertex attribute offsets +for (let i = 0, offset = 0; i < Object.keys(attribs).length; i++) { + let attrib = Object.values(attribs)[i] + attrib.offset = offset + offset += (attrib.count * 4) +} + +const vertShaderSrc = ` +varying lowp vec4 vColor; + +// each attribute contains [x: startValue, y: endValue, z: startTime, w: rate] +// shader interpolates between start and end values at the given rate, from the given time + +attribute vec2 offset; +attribute vec4 posX; +attribute vec4 posY; +attribute vec4 posR; +attribute vec4 colR; +attribute vec4 colG; +attribute vec4 colB; +attribute vec4 colA; + +uniform vec2 screenSize; +uniform float now; + +float smootherstep(float x) { + x = clamp(x, 0.0, 1.0); + float ix = 1.0 - x; + x = x * x; + return x / (x + ix * ix); +} + +float interpolateAttribute(vec4 attr) { + float d = (now - attr.z) * attr.w; + float delta = smootherstep(d); + return mix(attr.x, attr.y, delta); +} + +void main() { + vec4 screenTransform = vec4(2.0 / screenSize.x, 2.0 / screenSize.y, -1.0, -1.0); + // vec4 screenTransform = vec4(1.0 / screenSize.x, 1.0 / screenSize.y, -0.5, -0.5); + + float radius = interpolateAttribute(posR); + vec2 position = vec2(interpolateAttribute(posX), interpolateAttribute(posY)) + (radius * offset); + + gl_Position = vec4(position * screenTransform.xy + screenTransform.zw, 1.0, 1.0); + + float red = interpolateAttribute(colR); + float green = interpolateAttribute(colG); + float blue = interpolateAttribute(colB); + float alpha = interpolateAttribute(colA); + + vColor = vec4(red, green, blue, alpha); +} +` + +const fragShaderSrc = ` +varying lowp vec4 vColor; + +void main() { + gl_FragColor = vColor; + // premultiply alpha + gl_FragColor.rgb *= gl_FragColor.a; +} +` diff --git a/frontend/src/app/components/mempool-block-overview/sprite-types.ts b/frontend/src/app/components/mempool-block-overview/sprite-types.ts new file mode 100644 index 000000000..149ac1bc0 --- /dev/null +++ b/frontend/src/app/components/mempool-block-overview/sprite-types.ts @@ -0,0 +1,73 @@ +export type Position = { + x: number, + y: number, +} + +export type Square = Position & { + s?: number +} + +export type Color = { + r: number, + g: number, + b: number, + a: number, +} + +export type InterpolatedAttribute = { + a: number, + b: number, + t: number, + v: number, + d: number +} + +export type Update = Position & { s: number } & Color + +export type Attributes = { + x: InterpolatedAttribute, + y: InterpolatedAttribute, + s: InterpolatedAttribute, + r: InterpolatedAttribute, + g: InterpolatedAttribute, + b: InterpolatedAttribute, + a: InterpolatedAttribute +} + +export type OptionalAttributes = { + x?: InterpolatedAttribute, + y?: InterpolatedAttribute, + s?: InterpolatedAttribute, + r?: InterpolatedAttribute, + g?: InterpolatedAttribute, + b?: InterpolatedAttribute, + a?: InterpolatedAttribute +} +export type SpriteUpdateParams = { + x?: number, + y?: number, + s?: number, + r?: number, + g?: number, + b?: number, + a?: number + start?: DOMHighResTimeStamp, + duration?: number, + minDuration?: number, + adjust?: boolean, + temp?: boolean +} + +export type ViewUpdateParams = { + display: { + position?: Square, + color?: Color, + }, + duration?: number, + minDuration?: number, + delay?: number, + start?: number, + jitter?: number, + state?: string, + adjust?: boolean +} diff --git a/frontend/src/app/components/mempool-block-overview/tx-sprite.ts b/frontend/src/app/components/mempool-block-overview/tx-sprite.ts new file mode 100644 index 000000000..3145a8ea2 --- /dev/null +++ b/frontend/src/app/components/mempool-block-overview/tx-sprite.ts @@ -0,0 +1,211 @@ +import { FastVertexArray } from './fast-vertex-array' +import { InterpolatedAttribute, Attributes, OptionalAttributes, SpriteUpdateParams, Update } from './sprite-types' + +const attribKeys = ['a', 'b', 't', 'v'] +const updateKeys = ['x', 'y', 's', 'r', 'g', 'b', 'a'] + +export default class TxSprite { + vertexArray: FastVertexArray; + vertexPointer: number; + vertexData: number[]; + updateMap: Update; + attributes: Attributes; + tempAttributes: OptionalAttributes; + + static vertexSize: number = 30; + static vertexCount: number = 6; + static dataSize: number = (30*6); + + constructor(params: SpriteUpdateParams, vertexArray: FastVertexArray) { + const offsetTime = params.start + this.vertexArray = vertexArray + this.vertexData = Array(VI.length).fill(0) + this.updateMap = { + x: 0, y: 0, s: 0, r: 0, g: 0, b: 0, a: 0 + } + + this.attributes = { + x: { a: params.x, b: params.x, t: offsetTime, v: 0, d: 0 }, + y: { a: params.y, b: params.y, t: offsetTime, v: 0, d: 0 }, + s: { a: params.s, b: params.s, t: offsetTime, v: 0, d: 0 }, + r: { a: params.r, b: params.r, t: offsetTime, v: 0, d: 0 }, + g: { a: params.g, b: params.g, t: offsetTime, v: 0, d: 0 }, + b: { a: params.b, b: params.b, t: offsetTime, v: 0, d: 0 }, + a: { a: params.a, b: params.a, t: offsetTime, v: 0, d: 0 }, + } + + // Used to temporarily modify the sprite, so that the base view can be resumed later + this.tempAttributes = null + + this.vertexPointer = this.vertexArray.insert(this) + + this.compile() + } + + private interpolateAttributes (updateMap: Update, attributes: OptionalAttributes, offsetTime: DOMHighResTimeStamp, v: number, duration: number, minDuration: number, adjust: boolean): void { + for (const key of Object.keys(updateMap)) { + // for each non-null attribute: + if (updateMap[key] != null) { + // calculate current interpolated value, and set as 'from' + interpolateAttributeStart(attributes[key], offsetTime) + // update start time + attributes[key].t = offsetTime + + if (!adjust || (duration && attributes[key].d == 0)) { + attributes[key].v = v + attributes[key].d = duration + } else if (minDuration > attributes[key].d) { + // enforce minimum transition duration + attributes[key].v = 1 / minDuration + attributes[key].d = minDuration + } + // set 'to' to target value + attributes[key].b = updateMap[key] + } + } + } + + /* + params: + x, y, s: position & size of the sprite + r, g, b, a: color & opacity + start: performance.now() timestamp, when to start the transition + duration: of the tweening animation + adjust: if true, alter the target value of any conflicting transitions without changing the duration + minDuration: minimum remaining transition duration when adjust = true + temp: if true, this update is only temporary (can be reversed with 'resume') + */ + update (params: SpriteUpdateParams): void { + const offsetTime = params.start || performance.now() + const v = params.duration > 0 ? (1 / params.duration) : 0 + + updateKeys.forEach(key => { + this.updateMap[key] = params[key] + }) + + const isModified = !!this.tempAttributes + if (!params.temp) { + this.interpolateAttributes(this.updateMap, this.attributes, offsetTime, v, params.duration, params.minDuration, params.adjust) + } else { + if (!isModified) { // set up tempAttributes + this.tempAttributes = {} + for (const key of Object.keys(this.updateMap)) { + if (this.updateMap[key] != null) { + this.tempAttributes[key] = { ...this.attributes[key] } + } + } + } + this.interpolateAttributes(this.updateMap, this.tempAttributes, offsetTime, v, params.duration, params.minDuration, params.adjust) + } + + this.compile() + } + + // Transition back from modified state back to base attributes + resume (duration: number, start : DOMHighResTimeStamp = performance.now()): void { + // If not in modified state, there's nothing to do + if (!this.tempAttributes) return + + const offsetTime = start + const v = duration > 0 ? (1 / duration) : 0 + + for (const key of Object.keys(this.tempAttributes)) { + // If this base attribute is static (fixed or post-transition), transition smoothly back + if (this.attributes[key].v == 0 || (this.attributes[key].t + this.attributes[key].d) <= start) { + // calculate current interpolated value, and set as 'from' + interpolateAttributeStart(this.tempAttributes[key], offsetTime) + this.attributes[key].a = this.tempAttributes[key].a + this.attributes[key].t = offsetTime + this.attributes[key].v = v + this.attributes[key].d = duration + } + } + + this.tempAttributes = null + + this.compile() + } + + // Write current state into the graphics vertex array for rendering + compile (): void { + let attributes = this.attributes + if (this.tempAttributes) { + attributes = { + ...this.attributes, + ...this.tempAttributes + } + } + const size = attributes.s + + // update vertex data in place + // ugly, but avoids overhead of allocating large temporary arrays + const vertexStride = VI.length + 2 + for (let vertex = 0; vertex < 6; vertex++) { + this.vertexData[vertex * vertexStride] = vertexOffsetFactors[vertex][0] + this.vertexData[(vertex * vertexStride) + 1] = vertexOffsetFactors[vertex][1] + for (let step = 0; step < VI.length; step++) { + // components of each field in the vertex array are defined by an entry in VI: + // VI[i].a is the attribute, VI[i].f is the inner field, VI[i].offA and VI[i].offB are offset factors + this.vertexData[(vertex * vertexStride) + step + 2] = attributes[VI[step].a][VI[step].f] + } + } + + this.vertexArray.setData(this.vertexPointer, this.vertexData) + } + + moveVertexPointer (index: number): void { + this.vertexPointer = index + } + + destroy (): void { + this.vertexArray.remove(this.vertexPointer) + this.vertexPointer = null + } +} + +// expects 0 <= x <= 1 +function smootherstep(x: number): number { + let ix = 1 - x; + x = x * x + return x / (x + ix * ix) +} + +function interpolateAttributeStart(attribute: InterpolatedAttribute, start: DOMHighResTimeStamp): void { + if (attribute.v == 0 || (attribute.t + attribute.d) <= start) { + // transition finished, next transition starts from current end state + // (clamp to 1) + attribute.a = attribute.b + attribute.v = 0 + attribute.d = 0 + } else if (attribute.t > start) { + // transition not started + // (clamp to 0) + } else { + // transition in progress + // (interpolate) + let progress = (start - attribute.t) + let delta = smootherstep(progress / attribute.d) + attribute.a = attribute.a + (delta * (attribute.b - attribute.a)) + attribute.d = attribute.d - progress + attribute.v = 1 / attribute.d + } +} + +const vertexOffsetFactors = [ + [0,0], + [1,1], + [1,0], + [0,0], + [1,1], + [0,1] +] + +const VI = [] +updateKeys.forEach((attribute, aIndex) => { + attribKeys.forEach(field => { + VI.push({ + a: attribute, + f: field + }) + }) +}) diff --git a/frontend/src/app/components/mempool-block-overview/tx-view.ts b/frontend/src/app/components/mempool-block-overview/tx-view.ts new file mode 100644 index 000000000..554d29055 --- /dev/null +++ b/frontend/src/app/components/mempool-block-overview/tx-view.ts @@ -0,0 +1,143 @@ +import TxSprite from './tx-sprite' +import { FastVertexArray } from './fast-vertex-array' +import { TransactionStripped } from 'src/app/interfaces/websocket.interface'; +import { SpriteUpdateParams, Square, Color, ViewUpdateParams } from './sprite-types' +import { feeLevels, mempoolFeeColors } from 'src/app/app.constants'; + +const hoverTransitionTime = 300 +const defaultHoverColor = hexToColor('1bd8f4') + +// convert from this class's update format to TxSprite's update format +function toSpriteUpdate({display, duration, delay, start, adjust} : ViewUpdateParams): SpriteUpdateParams { + return { + start: (start || performance.now()) + (delay || 0), + duration: duration, + ...display.position, + ...display.color, + adjust + } +} + +export default class TxView implements TransactionStripped { + txid: string; + fee: number; + vsize: number; + value: number; + feerate: number; + + initialised: boolean; + vertexArray: FastVertexArray; + hover: boolean; + sprite: TxSprite; + hoverColor: Color | void; + + screenPosition: Square; + gridPosition : Square | void; + + dirty: boolean; + + constructor (tx: TransactionStripped, vertexArray: FastVertexArray) { + this.txid = tx.txid + this.fee = tx.fee + this.vsize = tx.vsize + this.value = tx.value + this.feerate = tx.fee / tx.vsize + this.initialised = false + this.vertexArray = vertexArray + + this.hover = false + + this.screenPosition = { x: 0, y: 0, s: 0 } + + this.dirty = true + } + + destroy (): void { + if (this.sprite) { + this.sprite.destroy() + this.sprite = null + this.initialised = false + } + } + + applyGridPosition (position: Square): void { + if (!this.gridPosition) this.gridPosition = { x: 0, y: 0, s: 0 } + if (this.gridPosition.x != position.x || this.gridPosition.y != position.y || this.gridPosition.s != position.s) { + this.gridPosition.x = position.x + this.gridPosition.y = position.y + this.gridPosition.s = position.s + this.dirty = true + } + } + + /* + display: defines the final appearance of the sprite + position: { x, y, s } (coordinates & size) + color: { r, g, b, a} (color channels & alpha) + duration: of the tweening animation from the previous display state + start: performance.now() timestamp, when to start the transition + delay: additional milliseconds to wait before starting + jitter: if set, adds a random amount to the delay, + adjust: if true, modify an in-progress transition instead of replacing it + */ + update ({ display, duration, delay, jitter, start, adjust }: ViewUpdateParams): void { + if (jitter) delay += (Math.random() * jitter) + + if (!this.initialised || !this.sprite) { + this.initialised = true + this.sprite = new TxSprite( + toSpriteUpdate({display, duration, delay, start}), + this.vertexArray + ) + // apply any pending hover event + if (this.hover) { + this.sprite.update({ + ...this.hoverColor, + duration: hoverTransitionTime, + adjust: false, + temp: true + }) + } + } else { + this.sprite.update( + toSpriteUpdate({display, duration, delay, start, adjust}) + ) + } + this.dirty = false + } + + // Temporarily override the tx color + setHover (hoverOn: boolean, color: Color | void = defaultHoverColor): void { + if (hoverOn) { + this.hover = true + this.hoverColor = color + + this.sprite.update({ + ...this.hoverColor, + duration: hoverTransitionTime, + adjust: false, + temp: true + }) + } else { + this.hover = false + this.hoverColor = null + if (this.sprite) this.sprite.resume(hoverTransitionTime) + } + this.dirty = false + } + + getColor (): Color { + let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => (this.feerate || 1) >= feeLvl); + feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex; + return hexToColor(mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]) + } +} + +function hexToColor (hex: string): Color { + return { + r: parseInt(hex.slice(0,2), 16) / 255, + g: parseInt(hex.slice(2,4), 16) / 255, + b: parseInt(hex.slice(4,6), 16) / 255, + a: 1 + } +}