Skip to content

fix: expanding collapsed edges breaks existing edges #131

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.

Sign up for GitHub

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix: expanding collapsed edges breaks existing edges #131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 51 additions & 7 deletions cytoscape-expand-collapse.js
View file
Open in desktop

Large diffs are not rendered by default.

56 changes: 50 additions & 6 deletions src/expandCollapseUtilities.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ return {
delete parentData[restoredNodes[i].id()];
}
cy.scratch('_cyExpandCollapse').parentData = parentData;
this.repairEdges(node);
this.repairEdgesForNode(node);
node._private.data.collapsedChildren = null;

elementUtilities.moveNodes(positionDiff, node.children());
Expand Down Expand Up @@ -443,7 +443,7 @@ return {
if (y_a > y_b) {
T_y = -1 * T_y;
}

// Move the sibling in the special way
this.fishEyeViewMoveNode(sibling, T_x, T_y, nodeToExpand, single, animate, layoutBy, animationDuration);
}
Expand Down Expand Up @@ -578,6 +578,9 @@ return {
isMetaEdge: function(edge) {
return edge.hasClass("cy-expand-collapse-meta-edge");
},
isCollapsedEdge: function(edge) {
return edge.hasClass("cy-expand-collapse-collapsed-edge");
},
barrowEdgesOfcollapsedChildren: function(node) {
var relatedNodes = node.descendants();
var edges = relatedNodes.edgesWith(cy.nodes().not(relatedNodes.union(node)));
Expand Down Expand Up @@ -606,9 +609,12 @@ return {
edge.data('originalEnds', originalEndsData);
}

Copy link
Author

@sashokbg sashokbg Nov 8, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this improves readability and inverses the condition

let finalTarget = relatedNodeMap[target.id()] ? node.id() : target.id();
let finalSource = relatedNodeMap[source.id()] ? node.id() : source.id();

edge.move({
target: !relatedNodeMap[target.id()] ? target.id() : node.id(),
source: !relatedNodeMap[source.id()] ? source.id() : node.id()
source: finalSource,
target: finalTarget,
});
}
},
Expand All @@ -624,7 +630,11 @@ return {

return current;
},
repairEdges: function(node) {
repairEdge: function (edge) {
this.repairEdgesForNode(edge.source());
this.repairEdgesForNode(edge.target());
},
repairEdgesForNode: function(node) {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a "repairEdge" function that repairs meta links for edges after they have been expanded

var connectedMetaEdges = node.connectedEdges('.cy-expand-collapse-meta-edge');

for (var i = 0; i < connectedMetaEdges.length; i++) {
Expand All @@ -633,6 +643,10 @@ return {
var currentSrcId = edge.data('source');
var currentTgtId = edge.data('target');

if(!originalEnds.source || !originalEnds.target) {
return;
}

if ( currentSrcId === node.id() ) {
edge = edge.move({
source: this.findNewEnd(originalEnds.source).id()
Expand Down Expand Up @@ -670,6 +684,10 @@ return {
*/
getCollapsedChildrenRecursively: function(node, collapsedChildren){
var children = node.data('collapsedChildren') || [];
for(let child of node.children()) {
collapsedChildren = this.getCollapsedChildrenRecursively(child, collapsedChildren);
}
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

collapsed children are also children who have collapsed children


var i;
for (i=0; i < children.length; i++){
if (children[i].data('collapsedChildren')){
Expand Down Expand Up @@ -783,7 +801,33 @@ return {
edge.trigger('expandcollapse.beforeexpandedge');
result.oldEdges = result.oldEdges.add(edge);
cy.remove(edge);
result.edges = cy.add(edges);
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the main fix:

  1. added try / catch to avoid breaking everything in case of an exception
  2. before adding the new edges (after expanding a collapsed edge) verify that their source/target are visible
  3. If source or target not visible treat the edge as a meta edge
  • save original ends
  • add meta edge class
  • instead of "move" just update source and data - move will fail since its source or target is missing
  1. After everything call "repairEdge" to properly re-link all meta edges

try{
for(let edgeToAdd of edges) {
let missingSource = cy.getElementById(edgeToAdd.source().id()).length === 0;
let missingTarget = cy.getElementById(edgeToAdd.target().id()).length === 0;

if(missingSource || missingTarget){
edgeToAdd.addClass("cy-expand-collapse-meta-edge");
var originalEndsData = {
source: edgeToAdd.source(),
target: edgeToAdd.target(),
};

edgeToAdd.addClass("cy-expand-collapse-meta-edge");
edgeToAdd.data('originalEnds', originalEndsData);

edgeToAdd.data()['source'] = missingSource ? edge.source().id() : edgeToAdd.source().id();
edgeToAdd.data()['target'] = missingTarget ? edge.target().id() : edgeToAdd.target().id();
}
}
result.edges = cy.add(edges);
for(let edgeToRepair of edges) {
this.repairEdge(edge);
}
} catch (e) {
console.error('Error', e);
console.error('Expanding edge', edge);
}
edge.trigger('expandcollapse.afterexpandedge');
}
return result;
Expand Down