Skip to content
This repository has been archived by the owner on Apr 11, 2023. It is now read-only.

Commit

Permalink
Tweak to the group compound layout algorithm (#1464) (#1465)
Browse files Browse the repository at this point in the history
* Tweak to the group compound layout algorithm
 - Remove nodes from the parents instead of moving them outside

* Makes bounds-expansion more stable by ommiting small diffs
  • Loading branch information
jshaughn committed Oct 4, 2019
1 parent b85b174 commit 14580ba
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 9 deletions.
17 changes: 16 additions & 1 deletion src/components/CytoscapeGraph/CytoscapeGraph.tsx
Expand Up @@ -421,8 +421,23 @@ export class CytoscapeGraph extends React.Component<CytoscapeGraphProps, Cytosca
// Ensure we don't end with negative values in our bounds-expansion
newBE = newBE.map(val => Math.max(val, 0));

const compareBoundsExpansion = (be1: number[], be2: number[]) => {
if (be1.length !== be2.length) {
return false;
}

const delta = 0.00001;

for (let i = 0; i < be1.length; ++i) {
if (Math.abs(be1[i] - be2[i]) > delta) {
return false;
}
}
return true;
};

// Only trigger an update if it really changed, else just skip to avoid this function to call again
if (oldBE.join(' ') !== newBE.join(' ')) {
if (!compareBoundsExpansion(oldBE, newBE)) {
target.style('bounds-expansion', newBE);
// bounds-expansion changed. Make sure we tell our parent (if any) to update as well (so he can update the label position).
if (target.isChild()) {
Expand Down
12 changes: 4 additions & 8 deletions src/components/CytoscapeGraph/Layout/GroupCompoundLayout.ts
Expand Up @@ -38,7 +38,6 @@
export const COMPOUND_PARENT_NODE_CLASS = '__compoundLayoutParentNodeClass';

const NAMESPACE_KEY = 'group_compound_layout';
const CHILDREN_KEY = NAMESPACE_KEY + 'children';
const STYLES_KEY = NAMESPACE_KEY + 'styles';
const RELATIVE_POSITION_KEY = NAMESPACE_KEY + 'relative_position';

Expand Down Expand Up @@ -176,8 +175,6 @@ export default class GroupCompoundLayout {
parent.addClass(COMPOUND_PARENT_NODE_CLASS);
// (1.b) Set the size
parent.style(newStyles);
// Save the children in the parent scratchpad for later
parent.scratch(CHILDREN_KEY, parent.children());
});

// Remove the children and its edges and add synthetic edges for every edge that touches a child node.
Expand All @@ -192,8 +189,8 @@ export default class GroupCompoundLayout {
}
});
});
// (1.d) Detach all child nodes from parents.
children.move('null');
// (1.d) Remove all child nodes from parents (and their edges).
const removedElements = this.cy.remove(children);

const layout = this.cy.layout({
// Create a new layout
Expand All @@ -211,10 +208,10 @@ export default class GroupCompoundLayout {
// (3) Remove synthetic edges
this.cy.remove(syntheticEdges);

// (4.a) Add back the child nodes (with edges still attached)
removedElements.restore();
// Add and position the children nodes according to the layout
parents.each(parent => {
// (4.a) Add back the child nodes (with edges still attached)
parent.scratch(CHILDREN_KEY).move(parent);
// (4.b) Layout the children using our compound layout.
parent.children().each(child => {
const relativePosition = child.data(RELATIVE_POSITION_KEY);
Expand All @@ -226,7 +223,6 @@ export default class GroupCompoundLayout {
parent.removeClass(COMPOUND_PARENT_NODE_CLASS);

// Discard the saved values
parent.removeScratch(CHILDREN_KEY);
parent.removeScratch(STYLES_KEY);
});
this.cy.endBatch();
Expand Down

0 comments on commit 14580ba

Please sign in to comment.