Proof-of-concept: mathjax and graphviz side by side in Notebook

[Björn Dahlgren]

I often find myself wanting to look both at the tree representation and the latex rendering of an expression. Ideally I'd like to get both of them side by side. Here's a notebook I hacked together which is a start:

https://gist.github.com/bjodah/581ca5d5c18dd34ff945134f5c6cecd7

I would also like to add tooltips (the example has tooltip for hovering symbols in the tree representation, with mathjax I think we need mathjax 3 in the notebook), as well as coloring (e.g. color symbols based on assumptions such as non-negativity etc.).

I dabbled with embedding javascript to highlight the nodes in both in the mathjax rendering and the tree view simultaneously when hovering the subexpression on either side. But I couldn't quite figure out how to achieve this.

For now I'll have to leave this be, but I'm most curious if anyone else finds this useful, and perhaps are better versed in javascript/jupyter hacking. If so, we should ideally put something together, either for inclusion into SymPy or as a "side" package for starters. Or maybe this functionality is already available somewhere that I've simply missed?

All the best,

Björn

[Aaron Meurer]

You might also look at mermaid instead of graphviz. Although ideally I
think you'd want something where you can dynamically expand/collapse
the tree elements. Otherwise, this sort of thing would be unusable for
any expression that isn't fairly small.

Aaron Meurer

> --
> You received this message because you are subscribed to the Google Groups "sympy" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to sympy+un...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/sympy/24896b1a-1058-430c-bd5a-bc04f5cd90e5n%40googlegroups.com.

[Francesco Bonazzi]

What about merging it as experimental API? In case you are not sure about the state of the current code, we have a "sandbox" module in SymPy for temporary experiments.

[Björn Dahlgren]

On Monday, 12 December 2022 at 14:12:11 UTC+1 Francesco Bonazzi wrote:

What about merging it as experimental API? In case you are not sure about the state of the current code, we have a "sandbox" module in SymPy for temporary experiments.

That's a nice idea, I had forgotten about the sandbox folder. Though I hesitate to trigger full CI-tests on every commit for something that might even lack proper tests in its infancy (GUI-stuff is notoriously hard to efficiently unit test...).

On that topic, has a "sandbox" repo under the sympy-org ever been discussed? I feel like that would be a less intrusive place for the humble beginnings for this kind of projects.

 On Monday, December 12, 2022 at 6:30:08 a.m. UTC+1 Aaron Meurer wrote:

You might also look at mermaid instead of graphviz. Although ideally I
think you'd want something where you can dynamically expand/collapse
the tree elements. Otherwise, this sort of thing would be unusable for
any expression that isn't fairly small.

Agreed, surprisingly I found it very hard to find any preexisting framework to visualize large graphs (trees), gephi looks competent, but its looks like it's a Java based GUI.

The most promising widget like package for the notebook might be ipysigma. But it doesn't look like it (or sigmajs really) supports collapsing subtrees (they focus on general graphs instead of trees).

P.S.

Just a list of URLs for some bits and pieces that do parts of what I envision:

• d3-collapsible-tree-demo  (note sure if this is the original or vice versa)
• renderjson
  
• ...the renderjson is pretty much what's included in: IPython.display.JSON, which I learned in this stackoverflow thread.
• collapsible d3 with zoom (demo)

Björn

[Aaron Meurer]

On Mon, Dec 12, 2022 at 1:43 PM Björn Dahlgren <bjo...@gmail.com> wrote:
>
>
> On Monday, 12 December 2022 at 14:12:11 UTC+1 Francesco Bonazzi wrote:
>>
>> What about merging it as experimental API? In case you are not sure about the state of the current code, we have a "sandbox" module in SymPy for temporary experiments.
>
>
> That's a nice idea, I had forgotten about the sandbox folder. Though I hesitate to trigger full CI-tests on every commit for something that might even lack proper tests in its infancy (GUI-stuff is notoriously hard to efficiently unit test...).
> On that topic, has a "sandbox" repo under the sympy-org ever been discussed? I feel like that would be a less intrusive place for the humble beginnings for this kind of projects.

If you want to add a new repo to the sympy org (either a "sandbox"
repo or a repo just for this) I don't see any problems with doing it.
It wouldn't affect the sympy library itself so there's no reason to
not do it.

Aaron Meurer

>
> On Monday, December 12, 2022 at 6:30:08 a.m. UTC+1 Aaron Meurer wrote:
>>>
>>> You might also look at mermaid instead of graphviz. Although ideally I
>>> think you'd want something where you can dynamically expand/collapse
>>> the tree elements. Otherwise, this sort of thing would be unusable for
>>> any expression that isn't fairly small.
>
>
> Agreed, surprisingly I found it very hard to find any preexisting framework to visualize large graphs (trees), gephi looks competent, but its looks like it's a Java based GUI.
> The most promising widget like package for the notebook might be ipysigma. But it doesn't look like it (or sigmajs really) supports collapsing subtrees (they focus on general graphs instead of trees).
>
> P.S.
> Just a list of URLs for some bits and pieces that do parts of what I envision:
>
> d3-collapsible-tree-demo (note sure if this is the original or vice versa)
> renderjson
> ...the renderjson is pretty much what's included in: IPython.display.JSON, which I learned in this stackoverflow thread.
> collapsible d3 with zoom (demo)
>
> Björn
>

> --
> You received this message because you are subscribed to the Google Groups "sympy" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to sympy+un...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/sympy/91cb4e89-b3b2-4e36-8de0-5dc1f42f2090n%40googlegroups.com.