Interactive visualization

jonascarpay / calligraphy

haskell source code visualizer

BSD 3-Clause "New" or "Revised" License

97 stars 13 forks source link

Interactive visualization #9

Open considerate opened 2 years ago

considerate commented 2 years ago

This PR adds a basic interactive visualization of the callgraph overlayed on the hierarchical structure of the modules and intra-module declarations. The callgraph (blue) and typegraph (orange) edges are rendered with hierarchical edge bundling so that the structure of the relations are more apparent. Hovering over any identifier highlights the direct neighbors in the call graph. The different types of identifiers are allocated different shapes, i.e. star for type-class, box for data declaration and triangle for constructor.

The interactive visualization can be generated using calligraphy --output-html out.html and the JSON data backing it can be outputted directly using calligraphy --output-json data.json

Closes #1 calligraphy

considerate commented 2 years ago

Wish list of improvements:

[ ] Interactive collapsing of nodes (with remapping of links to the representative)
[ ] Filter out only (k-steps removed) neighbors (plus their ancestors) and relayout
[ ] Remove all links that are not direct neighbors or their ancestors on click
[x] Split links into smaller segments and color them into a gradient from source to target. Note that SVG gradients don't work because they always go in one direction (left-right, right-left, up-down or down-up). It might be possible with two gradients though.

considerate commented 2 years ago

Gradients based on this example

calligraphy

Nisarg1112 commented 7 months ago

Hey @considerate , I was just wandering - why this PR is not yet merged? Is there any issues which needs to be looked at?

considerate commented 7 months ago

@Nisarg1112 I think in terms of rendering the edge bundles it works like intended. However, while using this it very early became clear to me that just showing the full callgraph as a nice picture like this isn't that useful - it requires some interactivity in order to keep the complex down enough to be graspable.

It also became clear to me that the d3 solution was getting difficult to maintain when the graph is updated. I wanted to create a version of this using something like React or Halogen so that the implementation didn't have to manage the mutable state so explicitly. However, I never got around to doing that.