dagsvisualizer

README

GoShimmer DAGs visualizer

This project was bootstrapped with Create React App.

DAGs visualizer structure

Front-end

DAGs visualizer is a React App that implemented in TypeScript. Here are the main directories in /src:

• components: contains React components.
• stores: contains stores that will be injected to components via mobx. Stores handle data from the back-end, and each DAG manages its own store.
• models: contains data structures of different types of websocket messages.
• graph: contains the interface and implementations of visualization, currently there are VivaGraphJS and Cytoscape.js.
• styles: contains files related to styling.
• utils: contains utility functions.

Back-end

The .go files forms a plugin that register several events to collect data from each DAG and a back-end server for the webpage.

DAGs visualizer in dev mode

Dev mode has only been tested on Linux.

Docker

Run the yarn development server in a container and add it to the docker-network.

1. Make sure to set dagsvisualizer.dev to true, to enable GoShimmer to serve assets.
2. Make sure to set dagsvisualizer.devBindAddress to dagsvisualizer-dev-docker:3000.
3. Run Goshimmer docker-network.
4. Go to goshimmer root directory and run script scripts/dags_visualizer_dev_docker.sh. It will install all needed npm modules and create a container with a running development server instance.
5. Using default port config, you should now be able to access the DAGs visualizer under http://127.0.0.1:8061

To see the changes, you need to manually reload the page.

Pack your changes

We are using pkger to wrap all built frontend files into Go files.

1. Install pkger if not already done.
2. Build DAGs visualizezr by running yarn build within the frontend directory.
3. Run pkger.
4. pkged.go under root directory of goShimmer should have been modified.
5. Done. Now you can build goShimmer and your DAGs visualizer changes will be included within the binary.

Documentation

Index

• Constants
• Variables
• type ParametersDefinition

Constants

const (
	// MsgTypeTangleVertex is the type of the Tangle DAG vertex.
	MsgTypeTangleVertex byte = iota
	// MsgTypeTangleBooked is the type of the Tangle DAG confirmed message.
	MsgTypeTangleBooked
	// MsgTypeTangleConfirmed is the type of the Tangle DAG confirmed message.
	MsgTypeTangleConfirmed
	// MsgTypeTangleTxGoF is the type of the Tangle DAG transaction GoF.
	MsgTypeTangleTxGoF
	// MsgTypeFutureMarkerUpdated is the type of the future marker updated message.
	MsgTypeFutureMarkerUpdated
	// MsgTypeUTXOVertex is the type of the UTXO DAG vertex.
	MsgTypeUTXOVertex
	// MsgTypeUTXOBooked is the type of the booked transaction.
	MsgTypeUTXOBooked
	// MsgTypeUTXOGoFChanged is the type of the UTXO DAG vertex confirmed message.
	MsgTypeUTXOGoFChanged
	// MsgTypeBranchVertex is the type of the branch DAG vertex.
	MsgTypeBranchVertex
	// MsgTypeBranchParentsUpdate is the type of the branch DAG vertex parents updated message.
	MsgTypeBranchParentsUpdate
	// MsgTypeBranchGoFChanged is the type of the branch DAG vertex confirmed message.
	MsgTypeBranchGoFChanged
	// MsgTypeBranchWeightChanged is the type of the branch DAG vertex weight changed message.
	MsgTypeBranchWeightChanged
)

const PluginName = "DAGsVisualizer"

PluginName is the name of the dags visualizer plugin.

Variables

var ErrForbidden = errors.New("forbidden")

ErrForbidden defines the forbidden error.

var ErrInternalError = errors.New("internal error")

ErrInternalError defines the internal error.

var ErrInvalidParameter = errors.New("invalid parameter")

ErrInvalidParameter defines the invalid parameter error.

var ErrNotFound = errors.New("not found")

ErrNotFound defines the not found error.

var Parameters = &ParametersDefinition{}

Parameters contains the configuration parameters of the dags visualizer plugin.

var (

	// Plugin is the plugin instance of the dashboard plugin.
	Plugin *node.Plugin
)

Types

type ParametersDefinition

type ParametersDefinition struct {
	// BindAddress defines the config flag of the dags visualizer binding address.
	BindAddress string `default:"0.0.0.0:8061" usage:"the bind address of the dags visualizer"`

	// Dev defines the config flag of the  dags visualizer dev mode.
	Dev bool `default:"false" usage:"whether the dags visualizer runs in dev mode"`

	// DevBindAddress defines the config flag of the dags visualizer binding address in development mode.
	DevBindAddress string `default:"0.0.0.0:3000" usage:"the bind address of the dags visualizer in develop mode"`
}

ParametersDefinition contains the definition of configuration parameters used by the dags visualizer plugin.