The Visualization

This was a quick weekend project that I worked on with my roommate @reem. The goal was to take blocks from the Coda Daemon's GraphQL Endpoint and display them as a force-directed graph.

It is utilizing the React-Vis-Force library from Uber.

Next Steps / Lessons Learned

This is a super rough MVP to prove to myself that I could write a block explorer/visualization. Here's some stuff I learned if I were to try and do this for real:

React-Vis-Force doesn't allow you to dynamically add and remove nodes in the graph without reloading the whole thing. To accomplish this, I'd have to fork their library or craft my own D3-based react components.
The blocks query in the Coda Daemon's GraphQL endponint doesn't actually support pagination at the time of writing, so loading the page gets slow as nBlocks increases. Though, even if it did support pagination, you'd still have to load all the blocks first due to #1.
When there's a lot of nodes on the graph, it takes a really long time to work all the crossings out. I wished there was a way I could have laid out the nodes from left-right/top-bottom by their timestamp at render time.
The Archive node's endpoint is dangerous in that there is no authentication, so anyone with access could change the Daemon's internal state. As such, this only works when running a Daemon on the same machine as the visualization. I would love to build out a GraphQL Proxy of some kind in order to mitigate this risk.
I did implement basic "block explorer" functionality, in that if you select a node a div appears with the json data from the block. I would have liked to spend more time displaying this data on the graph itself, via colors or otherwise.
I would love to mess with different colorings on the graph way more than I did here. This visualization can be super useful for visually debugging the blockchain by coloring the blocks based on number of transactions, snark jobs, fee transfers, etc.

Examples of Different Coloring:

Red -> Main Chain / Blue -> Leaf Nodes: colored-by-leaves

Black -> No Txs / Redder -> More Txs colored-by-transactions

The Query

The application uses one query from the Daemon:

{
    blocks{
    nodes {
        creator
        stateHash
        protocolState {
        previousStateHash
        blockchainState{
            date
            snarkedLedgerHash
            stagedLedgerHash
        }
        }
        transactions {
        userCommands{
            id
            isDelegation
            nonce
            from
            to
            amount
            fee
            memo
        }
        feeTransfer {
            recipient
            fee
        }
        coinbase
        }
        snarkJobs {
        prover
        fee
        workIds
        }
    }
    pageInfo {
        hasNextPage
        hasPreviousPage
        firstCursor
        lastCursor
    }
    }
}