Add tree-like visualization

[EgorBu]

Hi, I used dashboard a bit and found that it's still hard to understand. When you use UAST from bblfsh as text - it's really verbose (even if you hide some attributes of nodes).

• it's hard to read structure of code It will be really great to have tree visualization, so the structure will be easily readable + show attributes of a node by click (or just pointing by mouse, or show token always - everything else optionally, or etc.). Ex1: https://resources.jointjs.com/demos/javascript-ast Ex2: http://vpyast.appspot.com/

[mcuadros]

We can use https://gojs.net/latest/samples/familyTree.html

[smacker]

I did some investigation. Looks like the best choice for visualization library using with react is simple d3. I tried to render java example:

Hover on node:

Expand all nodes:

[mcuadros]

I think that the internalType of the nose should be a label, like in the example I pasted, unless is a mess. The idea is visualize the hierarchy, and maybe have color codes for the roles

[smacker]

I removed internalType because it looked like a mess. I see 4+ children quite often in examples and internalType is long often too, like "SingleVariableDeclaration". But of course it's not final solution. We will experiment with different visualization more. It was more like a technical investigation, how to integrate library in react without breaking vdom and reuse tree state.

[bzz]

Has some AST visualization example https://code2vec.com/

[marnovo]

@ricardobaeta