You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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.
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.
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
The text was updated successfully, but these errors were encountered:
gbroques
changed the title
Question About Complex Edge Customization
Support for Complex Edge Customization
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:
7579931
tree points to the5ddb8fb
blob named1.txt
. Also, all the edges between the94f303f
tree, and other blobs and trees.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.The text was updated successfully, but these errors were encountered: