[APM] Service map center button (#56434)

Add center button for service map.

The fullscreen button is still there until #56351 is merged.

Add fit and padding to the layout animation.

Make the node labels wider so they aren't cut off.

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

@@ -4,12 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useContext, useState, useEffect } from 'react';
 import { EuiButtonIcon, EuiPanel } from '@elastic/eui';
 import theme from '@elastic/eui/dist/eui_theme_light.json';
-import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
+import React, { useContext, useEffect, useState } from 'react';
+import styled from 'styled-components';
 import { CytoscapeContext } from './Cytoscape';
+import { animationOptions, nodeHeight } from './cytoscapeOptions';
 import { FullscreenPanel } from './FullscreenPanel';
 
 const ControlsContainer = styled('div')`
@@ -58,6 +59,17 @@ export function Controls() {
     }
   }, [cy]);
 
+  function center() {
+    if (cy) {
+      const eles = cy.nodes();
+      cy.animate({
+        ...animationOptions,
+        center: { eles },
+        fit: { eles, padding: nodeHeight }
+      });
+    }
+  }
+
   function zoomIn() {
     doZoom(cy, increment);
   }
@@ -82,6 +94,9 @@ export function Controls() {
   const zoomOutLabel = i18n.translate('xpack.apm.serviceMap.zoomOut', {
     defaultMessage: 'Zoom out'
   });
+  const centerLabel = i18n.translate('xpack.apm.serviceMap.center', {
+    defaultMessage: 'Center'
+  });
 
   return (
     <ControlsContainer>
@@ -103,6 +118,15 @@ export function Controls() {
           title={zoomOutLabel}
         />
       </ZoomPanel>
+      <EuiPanel hasShadow={true} paddingSize="none">
+        <Button
+          aria-label={centerLabel}
+          color="text"
+          iconType="crosshairs"
+          onClick={center}
+          title={centerLabel}
+        />
+      </EuiPanel>
       <FullscreenPanel element={mapDomElement} />
     </ControlsContainer>
   );

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

@@ -7,13 +7,23 @@ import theme from '@elastic/eui/dist/eui_theme_light.json';
 import cytoscape from 'cytoscape';
 import { defaultIcon, iconForNode } from './icons';
 
+export const animationOptions: cytoscape.AnimationOptions = {
+  duration: parseInt(theme.euiAnimSpeedNormal, 10),
+  // @ts-ignore The cubic-bezier options here are not recognized by the cytoscape types
+  easing: theme.euiAnimSlightBounce
+};
+
+export const nodeHeight = parseInt(theme.avatarSizing.l.size, 10);
+
 const layout = {
   name: 'dagre',
   nodeDimensionsIncludeLabels: true,
   rankDir: 'LR',
   animate: true,
-  animationEasing: theme.euiAnimSlightBounce,
-  animationDuration: parseInt(theme.euiAnimSpeedNormal, 10)
+  animationEasing: animationOptions.easing,
+  animationDuration: animationOptions.duration,
+  fit: true,
+  padding: nodeHeight
 };
 
 function isService(el: cytoscape.NodeSingular) {
@@ -45,7 +55,7 @@ const style: cytoscape.Stylesheet[] = [
       // specifying a subset of the fonts for the label text.
       'font-family': 'Inter UI, Segoe UI, Helvetica, Arial, sans-serif',
       'font-size': theme.euiFontSizeXS,
-      height: theme.avatarSizing.l.size,
+      height: nodeHeight,
       label: 'data(label)',
       'min-zoomed-font-size': theme.euiSizeL,
       'overlay-opacity': 0,
@@ -56,7 +66,7 @@ const style: cytoscape.Stylesheet[] = [
       'text-background-padding': theme.paddingSizes.xs,
       'text-background-shape': 'roundrectangle',
       'text-margin-y': theme.paddingSizes.s,
-      'text-max-width': '85px',
+      'text-max-width': '200px',
       'text-valign': 'bottom',
       'text-wrap': 'ellipsis',
       width: theme.avatarSizing.l.size