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

Support for Complex Edge Customization #3319

Closed
gbroques opened this issue Jan 10, 2025 · 1 comment
Closed

Support for Complex Edge Customization #3319

gbroques opened this issue Jan 10, 2025 · 1 comment

Comments

@gbroques
Copy link

gbroques commented Jan 10, 2025

Hi, I'm working on visualizing a git object graph.

Each commit in a git repository points to a "tree", which then points to other "trees" and "blobs" which represent directories and files that make up your project history.

I have a very specific way I want the graph rendered for comprehensibility (see below "Desired Graph" image).

What I've done to accomplish that using Cytoscape.js so far (see below "Cytoscape.js" image) is to:

  1. Fork and modify cytoscape.js-dagre (see cytoscape.js-git), as I want each subtree pointed to by a commit to be rendered in a classic hierarchical view.
  2. In order for dagre to visualize the subtrees the way I want, I have to remove all "inter-subtree edges" before dagre lays them out (see here), and then add them back to the graph afterwards (see here).
    • Examples of inter-subtree edges in the below graph are the 7579931 tree points to the 5ddb8fb blob named 1.txt. Also, all the edges between the 94f303f tree, and other blobs and trees.
  3. What I want is for these inter-subtree edges to not overlap with other edges and nodes in the graph, and instead have a taxi style approach where they wrap around the bottom of the graph if neccessary.

Does Cytoscape.js offer this level of customization, or do you have advice on how to accomplish this?

It wasn't obvious to me after examining the code for the edge types demo for taxi or segmented edges.

It seems like you position nodes via nodes.layoutPositions, and the edges are more or less the shortest-path between nodes, and rely on the layout algorithm to position nodes in such a way that the shortest path doesn't overlap other nodes and edges.

  • Commits = green circles 🟢
  • Trees = blue triangles
  • Blobs = red squares 🟥
Cytoscape.js Desired Graph
git-object-graph cytoscape js git-object-graph drawio
@gbroques gbroques changed the title Question About Complex Edge Customization Support for Complex Edge Customization Jan 10, 2025
@maxkfranz
Copy link
Member

Taxi edges, like other edges, can be customised even though they're automatic for most cases out-of-the-box: https://js.cytoscape.org/#style/taxi-edges

You can adjust those style properties according to your layout, esp. the turn distance.

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

No branches or pull requests

2 participants