Simplify service map layout

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

@@ -77,6 +77,14 @@ storiesOf('app/ServiceMap/Cytoscape', module)
         { data: { id: 'default' } },
         { data: { id: 'cache', label: 'cache', 'span.type': 'cache' } },
         { data: { id: 'database', label: 'database', 'span.type': 'db' } },
+        {
+          data: {
+            id: 'elasticsearch',
+            label: 'elasticsearch',
+            'span.type': 'db',
+            'span.subtype': 'elasticsearch'
+          }
+        },
         {
           data: { id: 'external', label: 'external', 'span.type': 'external' }
         },

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

@@ -9,7 +9,6 @@ import React, {
   createContext,
   CSSProperties,
   ReactNode,
-  useCallback,
   useEffect,
   useRef,
   useState
@@ -109,36 +108,36 @@ export function Cytoscape({
   serviceName,
   style
 }: CytoscapeProps) {
-  const initialElements = elements.map(element => ({
-    ...element,
-    // prevents flash of unstyled elements
-    classes: [element.classes, 'invisible'].join(' ').trim()
-  }));
-
   const [ref, cy] = useCytoscape({
     ...cytoscapeOptions,
-    elements: initialElements
+    elements
   });
 
   // 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 resetConnectedEdgeStyle = useCallback(
-    (node?: cytoscape.NodeSingular) => {
+  // Trigger a custom "data" event when data changes
+  useEffect(() => {
+    if (cy && elements.length > 0) {
+      cy.add(elements);
+      cy.trigger('data');
+    }
+  }, [cy, elements]);
+
+  // Set up cytoscape event handlers
+  useEffect(() => {
+    const resetConnectedEdgeStyle = (node?: cytoscape.NodeSingular) => {
       if (cy) {
         cy.edges().removeClass('highlight');
 
         if (node) {
           node.connectedEdges().addClass('highlight');
         }
       }
-    },
-    [cy]
-  );
+    };
 
-  const dataHandler = useCallback<cytoscape.EventHandler>(
-    event => {
+    const dataHandler: cytoscape.EventHandler = event => {
       if (cy) {
         if (serviceName) {
           resetConnectedEdgeStyle(cy.getElementById(serviceName));
@@ -150,36 +149,25 @@ export function Cytoscape({
         } else {
           resetConnectedEdgeStyle();
         }
-        if (event.cy.elements().length > 0) {
-          const selectedRoots = selectRoots(event.cy);
-          const layout = cy.layout(
-            getLayoutOptions(selectedRoots, height, width)
-          );
-          layout.one('layoutstop', () => {
-            if (serviceName) {
-              const focusedNode = cy.getElementById(serviceName);
-              cy.center(focusedNode);
-            }
-            // show elements after layout is applied
-            cy.elements().removeClass('invisible');
-          });
-          layout.run();
-        }
-      }
-    },
-    [cy, resetConnectedEdgeStyle, serviceName, height, width]
-  );
 
-  // Trigger a custom "data" event when data changes
-  useEffect(() => {
-    if (cy) {
-      cy.add(elements);
-      cy.trigger('data');
-    }
-  }, [cy, elements]);
+        const selectedRoots = selectRoots(event.cy);
+        const layout = cy.layout(
+          getLayoutOptions(selectedRoots, height, width)
+        );
 
-  // Set up cytoscape event handlers
-  useEffect(() => {
+        layout.run();
+      }
+    };
+    const layoutstopHandler: cytoscape.EventHandler = event => {
+      event.cy.animate({
+        ...animationOptions,
+        center: {
+          eles: serviceName
+            ? event.cy.getElementById(serviceName)
+            : event.cy.collection()
+        }
+      });
+    };
     const mouseoverHandler: cytoscape.EventHandler = event => {
       event.target.addClass('hover');
       event.target.connectedEdges().addClass('nodeHover');
@@ -194,10 +182,18 @@ export function Cytoscape({
     const unselectHandler: cytoscape.EventHandler = event => {
       resetConnectedEdgeStyle();
     };
+    const debugHandler: cytoscape.EventHandler = event => {
+      const debugEnabled = sessionStorage.getItem('apm_debug') === 'true';
+      if (debugEnabled) {
+        // eslint-disable-next-line no-console
+        console.debug('cytoscape:', event);
+      }
+    };
 
     if (cy) {
+      cy.on('data layoutstop select unselect', debugHandler);
       cy.on('data', dataHandler);
-      cy.ready(dataHandler);
+      cy.on('layoutstop', layoutstopHandler);
       cy.on('mouseover', 'edge, node', mouseoverHandler);
       cy.on('mouseout', 'edge, node', mouseoutHandler);
       cy.on('select', 'node', selectHandler);
@@ -207,15 +203,19 @@ export function Cytoscape({
     return () => {
       if (cy) {
         cy.removeListener(
-          'data',
+          'data layoutstop select unselect',
           undefined,
-          dataHandler as cytoscape.EventHandler
+          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, dataHandler, resetConnectedEdgeStyle, serviceName]);
+  }, [cy, height, serviceName, width]);
 
   return (
     <CytoscapeContext.Provider value={cy}>

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

@@ -17,6 +17,7 @@ import React, {
 import { SERVICE_NAME } from '../../../../../../../../plugins/apm/common/elasticsearch_fieldnames';
 import { CytoscapeContext } from '../Cytoscape';
 import { Contents } from './Contents';
+import { animationOptions } from '../cytoscapeOptions';
 
 interface PopoverProps {
   focusedServiceName?: string;
@@ -88,7 +89,10 @@ export function Popover({ focusedServiceName }: PopoverProps) {
 
   const centerSelectedNode = useCallback(() => {
     if (cy) {
-      cy.center(cy.getElementById(selectedNodeServiceName));
+      cy.animate({
+        ...animationOptions,
+        center: { eles: cy.getElementById(selectedNodeServiceName) }
+      });
     }
   }, [cy, selectedNodeServiceName]);
 

x-pack/legacy/plugins/apm/public/components/app/ServiceMap/cytoscapeOptions.ts

@@ -113,11 +113,6 @@ const style: cytoscape.Stylesheet[] = [
     selector: 'edge[isInverseEdge]',
     style: { visibility: 'hidden' }
   },
-  // @ts-ignore
-  {
-    selector: '.invisible',
-    style: { visibility: 'hidden' }
-  },
   {
     selector: 'edge.nodeHover',
     style: {

x-pack/legacy/plugins/apm/public/components/app/ServiceMap/icons.ts

@@ -8,12 +8,14 @@ import cytoscape from 'cytoscape';
 import {
   AGENT_NAME,
   SERVICE_NAME,
-  SPAN_TYPE
+  SPAN_TYPE,
+  SPAN_SUBTYPE
 } from '../../../../../../../plugins/apm/common/elasticsearch_fieldnames';
 import databaseIcon from './icons/database.svg';
 import defaultIconImport from './icons/default.svg';
 import documentsIcon from './icons/documents.svg';
 import dotNetIcon from './icons/dot-net.svg';
+import elasticsearchIcon from './icons/elasticsearch.svg';
 import globeIcon from './icons/globe.svg';
 import goIcon from './icons/go.svg';
 import javaIcon from './icons/java.svg';
@@ -63,6 +65,11 @@ export function iconForNode(node: cytoscape.NodeSingular) {
     return serviceIcons[node.data(AGENT_NAME) as string];
   } else if (isIE11) {
     return defaultIcon;
+  } else if (
+    node.data(SPAN_TYPE) === 'db' &&
+    node.data(SPAN_SUBTYPE) === 'elasticsearch'
+  ) {
+    return elasticsearchIcon;
   } else if (icons[type]) {
     return icons[type];
   } else {