Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interactive visualization #9

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

considerate
Copy link

@considerate considerate commented May 5, 2022

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
Copy link
Author

considerate commented May 5, 2022

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
  • 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
Copy link
Author

Gradients based on this example

calligraphy

@Nisarg1112
Copy link

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

@considerate
Copy link
Author

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Interactive visualization
2 participants