Make global service map zoom toward center (#61340)

* Make global service map zoom toward center

Calculate the center of the graph when there's not a primary node.

Also update to latest version of types.

Fixes #61176.

* Fix types

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

@@ -41,9 +41,17 @@ const steps = 5;
 function doZoom(cy: cytoscape.Core | undefined, increment: number) {
   if (cy) {
     const level = cy.zoom() + increment;
+    // @ts-ignore `.position()` _does_ work on a NodeCollection. It returns the position of the first element in the collection.
+    const primaryCenter = cy.nodes('.primary').position();
+    const { x1, y1, w, h } = cy.nodes().boundingBox({});
+    const graphCenter = { x: x1 + w / 2, y: y1 + h / 2 };
+
     cy.animate({
       duration,
-      zoom: { level, position: cy.$('.primary').position() }
+      zoom: {
+        level,
+        position: primaryCenter || graphCenter
+      }
     });
   }
 }

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

@@ -62,15 +62,15 @@ const style: cytoscape.Stylesheet[] = [
         isService(el)
           ? el.data(SERVICE_NAME)
           : el.data(SPAN_DESTINATION_SERVICE_RESOURCE),
-      'min-zoomed-font-size': theme.euiSizeL,
+      'min-zoomed-font-size': parseInt(theme.euiSizeL, 10),
       'overlay-opacity': 0,
       shape: (el: cytoscape.NodeSingular) =>
         isService(el) ? 'ellipse' : 'diamond',
       'text-background-color': theme.euiColorLightestShade,
       'text-background-opacity': 0,
       'text-background-padding': theme.paddingSizes.xs,
       'text-background-shape': 'roundrectangle',
-      'text-margin-y': theme.paddingSizes.s,
+      'text-margin-y': parseInt(theme.paddingSizes.s, 10),
       'text-max-width': '200px',
       'text-valign': 'bottom',
       'text-wrap': 'ellipsis',
@@ -105,8 +105,8 @@ const style: cytoscape.Stylesheet[] = [
       'source-arrow-color': lineColor,
       'target-arrow-shape': 'triangle',
       // @ts-ignore
-      'source-distance-from-node': theme.paddingSizes.xs,
-      'target-distance-from-node': theme.paddingSizes.xs
+      'source-distance-from-node': parseInt(theme.paddingSizes.xs, 10),
+      'target-distance-from-node': parseInt(theme.paddingSizes.xs, 10)
     }
   },
   // @ts-ignore DefinitelyTyped says visibility is "none" but it's

x-pack/package.json

@@ -50,7 +50,7 @@
     "@types/cheerio": "^0.22.10",
     "@types/chroma-js": "^1.4.2",
     "@types/color": "^3.0.0",
-    "@types/cytoscape": "^3.8.2",
+    "@types/cytoscape": "^3.14.0",
     "@types/d3-array": "^1.2.7",
     "@types/d3-scale": "^2.1.1",
     "@types/d3-shape": "^1.3.1",

yarn.lock

@@ -3726,10 +3726,10 @@
     "@types/cp-file" "*"
     "@types/glob" "*"
 
-"@types/cytoscape@^3.8.2":
-  version "3.8.2"
-  resolved "https://registry.yarnpkg.com/@types/cytoscape/-/cytoscape-3.8.2.tgz#428e85e12fb8dba94b05b1b1a8b04fd6f91b9c2d"
-  integrity sha512-b9n8dwMnU+64++Vky7bfab3Fod6JRbhZRrRJgnyKd03sh/vgNYHsq9N3W1MlU32d3AanxWUDH/1+jC+l5V9BeQ==
+"@types/cytoscape@^3.14.0":
+  version "3.14.0"
+  resolved "https://registry.yarnpkg.com/@types/cytoscape/-/cytoscape-3.14.0.tgz#346b5430a7a1533784bcf44fcbe6c5255b948d36"
+  integrity sha512-qOhhZFGb35457vmCu9YHqwjqleraSAEikaIFmMUPWzTC7FrwkS7VR/6ymqRHW7Z8wivHuzsZDYCoePIepd69qg==
 
 "@types/d3-array@^1.2.7":
   version "1.2.7"