dump: New dump format support with D3

[haileynam]

D3(Data-Driven-Documents) is a javascript library for information visualizing on web browser.
D3 can support fine control and dynaimc data visualization.
Providing this feature would make uftrace user-friendly.

Making this feature should consider the overhead due to massive data.

Here is an example of indented tree data made by D3.

You can see more specific information about D3.js at the link below.
https://d3js.org/

[mirusu400]

I wrote a simple test script to build a D3 HTML file:

https://github.com/namhyung/uftrace/blob/30806dbfe8d50e8eb77c5d2dd58577d9d02ac943/scripts/d3.py

As the emphasis was on implementation, the program runs slowly. It requires optimization and further testing.

[paranlee]

This visualization example looks good to me.

• https://vizhub.com/srinivasjavvadi/86280477e61c4a199c38d3faa6ff9503?edit=files&file=data-example.json

[haileynam]

@mirusu400 This feature looks good for me, too.
However, it looks like it overwrites every result on single "d3.html". I think it would be great if we give a filename as an argument and make every different d3.html file from different uftrace.data.

[mirusu400]

@haileynam Is there any ways to provide arguments into scripts?

I've checked the uftrace-script.md documentation, but I don't find any such way.

Rather, it seems better to provide a way to save using output and redirection like mermaid.

[mirusu400]

I updated some html templates in my branch. Now it shows not only graphs but also some details: depth and args.

But it still works unstably. The current logic is generating incorrect caller-callee relationships between functions.

[gichoel]

I used the commands below to test the uploaded functionality.

$ git clone https://github.com/mirusu400/uftrace

......

$ gcc -pg -g tests/s-fibonacci.c -o t-fib
$ uftrace record -a t-fib 5
$ uftrace script -S ./scripts/d3.py

And I thought that if you call a recursive function like Fibonacci, it would be easier to distinguish if you print the arguments together, so I made some changes to the code and ran it, and the result is shown below.

And to check if the result of the graph is normal, I used the replay function, and the result is shown below.

$ uftrace replay
# DURATION     TID     FUNCTION
   0.330 us [  3176] | __monstartup();
   0.130 us [  3176] | __cxa_atexit();
            [  3176] | main(2, 0x7ffd1224b318) {
 112.181 us [  3176] |   atoi("5") = 5;
            [  3176] |   fib(5) {
            [  3176] |     fib(4) {
            [  3176] |       fib(3) {
   1.330 us [  3176] |         fib(2) = 1;
   0.060 us [  3176] |         fib(1) = 1;
   1.780 us [  3176] |       } = 2; /* fib */
   0.050 us [  3176] |       fib(2) = 1;
   2.070 us [  3176] |     } = 3; /* fib */
            [  3176] |     fib(3) {
   0.050 us [  3176] |       fib(2) = 1;
   0.050 us [  3176] |       fib(1) = 1;
   0.300 us [  3176] |     } = 2; /* fib */
   2.640 us [  3176] |   } = 5; /* fib */
 116.081 us [  3176] | } = 1; /* main */

The result shows that inside fib(4) there are fib(3) and fib(2), but only fib(3) is printed in the graph.

---

@mirusu400
Having to hover to see the argument information seems to have the disadvantage of not being visible at a glance.

How about changing the code to print the arguments along with the function name?

[honggyukim]

Thanks for doing this. But I have a concern about the performance when the uftrace.data is huge.

Can you test it with a pre-recorded data of chrome at https://github.com/uftrace/uftrace.github.io/blob/master/data/uftrace.data.chrome.youtube.google.naver.debug.tar.gz?

[honggyukim]

To reduce the amount of data, we really need the work at #1500.

[gichoel]

I think we could use this issue to implement the call graph diff feature described in the TODO on the uftrace wiki.

This is because mermaid can only output graphs in a specified format, whereas D3.js can use JavaScript and CSS to achieve the desired visualization and implement additional user-friendly features.

A brief description of the call graph diff feature can be found in the TODO on the uftrace wiki page:

• URL: https://github.com/namhyung/uftrace/wiki/TODO#4-call-graph-diff

The output I would expect would be similar to the screenshot of the tool called bindiff in the link below:

• URL: https://www.zynamics.com/bindiff.html