cytoscape.js-expand-collapse
cytoscape.js-expand-collapse copied to clipboard
Getting collapsed edge containing certain edge
Is there any way to get the collapsed edge that an edge belongs to?
For example, a certain part of my app selects a certain edge, that is collapsed into a group edge, I want to indicate that group edge as selected to show that. How can I find that edge?
I know there is api.getParent(id)
but that does not work for edges.
Hi @Alexithemia
Collapsed edges are stored inside the data property collapsedEdges
. So you can read them like edge.data('collapsedEdges')
. Note that, edges inside this data property can also contain collapsedEdges. So to get all the collapsed edges properly, you might need to write a recursive function.
In fact, defining new API methods similar to getCollapsedChildren
and getCollapsedChildrenRecursively
might be useful for the edges.
Unfortunately there does not seem to be a way to go upwards like with api.getParent()
looking through the collapsed children of each edge to find the one that matches wouldn't be very performant.
Currently I'm using a sketchy fix by getting the source and target of the edge, and using source.edgesWith(target)
to find the collapsed edge between them and then modify it, but there are some complications as the edges sometimes are those "meta edges for collapsed nodes, so they might not show the same source and target for this.
@canbax could a simple getParentEdge()
function be created or add a reference to the new group edge in the data of the removed edges to easily reach the existing edge?
No, it is not simple. Why don't you follow what I said? Just a recursive function and iterate through all edges and their collapsed children.
Also here what is a parent? If nesting is allowed a parent might be a collapsed edge.
Because iterating through possibly thousands of edges to check each of it's edges in collapsedEdges is very process heavy, when having a reference to the edge it is collapsed under would take a single operation.
Here's an example of what I'm trying to get this to do.
A user searches and finds an edge through an external panel where we list everything in the workspace and selects it there.
We want this edge to become highlighted in the graph so the user can see it and what it connects to.
Problem, this edge is collapsed into a group edge.
I can iterate through all edges and their collapsed edges to find the one that matches then select the grouped edge it belongs to.
But if getParent()
worked for edges I could just getParent(id).select()
or if the edge had a reference to the group edge it is collapsed under, I could access it with the map I created, `linkMap(id).graphLink.data('parentEdge').select();
If the edges were nested I would just keep using one of these methods to go upwards until one exists in the graph.
Here is a short video showing what I'm running into in very small demo scale. Some workspaces in our app have 4000+ links.
https://user-images.githubusercontent.com/44597137/165831635-4e553e9e-0f81-4c81-8a48-4dbce68721e5.mp4
@Alexithemia iterating through 4000+ edges should be fast if your algorithm is linear (it should be). Did you try that?
Secondly, collapsing edges is done manually by the API user. So you are the one who is collapsing edges. So you can keep a map on your own. You can also listen for events like expandcollapse.beforecollapseedge
and expandcollapse.beforeexpandedge