cytoscape.js-expand-collapse icon indicating copy to clipboard operation
cytoscape.js-expand-collapse copied to clipboard

Getting collapsed edge containing certain edge

Open Alexithemia opened this issue 2 years ago • 6 comments

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.

Alexithemia avatar Apr 26 '22 15:04 Alexithemia

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.

canbax avatar Apr 27 '22 05:04 canbax

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.

Alexithemia avatar Apr 27 '22 15:04 Alexithemia

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

Alexithemia avatar Apr 28 '22 14:04 Alexithemia

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.

canbax avatar Apr 28 '22 15:04 canbax

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 avatar Apr 28 '22 19:04 Alexithemia

@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

canbax avatar May 09 '22 12:05 canbax