Adding fork visualizer UI

kevcoxe commented 6 months ago

This PR adds a browser-based user interface that nicely displays the complete block tree even in the presence of contentious network forks. It also adds a docker file for the interface, a docker-compose file to start a multi-node network and the visualizer, and (hopefully) a CI job to publish the docker image.

Main Features:

Subscribe to Multiple nodes
Visualize all forks that any nodes are aware of
Show which PoW seal type was used to mine each block
Show which miner authored each block

Tech Stack: The main blockchain diagram is based on the javascript libraries react-flow and dagre. Specifically, it is based on this example which would probably be the best place to dive into the libraries' docs: https://reactflow.dev/examples/layout/dagre

JoshOrndorff commented 6 months ago

This is coming along nicely. A couple feature requests:

Text field to specify the node endpoint in the UI (instead of changing the app code). I will connect to a node in the cloud in class.
Start the app immediately on page load, and don't require clicking the "watch chain" button
Connect to 3ish nodes go understand multiple perspectives of the chain.
Annotate the chain with some kind of labels (possibly just other d3 graph objects? that will not be permanent) showing which block each node thinks is the best block.
The arrows point the wrong way. They should point from child back to parent.
When I kill the blockchain node and then bring it back up without killing the UI, the UI should gracefully re-connect and keep drawing on the same graph that already exists. For example, if I start a new chain with the same genesis block, it should show two forks from one genesis block, but instead it draws the genesis block again even though it is the same block.

Again, looking good. I'm excited to see this app coming alive.

JoshOrndorff commented 6 months ago

@kevcoxe Thank you for your work on this so far. Please meet my friend and colleague @wirednkod who is familiar with polkadot js and has agreed to give this visualizer a review.

As I mentioned, I think this tool is already awesome, and good enough to use in Hong Kong. I also think there are a few little features we mentioned and little ways to make it nicer, so I'll write out a list of things to look for during review and my wishlist of little extra features here as well.

Node List

When I type an endpoint, the enter key should work (not only clicking add).
When I subscribe to a node, the button should change to say unsubscribe rather than watching for a fixed number of blocks.
Show which block hash each node currently considers best. (Better yet, visualize this. see below.)
There could also be a button to remove an endpoint from the list, but this is not at all necessary.

Visualization

Blocks not so wide to save screen real estate. The block hash can be abbreviated to 6 or 8 characters. The diagram will always be quite wide anyway, making blocks narrower will help, perhaps also the links between them shorter.
Use identicons to display the block author rather than the raw public key. Polkadot JS has a library for this: https://polkadot.js.org/docs/ui-identicon This will also help making them narrower.
Annotate the graph with a marker for each node so that we can see which block each node thinks is best. The blockchain itself only grows, but these node markers will move along the chain as the nodes learn of new blocks. This is a nicer (but probably harder) alternative to showing the best block in the node list (see above)
Show elapsed time since previous block. Maybe in the block itself, or maybe in the line that links the blocks. This will help us understand how the difficulty adjustment algorithm is working.

Misc

Linting or other standard javascript ci stuff?
Sync backward for several blocks? - Depending on the order that everything gets started up, the UI might not see the first few blocks come in. When subscribing to a new node, maybe we could ask for its best block, and if we don't have it already in the visualization, then we query the parent until either: We hit a block we know, or we hit some maximum limit.

kevcoxe commented 6 months ago

@kevcoxe Thank you for your work on this so far. Please meet my friend and colleague @wirednkod who is familiar with polkadot js and has agreed to give this visualizer a review.

As I mentioned, I think this tool is already awesome, and good enough to use in Hong Kong. I also think there are a few little features we mentioned and little ways to make it nicer, so I'll write out a list of things to look for during review and my wishlist of little extra features here as well.

Node List

* When I type an endpoint, the enter key should work (not only clicking add).

* When I subscribe to a node, the button should change to say unsubscribe rather than watching for a fixed number of blocks.

* Show which block hash each node currently considers best. (Better yet, visualize this. see below.)

* There could also be a button to remove an endpoint from the list, but this is not at all necessary.

Visualization

* Blocks not so wide to save screen real estate. The block hash can be abbreviated to 6 or 8 characters. The diagram will always be quite wide anyway, making blocks narrower will help, perhaps also the links between them shorter.

* Use identicons to display the block author rather than the raw public key. Polkadot JS has a library for this: https://polkadot.js.org/docs/ui-identicon This will also help making them narrower.

* Annotate the graph with a marker for each node so that we can see which block each node thinks is best. The blockchain itself only grows, but these node markers will move along the chain as the nodes learn of new blocks. This is a nicer (but probably harder) alternative to showing the best block in the node list (see above)

* Show elapsed time since previous block. Maybe in the block itself, or maybe in the line that links the blocks. This will help us understand how the difficulty adjustment algorithm is working.

Misc

* Linting or other standard javascript ci stuff?

* Sync backward for several blocks? - Depending on the order that everything gets started up, the UI might not see the first few blocks come in. When subscribing to a new node, maybe we could ask for its best block, and if we don't have it already in the visualization, then we query the parent until either: We hit a block we know, or we hit some maximum limit.

Thanks @JoshOrndorff I have pushed a few commits to address the items in your "Node List", I hope to work on the other items in the next day or so.

@wirednkod I am excited to work with you and I am able to explain questions you have. I will admit I have not fully finished "cleaning" my code as I wanted too. There are a few things like variable names and stuff like that that should be cleaned up to make sense as well.

wirednkod commented 6 months ago

@wirednkod I am excited to work with you and I am able to explain questions you have. I will admit I have not fully finished "cleaning" my code as I wanted too. There are a few things like variable names and stuff like that that should be cleaned up to make sense as well.

Thank you @kevcoxe . No worries about cleaning code etc. Can you please provide a list of steps that will help me have this UI up and running? I want to be sure that Im following the exact way you are running it prior to add/edit any code.

kevcoxe commented 6 months ago

@JoshOrndorff and @wirednkod I am experiencing a strange bug, which could just be me, but the background color is not setting or being used even tho I can clearly see that it is there and is correct. If I change the code itself to be the value it is passing in the ui works and then will continue to work once I change it back. This makes me believe its something to do with me or caching. But please let me know if you see this bug.

kevcoxe commented 6 months ago

@JoshOrndorff and @wirednkod I am experiencing a strange bug, which could just be me, but the background color is not setting or being used even tho I can clearly see that it is there and is correct. If I change the code itself to be the value it is passing in the ui works and then will continue to work once I change it back. This makes me believe its something to do with me or caching. But please let me know if you see this bug.

I have fixed this issue

Polkadot-Blockchain-Academy / Academy-PoW