XTrace - WebUI Graph Visualizations

The visualization package contains several web-based visualizations of X-Trace tasks. They are mostly written using D3. They can be accessed through the X-Trace web UI, usually at http://localhost:4080

SwimLane

This visualization draws the X-Trace reports as a swimlane, with time going from left to right. Each dot is one X-Trace report. Each row is one thread in one process. Threads of the same process are color coded. Rows are labelled on the left with the thread names. Lines are drawn between dots if there is a direct causal relation between them (eg, if report A was generated followed by report B, a line will be drawn from A to B). Hovering over a node will show the X-Trace report details. Click here for a live visualization.

X-Trace swimlane visualization X-Trace swimlane visualization

If Retro is also configured to log X-Trace reports when resources are consumed, the swimlane graph will have additional highlights for garbage collection, disk events, and network events.

X-Trace swimlane visualization

Animated

This visualization draws the X-Trace reports as a directed, acyclic graph, with causality going top to bottom. Each node of the graph is one X-Trace report. The visualization is interactive -- hovering over a node will show the X-Trace report details and highlight the causal path in the graph. A right-click context menu allows you to manually hide nodes and select paths in the graph. Click here for a live visualization.

X-Trace animated task graph X-Trace animated task graph X-Trace animated task graph

The "Lite" graph is the same as the Animated graph, but lacks animations, making it a better choice for large graphs that might be slow to render. Click here for a live visualization.

Comparison

From the X-Trace dashboard, there are some tools for comparing multiple graphs

X-Trace WebUI buttons

  • Select Related will select all other tasks that overlap in time with the selected requests.
  • Swimlane Selected will display a swimlane visualization of all selected requests. The following example compares two executions of hdfs dfs -copyFromLocal file for two different files: example.

Graph Kernels

Side-by-side Comparinson will compare two of the animated execution graphs. It will run a Weisfeiler-Lehman Graph Kernel to compare the two execution graphs, and highlight the nodes in the respectve graphs based on how "different" they are. The following example compares two executions of hdfs dfs -copyFromLocal file for a small file and a large file, highlighting where they differ. One file is bigger than the other, so they differ at the part of the execution that transfers data. Click here for a live visualization.

Comparison of two X-Trace execution graphs

Cluster Selected will calculate the pairwise differences between all selected graphs, and show a force-directed graph based on the differences. The more different two graphs are, the further away they will be. Click here for a live visualization.

Clustering of seven X-Trace execution graphs