This project is written in JavaScript, uses React, Vis.js and TailwindCSS, and serves as the user interface for an application that generates transaction conflict graphs (also called precedence graphs or serializability graphs) from transactions on the Hyperledger Fabric blockchain.
If the Hyperledger Fabric blockchain is running on a remote cluster, this project should also be installed there.
You may want to use ssh -i ~/.ssh/id_rsa -L 3006:localhost:3006 <remote username>@<remote IP address> to connect to the remote instance via SSH and run the app there.
This app needs to be run together with the corresponding backend if graphs should be generated by extracting transaction data from the Hyperledger Fabric blockchain. The backend repository also provides information on how to set up a Hyperledger Fabric network and generate transactions for testing puroposes.
Previously downloaded graphs can be visualized using the frontend only.
The frontend is a single page application consisting of two main views (pages), the GeneratePage and the VisualizePage. The pages themselves are made up of different components (e.g. buttons, forms, or images), which can be found in the components directory.
The generate page is used to visualize a transaction conflict graph of transactions within a specific block range of the Hyperledger Fabric blockchain. For this purpose, a user can specify a start block and an end block.
The generated graph and additional variables can be downloaded as a .json file. This file can subsequently be uploaded to the 'Visualize' page, which allows users to view it again. Moreover, the variables related to the graph can be downloaded separately.
Each node in the graph represents a transaction. The transactions can be selected to view additional details, such as the invoked chaincode function or the accessed keys. The edges in the graph represent the dependencies between the transactions. On selection, users are presented with additional information, such as the keys causing the dependency.
There are currently five different colors, which are used successively for the different blocks. If an edge is between two transactions that have a different color then it represents an inter-block conflict. However, it could be that an inter-block conflict is between two transactions with the same color. The borders of failed transactions and dependencies causing transaction failure are colored in red.
If you start the frontend for the first time, run:
To use the application, run the following command in the project directory:
Runs the app in the development mode.
Open http://localhost:3006 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
The app is ready to be deployed!