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

* [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 #66695
elastic · May 15, 2020 · c0b3a10 · c0b3a10
1 parent c4d249d
commit c0b3a10
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;
@@ -88,14 +89,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;
 
@@ -111,7 +116,9 @@ export function Popover({ focusedServiceName }: PopoverProps) {
  <Contents
  isService={isService}
  label={label}
- onFocusClick={isAlreadyFocused ? centerSelectedNode : deselect}
+ onFocusClick={
+ isAlreadyFocused ? centerSelectedNode : _event => deselect()
+ }
  selectedNodeData={selectedNodeData}
  selectedNodeServiceName={selectedNodeServiceName}
  />