kaspa-live / kaspa-graph-inspector

Kaspa Graph Inspector - Displaying the Kaspa Network Block DAG in real time

kaspa-graph-inspector

KGI is comprised of four components:

• A postgres database
• A processing kaspa node (this is simply a kaspad wrapped in some extra logic)
• An api REST server
• A web server

How the components interact:

• The processing node connects to the Kaspa network the same way a regular kaspad node does and starts syncing just as a kaspad node would
• While it's syncing, it writes metadata about every block to the postgres database
• From the other end, the web server listens to http requests on some port
• When a user navigates their browser to that port, the web server serves the KGI clientside logic, which includes the UI
• The clientside logic calls the api REST server every so often
• The api REST server queries the postgres database and returns it to the clientside
• The clientside uses the response it received from the api REST server to update the UI

Development

For development, it's recommended to run KGI from within Docker

1. Make sure you have docker installed by running docker --version
2. Make sure you have docker-compose installed by running docker-compose --version
3. Define the following environment variables:
   1. POSTGRES_USER=username
   2. POSTGRES_PASSWORD=password
   3. POSTGRES_DB=database-name
   4. API_ADDRESS=localhost
   5. KATNIP_ADDRESS=localhost
   6. API_PORT=4575
   7. WEB_PORT=8080
   8. KASPAD_VERSION=4a560f25a60e876b58d2643ca6eb7e07525e76cc (this can be either a specific kaspda commit hash or a kaspad tag)
   9. KASPA_LIVE_ADDRESS=localhost
4. Run: ./docker-run.sh

Deployment

1. Deploy a postgres database instance in any way you desire. Note the address, port, username, password, and database name, since these will be required later
2. Build processing
   1. Make sure the go build environment is set up by running go version
   2. Within the processing directory, edit go.mod:
      1. Delete the line that starts with replace github.com/kaspanet/kaspad
      2. Set your desired kaspad version in the line under require that starts with github.com/kaspanet/kaspad
   3. Within the processing directory, run go build -o kgi-processing .. This will produce an executable file named kgi-processing
   4. Copy kgi-processing and database directory (also within the processing directory) to wherever you wish to run the node from
3. Build api
   1. Make sure the nodejs build environment is set up by running npm version
   2. Within the api directory, run: npm install
   3. Copy the entire api directory to wherever you wish to run the api server from
4. Build web
   1. Make sure the nodejs build environment is set up by running npm version
   2. Within the web directory, run: npm install
   3. Set the following environment variables:
      1. REACT_APP_API_ADDRESS=example.com:1234 (this is the public address of where your api server will be)
      2. REACT_APP_EXPLORER_ADDRESS=explorer.kaspa.org
      3. REACT_APP_KASPA_LIVE_ADDRESS=kaspa.live
   4. Within the web directory, run: npm run build
   5. Copy the entire web directory to wherever you wish to run the web server from
5. Run processing
   1. Navigate to wherever you copied kgi-processing and database to
   2. Set the following environment variables:
      1. POSTGRES_USER=username
      2. POSTGRES_PASSWORD=password
      3. POSTGRES_DB=database-name
      4. POSTGRES_HOST=database.example.com
      5. POSTGRES_PORT=5432
   3. Run: kgi-processing --connection-string=postgres://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DB}?sslmode=disable
6. Run api
   1. Navigate to wherever you copied api to
   2. Run: npm run start
7. Run web
   1. Navigate to wherever you copied web to
   2. Run: npm install -g serve
   3. Set the WEB_PORT environment variable to the port you wish to serve the KGI UI from
   4. Run: serve --listen=${WEB_PORT}

kaspa-graph-inspector's Issues

Add Fields: Transactions Count, Accepted Transactions Count

Add Navigate Graph By Given DAA Score Feature

Add a Kaspa logo

Graph freezes forever if there's an internet problem

This is because there's essentially zero error handling.

Proposed solution:

• Catch and count subsequent errors
• If the error count is greater than some N, indicate that there's a problem somewhere on screen
• Clicking the indication should hard-refresh the page

Add a switch to turn on a "compressed" visualization of blocks for the case of too many parallel ones

There are times when we have much more blocks in parallel than it is possible to fit onto screen vertically. Can you maybe add a switch there that will turn on "compressed" visualization of such blocks? So they would be either overlaying partially, or maybe have the not a square view, but a rectangular one. So that all of these many vertical blocks fit onto screen at once.

Add arrow heads to edges

Add an indicator that KGI is in IBD

Add the "search back for the nearest group of not less than/exactly N parallel blocks"

"And tell me how far back it is from the current one of the kind" Could be a nice instrument for "manually" investigating the DAG statistics and proving its params for being optimal or not :)

P.S. Also the same "how far from the current one of the kind" could be added to the red blocks search instrument as well. Probably just a momentarily floating hint.

P.P.S. Also then it's better to have both "search back" and "search ahead" options for both functionalities :) since I could be anywhere in the graph at a given time.

Add the "search back for the next red block" feature

Sometimes I'd like to illustrate what's the red block to people, and since it's a rara avis I have to scroll back the KGI for many minutes to find one. Would be cool to have the way to simply click the "take me to the next red block in the past from where I am now" option

Edges with blocks outside the screen range are not shown

The bug is as follows:

• There's an edge between a block at height 200 and a block at height 100
• The screen may contain up to 50 heights
• The target height is 150, meaning that only blocks in heights 125 to 175 are shown
• The edge is not shown

Requesting specific hashes results in a blank page

Example: http://kgi-testnet-3.daglabs-dev.com/?hash=ecc8bd82b1fbc5e63f270d081a790a7a5b1adbecaf9d458ef6c3689820682186

Proof that this is a real block: http://testnet-3.katnip.sh/#/block/ecc8bd82b1fbc5e63f270d081a790a7a5b1adbecaf9d458ef6c3689820682186

Align the free space to the right of the tip of the DAG

There's too much free space to the right of the tip of the DAG in some modes of the browser window: this is what it looks like on a FullHD monitor when the Firefox browser is in the fullscreen mode

and this is how it looks when the browser is not maximized:

Too much free space to the right in the first case.

Add Topological Ordering View

Collapsing the Dag to the consensus topological ordering, or even allowing for a dual view, could be very useful for both analysis and educational purposes.

Investigate mempool limits

Mempool should be limited to 1mil transactions, which translates to about 300 megabytes.
However, we saw a node in which (seemingly) mempool transactions took up to 2.3 gigs.

Write a stability-test that:

1. Fills the mempool up to the limit
2. Keeps adding more transactions, making sure eviction works
3. Starts mining blocks to make sure this cleans the mempool eventually.

KGI stuck after some time

After leaving kaspa.live open for some time, I've noticed that no more blocks are being added.

In the console there was a single error message:

Uncaught (in promise) TypeError: e.mergeSetRedIds is null
    M Block.ts:19
    V BlocksAndEdgesAndHeightGroups.ts:24
    setBlocksAndEdgesAndHeightGroups TimelineContainer.ts:65
    e Dag.ts:247
    c runtime.js:63
    _invoke runtime.js:293
    E runtime.js:118

Clicking a block immediately revealed the rest of the DAG, and the >> button.
Clicking the >> button resumed operation to normal.

Provide instructions for deployment

As discussed in discord (see https://discord.com/channels/599153230659846165/951517014873235497/951518516056580179), some instructions in the readme would be very welcomed in order to deploy a mirror of the main web site.

There's no animation when a block that has previously been shown moves

This happens as follows:

• A block is added to some height
• Later, another block is added to the same height
• The old block "pops" into its new y position

Parts of the virtual selected parent chain don't get marked

Every so often, there are virtual selected parent chain edges that never get marked (bold and blue)

Add dark theme

Add a "zoom" level contol

Sometimes i'd like to see a wider picture of the DAG 🙂 And that requires me shrinking the browser vertically. It would be much more convenient to have the ability to make it by hands inside the site.

Use https instead of http protocol

Add "pinch to zoom" functionatily

Add Anticone and "Redness Catalysts" Fields

It can be useful to be able to clearly see the the anticone of a block, and in the case of a red block, the blocks that prevent it from being blue i.e. the blocks in its anticone which already have k blue blocks in their respective anticone.

For both of the above, as well as merge set, a clear visualization could be nice, where you could highlight the respective blocks in some way.

sign when navigating in the testnet

A 'testnet' message on the testnet kgi would make clear for users that they are not in the mainnet.