YARV visualizer

[kddnewton]

We already have the ability to visualize the AST on ruby-syntax-tree.github.io. However it is relatively primitive (it just returns the text-based form of the AST). I'm a big fan of https://reaflow.dev/ and want to investigate using that for the tree visualization.

On top of that, it would be nice to visualize our CFG and DFG with ruby-syntax-tree.github.io.

Finally, it would be nice to visualize the actual execution. Since we have the ability to emulate YARV, we should do it in Ruby and visualize reads/writes on the stack, changes to stack and environment pointers, and tracepoint events. This would be both educational and (in my opinion) inspirational.

[wenderjean]

Let me handle this investigation and create a POC for it.

[kddnewton]

Please do! I was thinking you could use the new mermaid.js stuff here: #290.

[wenderjean]

@kddnewton I spent a couple of hours trying to get syntax_tree@5.3.0 running on ruby-syntax-tree.github.io but I got some issues with the fiddle dependency, basically, "head-wasm32-unknown-wasi-full-js" does not vendor fiddle along with Ruby, which kind of makes sense once it relies on "fiddle.so". The fact is I'm gonna need to vendor both somehow.

Have you ever tried to use the newest versions of syntax_tree on ruby-syntax-tree.github.io?

[kddnewton]

No problem! I just updated stree so that it doesn't rely on fiddle being present anymore. (It was only using it in one place, so now it just requires it dynamically if those methods are called.)

#301

Can you try it against main now?

[wenderjean]

The issue with fiddle is solved @kddnewton, what I'm gonna do now is find a way to pack "prettier_print" once "ruby-head-wasm32-unknown-wasi-full-js.tar.gz" does not provide it.

[kddnewton]

I think you'll need to extend the block here to include prettier_print https://github.com/ruby-syntax-tree/ruby-syntax-tree.github.io/blob/main/Rakefile#L33

[wenderjean]

@kddnewton Would you suggest a better way to parse AST to string? I was using SyntaxTree.parse(source).pretty_inspect after facing this issue, It worked with version 5.3.0 but now it raises RuntimeError: unreachable, after this commit: 0cf3e85

Anyway, I made good progress so far and I'm able to render mermaid graphs already.

[kddnewton]

Sorry what do you mean parsing the AST to string? I'm not clear what you need it for.

[wenderjean]

I need to replace this code here because it raises the "private method `pp' called" but I'm struggling to obtain the same result using another approach. I should get a plain string at this point.

[kddnewton]

Oh jeez @wenderjean sorry I didn't understand.

Yeah that line should be instead

PP.pp(SyntaxTree.parse(JSON.parse(${jsonSource})), +"", 80)

[wenderjean]

Thanks @kddnewton, I opened a draft pull request with the update to SyntaxTree 6 and the mermaid support. Now I'll spend some time adding CFG/DFG and the actual execution you mentioned.

[wenderjean]

@kddnewton What are the plans for CFG/DFG visualization? Do you intend to show the textual version of the nodes, like SyntaxTree::YARV::ControlFlowGraph.compile(iseq.to_a).disasm or are we going to render a graph as we did for mermaid? It seems like we could use reaflow.dev for this purpose even though we'll need to create a wrapper in syntaxtree to return CFG/DFG in the reaflow format.

Am I right?

[kddnewton]

I think we could try reaflow for the whole thing, but let's stick to what we know for now. I don't think we need the textual version since we include the text of the instructions on the nodes themselves in mermaid.