Map layout changes

x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx

@@ -4,24 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import cytoscape from 'cytoscape';
+import dagre from 'cytoscape-dagre';
+import isEqual from 'lodash/isEqual';
 import React, {
   createContext,
   CSSProperties,
+  memo,
   ReactNode,
   useEffect,
   useRef,
   useState,
 } from 'react';
-import cytoscape from 'cytoscape';
-import dagre from 'cytoscape-dagre';
-import { debounce } from 'lodash';
 import { useTheme } from '../../../hooks/useTheme';
-import {
-  getAnimationOptions,
-  getCytoscapeOptions,
-  getNodeHeight,
-} from './cytoscapeOptions';
-import { useUiTracker } from '../../../../../observability/public';
+import { getCytoscapeOptions } from './cytoscapeOptions';
+import { useCytoscapeEventHandlers } from './use_cytoscape_event_handlers';
 
 cytoscape.use(dagre);
 
@@ -59,49 +56,7 @@ function useCytoscape(options: cytoscape.CytoscapeOptions) {
   return [ref, cy] as [React.MutableRefObject<any>, cytoscape.Core | undefined];
 }
 
-function getLayoutOptions(nodeHeight: number): cytoscape.LayoutOptions {
-  return {
-    name: 'dagre',
-    fit: true,
-    padding: nodeHeight,
-    spacingFactor: 1.2,
-    // @ts-ignore
-    nodeSep: nodeHeight,
-    edgeSep: 32,
-    rankSep: 128,
-    rankDir: 'LR',
-    ranker: 'network-simplex',
-  };
-}
-
-/*
- * @notice
- * This product includes code in the function applyCubicBezierStyles that was
- * inspired by a public Codepen, which was available under a "MIT" license.
- *
- * Copyright (c) 2020 by Guillaume (https://codepen.io/guillaumethomas/pen/xxbbBKO)
- * MIT License http://www.opensource.org/licenses/mit-license
- */
-function applyCubicBezierStyles(edges: cytoscape.EdgeCollection) {
-  edges.forEach((edge) => {
-    const { x: x0, y: y0 } = edge.source().position();
-    const { x: x1, y: y1 } = edge.target().position();
-    const x = x1 - x0;
-    const y = y1 - y0;
-    const z = Math.sqrt(x * x + y * y);
-    const costheta = z === 0 ? 0 : x / z;
-    const alpha = 0.25;
-    // Two values for control-point-distances represent a pair symmetric quadratic
-    // bezier curves joined in the middle as a seamless cubic bezier curve:
-    edge.style('control-point-distances', [
-      -alpha * y * costheta,
-      alpha * y * costheta,
-    ]);
-    edge.style('control-point-weights', [alpha, 1 - alpha]);
-  });
-}
-
-export function Cytoscape({
+function CytoscapeComponent({
   children,
   elements,
   height,
@@ -113,131 +68,31 @@ export function Cytoscape({
     ...getCytoscapeOptions(theme),
     elements,
   });
+  useCytoscapeEventHandlers({ cy, serviceName, theme });
 
-  const nodeHeight = getNodeHeight(theme);
-
-  // Add the height to the div style. The height is a separate prop because it
-  // is required and can trigger rendering when changed.
-  const divStyle = { ...style, height };
-
-  const trackApmEvent = useUiTracker({ app: 'apm' });
-
-  // Set up cytoscape event handlers
+  // Add items from the elements prop to the cytoscape collection and remove
+  // items that no longer are in the list, then trigger an event to notify
+  // the handlers that data has changed.
   useEffect(() => {
-    const resetConnectedEdgeStyle = (node?: cytoscape.NodeSingular) => {
-      if (cy) {
-        cy.edges().removeClass('highlight');
-
-        if (node) {
-          node.connectedEdges().addClass('highlight');
-        }
-      }
-    };
+    if (cy && elements.length > 0) {
+      // We do a fit if we're going from 0 to >0 elements
+      const fit = cy.elements().length === 0;
 
-    const dataHandler: cytoscape.EventHandler = (event) => {
-      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.
-          if (cy.nodes().length > 0) {
-            cy.nodes().removeClass('primary');
-            cy.getElementById(serviceName).addClass('primary');
-          }
-        } else {
-          resetConnectedEdgeStyle();
-        }
-        cy.layout(getLayoutOptions(nodeHeight)).run();
-      }
-    };
-    let layoutstopDelayTimeout: NodeJS.Timeout;
-    const layoutstopHandler: cytoscape.EventHandler = (event) => {
-      // This 0ms timer is necessary to prevent a race condition
-      // between the layout finishing rendering and viewport centering
-      layoutstopDelayTimeout = setTimeout(() => {
-        if (serviceName) {
-          event.cy.animate({
-            ...getAnimationOptions(theme),
-            fit: {
-              eles: event.cy.elements(),
-              padding: nodeHeight,
-            },
-            center: {
-              eles: event.cy.getElementById(serviceName),
-            },
-          });
-        } else {
-          event.cy.fit(undefined, nodeHeight);
-        }
-      }, 0);
-      applyCubicBezierStyles(event.cy.edges());
-    };
-    // debounce hover tracking so it doesn't spam telemetry with redundant events
-    const trackNodeEdgeHover = debounce(
-      () => trackApmEvent({ metric: 'service_map_node_or_edge_hover' }),
-      1000
-    );
-    const mouseoverHandler: cytoscape.EventHandler = (event) => {
-      trackNodeEdgeHover();
-      event.target.addClass('hover');
-      event.target.connectedEdges().addClass('nodeHover');
-    };
-    const mouseoutHandler: cytoscape.EventHandler = (event) => {
-      event.target.removeClass('hover');
-      event.target.connectedEdges().removeClass('nodeHover');
-    };
-    const selectHandler: cytoscape.EventHandler = (event) => {
-      trackApmEvent({ metric: 'service_map_node_select' });
-      resetConnectedEdgeStyle(event.target);
-    };
-    const unselectHandler: cytoscape.EventHandler = (event) => {
-      resetConnectedEdgeStyle(
-        serviceName ? event.cy.getElementById(serviceName) : undefined
-      );
-    };
-    const debugHandler: cytoscape.EventHandler = (event) => {
-      const debugEnabled = sessionStorage.getItem('apm_debug') === 'true';
-      if (debugEnabled) {
-        // eslint-disable-next-line no-console
-        console.debug('cytoscape:', event);
-      }
-    };
-    const dragHandler: cytoscape.EventHandler = (event) => {
-      applyCubicBezierStyles(event.target.connectedEdges());
-    };
-
-    if (cy) {
-      cy.on('data layoutstop select unselect', debugHandler);
-      cy.on('data', dataHandler);
-      cy.on('layoutstop', layoutstopHandler);
-      cy.on('mouseover', 'edge, node', mouseoverHandler);
-      cy.on('mouseout', 'edge, node', mouseoutHandler);
-      cy.on('select', 'node', selectHandler);
-      cy.on('unselect', 'node', unselectHandler);
-      cy.on('drag', 'node', dragHandler);
-
-      cy.remove(cy.elements());
       cy.add(elements);
-      cy.trigger('data');
+      // Remove any old elements that don't exist in the new set of elements.
+      const elementIds = elements.map((element) => element.data.id);
+      cy.elements().forEach((element) => {
+        if (!elementIds.includes(element.data('id'))) {
+          cy.remove(element);
+        }
+      });
+      cy.trigger('custom:data', [fit]);
     }
+  }, [cy, elements]);
 
-    return () => {
-      if (cy) {
-        cy.removeListener(
-          'data layoutstop select unselect',
-          undefined,
-          debugHandler
-        );
-        cy.removeListener('data', undefined, dataHandler);
-        cy.removeListener('layoutstop', undefined, layoutstopHandler);
-        cy.removeListener('mouseover', 'edge, node', mouseoverHandler);
-        cy.removeListener('mouseout', 'edge, node', mouseoutHandler);
-        cy.removeListener('select', 'node', selectHandler);
-        cy.removeListener('unselect', 'node', unselectHandler);
-        cy.removeListener('drag', 'node', dragHandler);
-      }
-      clearTimeout(layoutstopDelayTimeout);
-    };
-  }, [cy, elements, height, serviceName, trackApmEvent, nodeHeight, theme]);
+  // Add the height to the div style. The height is a separate prop because it
+  // is required and can trigger rendering when changed.
+  const divStyle = { ...style, height };
 
   return (
     <CytoscapeContext.Provider value={cy}>
@@ -247,3 +102,20 @@ export function Cytoscape({
     </CytoscapeContext.Provider>
   );
 }
+
+export const Cytoscape = memo(CytoscapeComponent, (prevProps, nextProps) => {
+  const prevElementIds = prevProps.elements
+    .map((element) => element.data.id)
+    .sort();
+  const nextElementIds = nextProps.elements
+    .map((element) => element.data.id)
+    .sort();
+
+  const propsAreEqual =
+    prevProps.height === nextProps.height &&
+    prevProps.serviceName === nextProps.serviceName &&
+    isEqual(prevProps.style, nextProps.style) &&
+    isEqual(prevElementIds, nextElementIds);
+
+  return propsAreEqual;
+});

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/index.tsx

@@ -70,15 +70,15 @@ export function Popover({ focusedServiceName }: PopoverProps) {
     if (cy) {
       cy.on('select', 'node', selectHandler);
       cy.on('unselect', 'node', deselect);
-      cy.on('data viewport', deselect);
+      cy.on('viewport', deselect);
       cy.on('drag', 'node', deselect);
     }
 
     return () => {
       if (cy) {
         cy.removeListener('select', 'node', selectHandler);
         cy.removeListener('unselect', 'node', deselect);
-        cy.removeListener('data viewport', undefined, deselect);
+        cy.removeListener('viewport', undefined, deselect);
         cy.removeListener('drag', 'node', deselect);
       }
     };