Evaluating JS graph rendering for Jupiter F#

While testing IFsharp https://github.com/fsprojects/IfSharp from Mac and docker I’ve stumbled upon usual issues which arise from using legacy F# libs: mainly graph rendering did not work. Which is sad because graphs are probably the main part of exploration story Jupyter gives you.

After a few failed attempts I’ve decided to try out rendering via JavaScript libs, but this was not as straightforward as hoped. Feature notebook https://github.com/fsprojects/IfSharp/blob/master/FSharp_Jupyter_Notebooks.ipynb has an example of working with D3. While it could solve some use cases I still think it’s too low-level (but awesome nevertheless) graph lib. I’ve started with https://github.com/shutterstock/rickshaw lib because it’s bundled with Prometheus UI. But it never rendered. So I’ve tried a few other libs, until trying rendering via Frame, which helped. While it looked ugly, this worked and allowed me to test several other libraries like ChartJs, VisJs and graph libs. The last one turned out to work without Frame wrapper but requires to be executed twice ¯\_(ツ)_/¯

With a bit syntactic sugar it can even look like a server-side code:

Obviously, the syntax is far from being perfect, this was only a quick try.

The main advantage of this approach is that it allows interactivity without re-rendering. For example, in the above screenshot, each graph could be turned on and off. And graph in a vis.js can be rearranged by moving nodes.

And the main issues are the following:

Given above I also wonder if Fable could be of use in this scenario.

This is the code https://github.com/aprooks/ifsharp-graphs/blob/master/GraphsStarter.ipynb, but it requires you to run it in order to see outputs as I did not even try to figure out how to persists frame contents.

UPD. turned out there is an extension method which allows external JS code to be downloaded and properly registered, so Frame hack is not really required. An updated notebook is here: https://github.com/aprooks/ifsharp-graphs/blob/master/GraphsWithoutFrame.ipynb