[APM] Don't trigger map layout if no elements (#66625)

smith · smith · commit 2ae6a78c01d8 · 2020-05-14T16:32:24.000-05:00
After simplyfying the layout mechanism in #66438, we made it so the `data` event handler would run even if there are no elements. This causes the `layoutstop` handler to run as well, but if we have multiple renders with no elements, multiple `layoutstop` events would by triggered after the elements were loaded, causing the map to jump around, which is especially visible with a single node. Fixes #66528.
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx
@@ -146,7 +146,7 @@ export function Cytoscape({
     };
 
     const dataHandler: cytoscape.EventHandler = event => {
-      if (cy) {
+      if (cy && cy.elements().length > 0) {
         if (serviceName) {
           resetConnectedEdgeStyle(cy.getElementById(serviceName));
           // Add the "primary" class to the node if its id matches the serviceName.
