Interactive Zcash and Crosslink block visualizer in Zebra

Context

As part of the the Shielded Labs work on Crosslink, we realised we’d need some visibility into the connections between the PoW and PoS chains.
These connections can be moderately complicated, with links going in both directions, and can involve explicit references to blocks in side-chains that function as implicit references to blocks in the best chain a few blocks back.
In the general case there is a tree of blocks for each chain and “cross links”.

From our exploratory work, it was clear that text dumps to a console would be insufficient for getting a clear picture of the inter-connections, and we decided that a GUI visualizer could be a good way to go. As well as giving us a view into the current state of 2 running chains, this could let us generate edge cases to test, and provide a clear model of the state of failing tests. It also might be something that’s just a bit of fun for other people in the Zcash ecosystem to play with!

For Milestone 2 in the Crosslink roadmap, we’re releasing a build using a BFT with a “Proof-of-Authority” roster for testers to try at home. This should be an opportunity to get hands-on with a partial Crosslink prototype and visualize what’s going on in your own node.
(If this is something you’re interested in, please mention it to anyone in the Shielded Labs team and I’m sure we can include you in the process.)

Visual Design

The GUI visualiser is intended to resemble an interactive version of a whiteboard diagram: node & edge chains/trees with links between them.

The nodes are positioned with a “Force-Directed Layout” algorithm, i.e. by applying attraction & repulsion forces between each other based on multiple criteria, then moving as the resultant force dictates each frame.

Nodes can be selected to show block details in a popup, but the most important attributes are presented so that they can be interpreted visually (without text). Currently:

  • Work (on PoW chain) is represented by vertical distance between parent & child (not direct distance, as that would make it harder to compare the amount of work done on side chains vs the best chain).
  • Number of transactions is represented by node area.
  • Finality is represented by whether the node circle is filled or an outline.

How this fits in with existing code
The code for this lives in the Shielded Labs fork of zebra.
Currently the GUI can run in two modes:

  • on its own thread within zebra, staying up-to-date with live information communicated by our TFL service.
  • as a separate binary, ingesting a (WIP!) serialization of the two chains to explore (e.g. output by a test).

Video examples
You can see work-in-progress versions of the visualizer in videos we presented at recent Arborist calls:

If there is anything on the Zcash chain or network that you would like to see represented visually, please let me know! I’m not promising to implement anything, but it’s helpful to know what people want as (1) it can steer early code design decisions to make it easier to add these features later, and (2) some things can be added trivially but are only worthwhile if someone actually wants them!

14 Likes

love love love the visualization! moar :smiley:

3 Likes