From 5b6cd727488228992cd0cf15101f2f7163854765 Mon Sep 17 00:00:00 2001 From: Nathan L Smith Date: Mon, 27 Jan 2020 12:23:23 -0600 Subject: [PATCH] Add animation to service map layout 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 #54796. --- .../apm/public/components/app/ServiceMap/cytoscapeOptions.ts | 5 ++++- 1 file changed, 4 insertions(+), 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 index 1a6247388a655..a243021ddc5fd 100644 --- 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) {