XCM Visualizer โ User Guide โ
This section explores the capabilities of the XCM Visualizer from a user perspective and explains how to interact with its 3D and 2D visualizations, filters, and customization options.
Observe the 3D Model โ
The XCM Visualizer provides several ways to navigate and customize the 3D visualization of cross-chain messaging.
Initial Overview โ
When the XCM Visualizer loads, the 3D visualization is displayed automatically.
Zoom In and Out โ
You can adjust the zoom level in the following ways:
- Use the mouse scroll wheel.
- Drag two fingers on a trackpad:
- Drag upward to zoom out.
- Drag downward to zoom in.
Rotate the Camera โ
To rotate the camera around the currently pinned center:
- Hold the left mouse button and drag.
- Perform a left-click drag on a trackpad.
Move the Pinned Center โ
The pinned center defines the focal point of the camera rotation.
By default, it is set to the Polkadot Relay Chain.
To move the pinned center:
- Click both the left and right mouse buttons simultaneously (or the equivalent gesture on a trackpad).
Select Specific Chains โ
Chains can be selected in two ways:
- Directly within the 3D visualization.
- Via the multi-select dropdown located in the bottom-left corner of the visualization screen.
Once chains are selected:
- All 2D graphs update to display data only for the selected chains.
- Channels originating from the selected chains are highlighted in blue.
- Channels representing destinations reachable from the selected chains are highlighted in red.
Selection via 3D Visualization โ
Selection via Multi-Select Dropdown โ
Select a Specific Channel โ
To inspect a specific channel:
- Click directly on a channel in the 3D visualization.
Detailed information will be displayed, including the total number of messages that passed through the selected channel.
Select and Use 2D Graphs โ
The visualizer offers four distinct 2D graph types, each serving a different analytical purpose.
You can display up to two 2D graphs simultaneously.
All 2D graphs are interactive. You can:
- Hover for details.
- Click and drag to refine the view.
1. Accounts with the Most XCM Activity โ
This graph filters and displays accounts with the highest volume of XCM interactions for the selected chains.
2. XCM Messages Over Time โ
This graph visualizes the number of XCM messages sent over time, enabling trend analysis.
3. Successful vs. Failed XCM Calls โ
This graph separates successful and failed cross-chain calls for the selected chains.
4. Assets Transferred via XCM โ
This graph lists all assets transferred through cross-chain messages, along with the exact number of calls that transferred each asset.
Select a Time Frame โ
To analyze XCM activity over a specific period:
- Click the Select Date Range button located on the bottom bar of the 3D visualization.
After selecting a date range:
- The 3D visualization updates to reflect XCM activity for the chosen period.
- All 2D graphs are updated accordingly.
Customize the Color Scheme โ
To customize channel colors:
- Locate the Options button in the bottom-right corner of the 3D visualization.
- Open the color picker.
You can customize the following colors:
- Primary channel color (unselected chains)
- Highlighted channel color (selected chains)
- Secondary channel color (destinations reachable from selected chains)
- Destination channel color (channels leading to reachable chains)
Customize the Background (Skybox) โ
You can fully customize the skybox background by uploading images or generating them using external tools such as
https://tools.wwwtyro.net/space-3d/index.html
The background customization option is available in the Options menu.
After uploading all required images:
- Click Save Skybox.
The new background is applied immediately after closing the options panel.
Rearrange Chains โ
Chains can be rearranged automatically based on XCM activity:
- Open the Options menu.
- Select a rearrangement mode from the dropdown.
Available modes include:
- By number of received XCM messages
- By number of sent XCM messages
- By total XCM activity (sent and received)
Rearrange Individual Chains โ
Individual chains can also be repositioned manually:
- Right-click on a chain to select it.
- Move it to any desired position in 3D space (x, y, z).
All associated channels automatically adjust to follow the new position.