Add animation to service map layout (elastic#56042)

We had previously deleted the animation because the method we were using for adding nodes to the map would wipe the whole map out before redrawing it and make for very awkward animation. The way it works now is the Cytoscape component calls `add` on the cytoscape instance when new elements are added, so the animation looks ok. Fixes elastic#54796. Co-authored-by: Elastic Machine <[email protected]>
smith · Jan 31, 2020 · 547e877 · 547e877
1 parent cf19b86
commit 547e877
Showing 1 changed file with 4 additions and 1 deletion.
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/cytoscapeOptions.ts b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/cytoscapeOptions.ts
@@ -10,7 +10,10 @@ import { defaultIcon, iconForNode } from './icons';
 const layout = {
   name: 'dagre',
   nodeDimensionsIncludeLabels: true,
-  rankDir: 'LR'
+  rankDir: 'LR',
+  animate: true,
+  animationEasing: theme.euiAnimSlightBounce,
+  animationDuration: parseInt(theme.euiAnimSpeedNormal, 10)
 };
 
 function isService(el: cytoscape.NodeSingular) {