Skip to content

Commit

Permalink
Merge pull request #1993 from weaveworks/dance-tuning
Browse files Browse the repository at this point in the history 
Add anti-dance heuristics (and feature flags)
  • Loading branch information
@davkal
davkal authored Nov 24, 2016
2 parents 604661c + 90dbf12 commit 10602d2
Show file tree
Hide file tree
Showing 8 changed files with 516 additions and 45 deletions.
173 changes: 172 additions & 1 deletion client/app/scripts/charts/__tests__/node-layout-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,36 @@ describe('NodesLayout', () => {
'n2-n4': {id: 'n2-n4', source: 'n2', target: 'n4'}
})
},
rank4: {
nodes: fromJS({
n1: {id: 'n1', rank: 'A'},
n2: {id: 'n2', rank: 'A'},
n3: {id: 'n3', rank: 'B'},
n4: {id: 'n4', rank: 'B'}
}),
edges: fromJS({
'n1-n3': {id: 'n1-n3', source: 'n1', target: 'n3'},
'n1-n4': {id: 'n1-n4', source: 'n1', target: 'n4'},
'n2-n4': {id: 'n2-n4', source: 'n2', target: 'n4'}
})
},
rank6: {
nodes: fromJS({
n1: {id: 'n1', rank: 'A'},
n2: {id: 'n2', rank: 'A'},
n3: {id: 'n3', rank: 'B'},
n4: {id: 'n4', rank: 'B'},
n5: {id: 'n5', rank: 'A'},
n6: {id: 'n6', rank: 'B'},
}),
edges: fromJS({
'n1-n3': {id: 'n1-n3', source: 'n1', target: 'n3'},
'n1-n4': {id: 'n1-n4', source: 'n1', target: 'n4'},
'n1-n5': {id: 'n1-n5', source: 'n1', target: 'n5'},
'n2-n4': {id: 'n2-n4', source: 'n2', target: 'n4'},
'n2-n6': {id: 'n2-n6', source: 'n2', target: 'n6'},
})
},
removeEdge24: {
nodes: fromJS({
n1: {id: 'n1'},
Expand Down Expand Up @@ -86,10 +116,26 @@ describe('NodesLayout', () => {
edges: fromJS({
'n1-n4': {id: 'n1-n4', source: 'n1', target: 'n4'}
})
},
singlePortrait6: {
nodes: fromJS({
n1: {id: 'n1'},
n2: {id: 'n2'},
n3: {id: 'n3'},
n4: {id: 'n4'},
n5: {id: 'n5'},
n6: {id: 'n6'}
}),
edges: fromJS({
'n1-n4': {id: 'n1-n4', source: 'n1', target: 'n4'}
})
}
};

beforeEach(() => {
// clear feature flags
window.localStorage.clear();

options = {
nodeCache: makeMap(),
edgeCache: makeMap()
Expand Down Expand Up @@ -121,6 +167,54 @@ describe('NodesLayout', () => {
expect(hasUnseen).toBeTruthy();
});

it('shifts layouts to center', () => {
let xMin;
let xMax;
let yMin;
let yMax;
let xCenter;
let yCenter;

// make sure initial layout is centered
const original = NodesLayout.doLayout(
nodeSets.initial4.nodes,
nodeSets.initial4.edges
);
xMin = original.nodes.minBy(n => n.get('x'));
xMax = original.nodes.maxBy(n => n.get('x'));
yMin = original.nodes.minBy(n => n.get('y'));
yMax = original.nodes.maxBy(n => n.get('y'));
xCenter = (xMin.get('x') + xMax.get('x')) / 2;
yCenter = (yMin.get('y') + yMax.get('y')) / 2;
expect(xCenter).toEqual(NodesLayout.DEFAULT_WIDTH / 2);
expect(yCenter).toEqual(NodesLayout.DEFAULT_HEIGHT / 2);

// make sure re-running is idempotent
const rerun = NodesLayout.shiftLayoutToCenter(original);
xMin = rerun.nodes.minBy(n => n.get('x'));
xMax = rerun.nodes.maxBy(n => n.get('x'));
yMin = rerun.nodes.minBy(n => n.get('y'));
yMax = rerun.nodes.maxBy(n => n.get('y'));
xCenter = (xMin.get('x') + xMax.get('x')) / 2;
yCenter = (yMin.get('y') + yMax.get('y')) / 2;
expect(xCenter).toEqual(NodesLayout.DEFAULT_WIDTH / 2);
expect(yCenter).toEqual(NodesLayout.DEFAULT_HEIGHT / 2);

// shift after window was resized
const shifted = NodesLayout.shiftLayoutToCenter(original, {
width: 128,
height: 256
});
xMin = shifted.nodes.minBy(n => n.get('x'));
xMax = shifted.nodes.maxBy(n => n.get('x'));
yMin = shifted.nodes.minBy(n => n.get('y'));
yMax = shifted.nodes.maxBy(n => n.get('y'));
xCenter = (xMin.get('x') + xMax.get('x')) / 2;
yCenter = (yMin.get('y') + yMax.get('y')) / 2;
expect(xCenter).toEqual(128 / 2);
expect(yCenter).toEqual(256 / 2);
});

it('lays out initial nodeset in a rectangle', () => {
const result = NodesLayout.doLayout(
nodeSets.initial4.nodes,
Expand Down Expand Up @@ -266,7 +360,31 @@ describe('NodesLayout', () => {
it('renders single nodes next to portrait graph', () => {
const result = NodesLayout.doLayout(
nodeSets.singlePortrait.nodes,
nodeSets.singlePortrait.edges);
nodeSets.singlePortrait.edges,
{ noCache: true }
);

nodes = result.nodes.toJS();

// first square row on same level as top-most other node
expect(nodes.n1.y).toEqual(nodes.n2.y);
expect(nodes.n1.y).toEqual(nodes.n3.y);
expect(nodes.n4.y).toEqual(nodes.n5.y);

// all singles right to other nodes
expect(nodes.n1.x).toEqual(nodes.n4.x);
expect(nodes.n1.x).toBeLessThan(nodes.n2.x);
expect(nodes.n1.x).toBeLessThan(nodes.n3.x);
expect(nodes.n1.x).toBeLessThan(nodes.n5.x);
expect(nodes.n2.x).toEqual(nodes.n5.x);
});

it('renders an additional single node in single nodes group', () => {
let result = NodesLayout.doLayout(
nodeSets.singlePortrait.nodes,
nodeSets.singlePortrait.edges,
{ noCache: true }
);

nodes = result.nodes.toJS();

Expand All @@ -281,5 +399,58 @@ describe('NodesLayout', () => {
expect(nodes.n1.x).toBeLessThan(nodes.n3.x);
expect(nodes.n1.x).toBeLessThan(nodes.n5.x);
expect(nodes.n2.x).toEqual(nodes.n5.x);

options.cachedLayout = result;
options.nodeCache = options.nodeCache.merge(result.nodes);
options.edgeCache = options.edgeCache.merge(result.edge);

result = NodesLayout.doLayout(
nodeSets.singlePortrait6.nodes,
nodeSets.singlePortrait6.edges,
options
);

nodes = result.nodes.toJS();

expect(nodes.n1.x).toBeLessThan(nodes.n2.x);
expect(nodes.n1.x).toBeLessThan(nodes.n3.x);
expect(nodes.n1.x).toBeLessThan(nodes.n5.x);
expect(nodes.n1.x).toBeLessThan(nodes.n6.x);
});

it('adds a new node to existing layout in a line', () => {
// feature flag
window.localStorage.setItem('scope-experimental:layout-dance', true);

let result = NodesLayout.doLayout(
nodeSets.rank4.nodes,
nodeSets.rank4.edges,
{ noCache: true }
);

nodes = result.nodes.toJS();

coords = getNodeCoordinates(result.nodes);
options.cachedLayout = result;
options.nodeCache = options.nodeCache.merge(result.nodes);
options.edgeCache = options.edgeCache.merge(result.edge);

expect(NodesLayout.hasNewNodesOfExistingRank(
nodeSets.rank6.nodes,
nodeSets.rank6.edges,
result.nodes)).toBeTruthy();

result = NodesLayout.doLayout(
nodeSets.rank6.nodes,
nodeSets.rank6.edges,
options
);

nodes = result.nodes.toJS();

expect(nodes.n5.x).toBeGreaterThan(nodes.n1.x);
expect(nodes.n5.y).toEqual(nodes.n1.y);
expect(nodes.n6.x).toBeGreaterThan(nodes.n3.x);
expect(nodes.n6.y).toEqual(nodes.n3.y);
});
});
Loading

0 comments on commit 10602d2

Please sign in to comment.