[APM] Disable map layout animation

Don't animate the layout. Keep animation for centering/zoom. `preventDefault` when centering an already focused node so it doesn't do an unnecessary navigation. Fixes elastic#66695
smith · May 15, 2020 · 19179c1 · 19179c1
1 parent 0cc5d13
commit 19179c1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx
@@ -81,9 +81,6 @@ function getLayoutOptions(
     fit: true,
     padding: nodeHeight,
     spacingFactor: 0.85,
-    animate: true,
-    animationEasing: animationOptions.easing,
-    animationDuration: animationOptions.duration,
     // @ts-ignore
     // Rotate nodes counter-clockwise to transform layout from top→bottom to left→right.
     // The extra 5° achieves the effect of separating overlapping taxi-styled edges.

diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/index.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/index.tsx
@@ -87,14 +87,18 @@ export function Popover({ focusedServiceName }: PopoverProps) {
     }
   }, [popoverRef, x, y]);
 
-  const centerSelectedNode = useCallback(() => {
-    if (cy) {
-      cy.animate({
-        ...animationOptions,
-        center: { eles: cy.getElementById(selectedNodeServiceName) }
-      });
-    }
-  }, [cy, selectedNodeServiceName]);
+  const centerSelectedNode = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      if (cy) {
+        cy.animate({
+          ...animationOptions,
+          center: { eles: cy.getElementById(selectedNodeServiceName) }
+        });
+      }
+    },
+    [cy, selectedNodeServiceName]
+  );
 
   const isAlreadyFocused = focusedServiceName === selectedNodeServiceName;