[APM] Disable map layout animation (elastic#66763)

* [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 · be9c41b · be9c41b
1 parent 5627897
commit be9c41b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 15 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/Contents.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Contents.tsx
@@ -15,7 +15,7 @@ import {
 import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
 import cytoscape from 'cytoscape';
-import React from 'react';
+import React, { MouseEvent } from 'react';
 import styled from 'styled-components';
 import { fontSize, px } from '../../../../style/variables';
 import { Buttons } from './Buttons';
@@ -31,7 +31,7 @@ const popoverMinWidth = 280;
 interface ContentsProps {
   isService: boolean;
   label: string;
-  onFocusClick: () => void;
+  onFocusClick: (event: MouseEvent<HTMLAnchorElement>) => void;
   selectedNodeData: cytoscape.NodeDataDefinition;
   selectedNodeServiceName: string;
 }

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
@@ -8,6 +8,7 @@ import { EuiPopover } from '@elastic/eui';
 import cytoscape from 'cytoscape';
 import React, {
   CSSProperties,
+  MouseEvent,
   useCallback,
   useContext,
   useEffect,
@@ -16,8 +17,8 @@ import React, {
 } from 'react';
 import { SERVICE_NAME } from '../../../../../common/elasticsearch_fieldnames';
 import { CytoscapeContext } from '../Cytoscape';
-import { Contents } from './Contents';
 import { animationOptions } from '../cytoscapeOptions';
+import { Contents } from './Contents';
 
 interface PopoverProps {
   focusedServiceName?: string;
@@ -87,14 +88,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;
 
@@ -110,7 +115,9 @@ export function Popover({ focusedServiceName }: PopoverProps) {
       <Contents
         isService={isService}
         label={label}
-        onFocusClick={isAlreadyFocused ? centerSelectedNode : deselect}
+        onFocusClick={
+          isAlreadyFocused ? centerSelectedNode : _event => deselect()
+        }
         selectedNodeData={selectedNodeData}
         selectedNodeServiceName={selectedNodeServiceName}
       />