From 4334fc832bc6021dbdeab5caf65642d5a895f1bf Mon Sep 17 00:00:00 2001 From: Sigve Kvalsvik Date: Thu, 1 Mar 2018 23:55:08 +0100 Subject: [PATCH 1/2] Remove old highcharts from package json --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 4bf531871b..89b7f862ee 100644 --- a/package.json +++ b/package.json @@ -129,7 +129,6 @@ "file-saver": "^1.3.3", "foundation-apps": "git+https://github.com/zurb/foundation-apps.git", "fractional": "^1.0.0", - "highcharts": "4.2.6", "immutable": "^3.8.1", "indexeddbshim": "^2.2.1", "intl": "^1.1.0", From 4c9ddbe7cc49c29be50308f7b9a4c1f8d537a1f4 Mon Sep 17 00:00:00 2001 From: Sigve Kvalsvik Date: Fri, 2 Mar 2018 12:13:17 +0100 Subject: [PATCH 2/2] Improve explorer block fetching, reduce ops displayed --- app/components/Blockchain/Operation.jsx | 5 +- app/components/Explorer/Blocks.jsx | 436 +++++++++++++++++------- app/components/Utility/BlockDate.jsx | 25 +- app/stores/BlockchainStore.js | 22 +- 4 files changed, 341 insertions(+), 147 deletions(-) diff --git a/app/components/Blockchain/Operation.jsx b/app/components/Blockchain/Operation.jsx index ccdd28a4b1..4c1af708eb 100644 --- a/app/components/Blockchain/Operation.jsx +++ b/app/components/Blockchain/Operation.jsx @@ -77,13 +77,13 @@ class Row extends React.Component { } render() { - let {block, fee, color, type, hideOpLabel} = this.props; + let {block, fee, color, type, hideOpLabel, hidePending} = this.props; let last_irreversible_block_num = this.props.dynGlobalObject.get( "last_irreversible_block_num" ); let pending = null; - if (block > last_irreversible_block_num) { + if (!hidePending && block > last_irreversible_block_num) { pending = ( ( ) : null; diff --git a/app/components/Explorer/Blocks.jsx b/app/components/Explorer/Blocks.jsx index d720afd5c4..ea129e7c42 100644 --- a/app/components/Explorer/Blocks.jsx +++ b/app/components/Explorer/Blocks.jsx @@ -20,7 +20,6 @@ import TransitionWrapper from "../Utility/TransitionWrapper"; require("../Blockchain/json-inspector.scss"); class BlockTimeAgo extends React.Component { - shouldComponentUpdate(nextProps) { return nextProps.blockTime !== this.props.blockTime; } @@ -29,24 +28,25 @@ class BlockTimeAgo extends React.Component { let {blockTime} = this.props; // let timePassed = Date.now() - blockTime; - let timePassed = (new Date()).getTime() - (new Date(blockTime)).getTime(); - - let textClass = classNames("txtlabel", - {"success": timePassed <= 6000}, - {"info": timePassed > 6000 && timePassed <= 15000}, - {"warning": timePassed > 15000 && timePassed <= 25000}, - {"error": timePassed > 25000} - ); - - return ( - blockTime ?

: null + let timePassed = new Date().getTime() - new Date(blockTime).getTime(); + + let textClass = classNames( + "txtlabel", + {success: timePassed <= 6000}, + {info: timePassed > 6000 && timePassed <= 15000}, + {warning: timePassed > 15000 && timePassed <= 25000}, + {error: timePassed > 25000} ); + return blockTime ? ( +

+ +

+ ) : null; } } class Blocks extends React.Component { - static propTypes = { globalObject: ChainTypes.ChainObject.isRequired, dynGlobalObject: ChainTypes.ChainObject.isRequired, @@ -83,7 +83,10 @@ class Blocks extends React.Component { } componentWillMount() { - window.addEventListener("resize", this._updateHeight, {capture: false, passive: true}); + window.addEventListener("resize", this._updateHeight, { + capture: false, + passive: true + }); } componentWillUnmount() { @@ -91,7 +94,6 @@ class Blocks extends React.Component { } componentWillReceiveProps(nextProps) { - if (nextProps.latestBlocks.size === 0) { return this._getInitialBlocks(); } else if (!this.state.animateEnter) { @@ -101,7 +103,11 @@ class Blocks extends React.Component { } let maxBlock = nextProps.dynGlobalObject.get("head_block_number"); - if (nextProps.latestBlocks.size >= 20 && nextProps.dynGlobalObject.get("head_block_number") !== nextProps.latestBlocks.get(0).id) { + if ( + nextProps.latestBlocks.size >= 20 && + nextProps.dynGlobalObject.get("head_block_number") !== + nextProps.latestBlocks.get(0).id + ) { return this._getBlock(maxBlock, maxBlock); } } @@ -127,13 +133,19 @@ class Blocks extends React.Component { } _getInitialBlocks() { - let maxBlock = parseInt(this.props.dynGlobalObject.get("head_block_number"), 10); + let maxBlock = parseInt( + this.props.dynGlobalObject.get("head_block_number"), + 10 + ); if (maxBlock) { for (let i = 19; i >= 0; i--) { let exists = false; if (this.props.latestBlocks.size > 0) { for (let j = 0; j < this.props.latestBlocks.size; j++) { - if (this.props.latestBlocks.get(j).id === maxBlock - i) { + if ( + this.props.latestBlocks.get(j).id === + maxBlock - i + ) { exists = true; break; } @@ -151,10 +163,13 @@ class Blocks extends React.Component { let operationsTextHeight = this.refs.operationsText.offsetHeight; let blocksTextHeight = this.refs.blocksText.offsetHeight; - this.setState({ - operationsHeight: containerHeight - operationsTextHeight, - blocksHeight: containerHeight - blocksTextHeight - }, this.psUpdate); + this.setState( + { + operationsHeight: containerHeight - operationsTextHeight, + blocksHeight: containerHeight - blocksTextHeight + }, + this.psUpdate + ); } psUpdate() { @@ -165,78 +180,118 @@ class Blocks extends React.Component { } render() { - - let {latestBlocks, latestTransactions, globalObject, dynGlobalObject, coreAsset} = this.props; + let { + latestBlocks, + latestTransactions, + globalObject, + dynGlobalObject, + coreAsset + } = this.props; let {blocksHeight, operationsHeight} = this.state; - let blocks = null, transactions = null; + let blocks = null, + transactions = null; let headBlock = null; - let trxCount = 0, blockCount = latestBlocks.size, trxPerSec = 0, blockTimes = [], avgTime = 0; + let trxCount = 0, + blockCount = latestBlocks.size, + trxPerSec = 0, + blockTimes = [], + avgTime = 0; if (latestBlocks && latestBlocks.size >= 20) { - let previousTime; let lastBlock, firstBlock; // Map out the block times for the latest blocks and count the number of transactions - latestBlocks.filter((a, index) => { - // Only use consecutive blocks counting back from head block - return a.id === (dynGlobalObject.get("head_block_number") - index); - }).sort((a, b) => { - return a.id - b.id; - }).forEach((block, index) => { - trxCount += block.transactions.length; - if (index > 0) { - blockTimes.push([block.id, (block.timestamp - previousTime) / 1000]); - lastBlock = block.timestamp; - } else { - firstBlock = block.timestamp; - } - previousTime = block.timestamp; - }); + latestBlocks + .filter((a, index) => { + // Only use consecutive blocks counting back from head block + return ( + a.id === + dynGlobalObject.get("head_block_number") - index + ); + }) + .sort((a, b) => { + return a.id - b.id; + }) + .forEach((block, index) => { + trxCount += block.transactions.length; + if (index > 0) { + blockTimes.push([ + block.id, + (block.timestamp - previousTime) / 1000 + ]); + lastBlock = block.timestamp; + } else { + firstBlock = block.timestamp; + } + previousTime = block.timestamp; + }); // Output block rows for the last 20 blocks blocks = latestBlocks - .sort((a, b) => { - return b.id - a.id; - }) - .take(20) - .map((block) => { - return ( + .sort((a, b) => { + return b.id - a.id; + }) + .take(20) + .map(block => { + return ( - #{utils.format_number(block.id, 0)} - - - {utils.format_number(block.transactions.length, 0)} + + + #{utils.format_number(block.id, 0)} + + + + + + + + + + {utils.format_number( + block.transactions.length, + 0 + )} + ); - }).toArray(); + }) + .toArray(); let trxIndex = 0; - transactions = latestTransactions.take(20) - .map((trx) => { - - let opIndex = 0; - return trx.operations.map(op => { - return ( - - ); - }); - - }).toArray(); + transactions = latestTransactions + .sort((a, b) => { + return b.block_num - a.block_num; + }) + .take(20) + .map(trx => { + let opIndex = 0; + return trx.operations + .map(op => { + if (trxIndex > 15) return null; + return ( + + ); + }) + .filter(a => !!a); + }) + .toArray(); headBlock = latestBlocks.first().timestamp; avgTime = blockTimes.reduce((previous, current, idx, array) => { @@ -248,43 +303,69 @@ class Blocks extends React.Component { return (
- {/* First row of stats */}
- -

#{utils.format_number(dynGlobalObject.get("head_block_number"), 0)}

+ + + +

+ #{utils.format_number( + dynGlobalObject.get("head_block_number"), + 0 + )} +

- - - + + + +
- - + + +

{utils.format_number(trxPerSec, 2)}

- - + + +

{utils.format_number(avgTime / 2, 2)}s

- { /* Second row of stats */ } -
+ {/* Second row of stats */} +
- + + +

{globalObject.get("active_witnesses").size}

@@ -293,37 +374,71 @@ class Blocks extends React.Component {
- + + +

- {globalObject.get("active_committee_members").size} + { + globalObject.get("active_committee_members") + .size + }

- -

{utils.format_number(trxCount / blockCount || 0, 2)}

+ + + +

+ {utils.format_number( + trxCount / blockCount || 0, + 2 + )} +

- -

+ + + +

{dynGlobalObject.get("recently_missed_count")}

- { /* Third row: graphs */ } + {/* Third row: graphs */}
- + + +

@@ -332,35 +447,64 @@ class Blocks extends React.Component {

-
- +
+
+
+
-
- +
+ +
+
- + + +

-
- { /* Fourth row: transactions and blocks */ } -
- -
+ {/* Fourth row: transactions and blocks */} +
+
@@ -369,36 +513,75 @@ class Blocks extends React.Component { - +
+ +
-
+
- - {transactions} - + {transactions}
-
+
-
-
- -
+
+
+
-
- +
+
- - - - + + + + @@ -418,4 +601,7 @@ class Blocks extends React.Component { } } -export default BindToChainState(Blocks, {keep_updating: true, show_loader: true}); +export default BindToChainState(Blocks, { + keep_updating: true, + show_loader: true +}); diff --git a/app/components/Utility/BlockDate.jsx b/app/components/Utility/BlockDate.jsx index d3399a6403..5d1ab2fc1e 100644 --- a/app/components/Utility/BlockDate.jsx +++ b/app/components/Utility/BlockDate.jsx @@ -14,31 +14,40 @@ import getLocale from "browser-locale"; **/ class BlockDate extends React.Component { - static defaultProps = { - format: getLocale().toLowerCase().indexOf("en-us") !== -1 ? "market_history_us": "market_history", + format: + getLocale() + .toLowerCase() + .indexOf("en-us") !== -1 + ? "market_history_us" + : "market_history", tooltip: false, component: "span" - } + }; componentWillMount() { - BlockchainActions.getBlock.defer(this.props.block_number); + if (!this.props.block) + BlockchainActions.getBlock(this.props.block_number); } shouldComponentUpdate(np) { - if (np.block && !this.props.block) setTimeout(ReactTooltip.rebuild, 1000); + if (np.block && !this.props.block) + setTimeout(ReactTooltip.rebuild, 1000); return np.block !== this.props.block; } render() { const {block, tooltip, component, format} = this.props; if (!block) return React.createElement(component); - return ( - React.createElement(component, {className: tooltip ? "tooltip": "", "data-tip": tooltip ? block.timestamp : ""}, + return React.createElement( + component, + { + className: tooltip ? "tooltip" : "", + "data-tip": tooltip ? block.timestamp : "" + }, {counterpart.localize(block.timestamp, {type: "date", format})} - ) ); } } diff --git a/app/stores/BlockchainStore.js b/app/stores/BlockchainStore.js index d5428adec8..0916ad6953 100644 --- a/app/stores/BlockchainStore.js +++ b/app/stores/BlockchainStore.js @@ -2,7 +2,7 @@ import Immutable from "immutable"; import alt from "alt-instance"; import BlockchainActions from "actions/BlockchainActions"; import {ChainStore} from "bitsharesjs/es"; -import {Block} from "./tcomb_structs"; +// import {Block} from "./tcomb_structs"; class BlockchainStore { constructor() { @@ -16,10 +16,11 @@ class BlockchainStore { this.bindListeners({ onGetBlock: BlockchainActions.getBlock, onGetLatest: BlockchainActions.getLatest, - onUpdateRpcConnectionStatus: BlockchainActions.updateRpcConnectionStatus + onUpdateRpcConnectionStatus: + BlockchainActions.updateRpcConnectionStatus }); - this.maxBlocks = 100; + this.maxBlocks = 30; } onGetBlock(block) { @@ -28,10 +29,7 @@ class BlockchainStore { block.timestamp += "Z"; } block.timestamp = new Date(block.timestamp); - this.blocks = this.blocks.set( - block.id, - Block(block) - ); + this.blocks = this.blocks.set(block.id, block); } } @@ -43,17 +41,19 @@ class BlockchainStore { } } block.timestamp = new Date(block.timestamp); + this.blocks = this.blocks.set(block.id, block); if (block.id > maxBlock - this.maxBlocks) { - this.latestBlocks = this.latestBlocks.unshift(Block(block)); + this.latestBlocks = this.latestBlocks.unshift(block); if (this.latestBlocks.size > this.maxBlocks) { this.latestBlocks = this.latestBlocks.pop(); } - if (block.transactions.length > 0) { block.transactions.forEach(trx => { trx.block_num = block.id; - this.latestTransactions = this.latestTransactions.unshift(trx); + this.latestTransactions = this.latestTransactions.unshift( + trx + ); }); } @@ -61,7 +61,6 @@ class BlockchainStore { this.latestTransactions = this.latestTransactions.pop(); } } - } onUpdateRpcConnectionStatus(status) { @@ -73,7 +72,6 @@ class BlockchainStore { if (this.no_ws_connection && status === "open") this.no_ws_connection = false; } - } export default alt.createStore(BlockchainStore, "BlockchainStore");
+ + + + + + + +