From dc98a58a4016eee04ef51e997d2c70a973567d45 Mon Sep 17 00:00:00 2001 From: Oliver Gupte Date: Thu, 21 May 2020 10:33:23 -0700 Subject: [PATCH] [APM] Fix obscured service map connections (#67129) (#67155) * Closes #67126 by increasing spacingFactor in the cytoscape layout from 0.85 -> 1.2 * - prevents labels from hiding when nodes get a bit smaller - also bump the label font size --- .../apm/public/components/app/ServiceMap/Cytoscape.tsx | 2 +- .../apm/public/components/app/ServiceMap/cytoscapeOptions.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 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 index 67c6cd9978bf..441f4f6bf46b 100644 --- a/x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx +++ b/x-pack/plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx @@ -80,7 +80,7 @@ function getLayoutOptions( roots: selectedRoots.length ? selectedRoots : undefined, fit: true, padding: nodeHeight, - spacingFactor: 0.85, + spacingFactor: 1.2, // @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/cytoscapeOptions.ts b/x-pack/plugins/apm/public/components/app/ServiceMap/cytoscapeOptions.ts index 3ec13a4cde20..67cd688b6d18 100644 --- a/x-pack/plugins/apm/public/components/app/ServiceMap/cytoscapeOptions.ts +++ b/x-pack/plugins/apm/public/components/app/ServiceMap/cytoscapeOptions.ts @@ -117,7 +117,7 @@ const style: cytoscape.Stylesheet[] = [ // theme.euiFontFamily doesn't work here for some reason, so we're just // specifying a subset of the fonts for the label text. 'font-family': 'Inter UI, Segoe UI, Helvetica, Arial, sans-serif', - 'font-size': theme.euiFontSizeXS, + 'font-size': theme.euiFontSizeS, ghost: 'yes', 'ghost-offset-x': 0, 'ghost-offset-y': 2, @@ -127,7 +127,7 @@ const style: cytoscape.Stylesheet[] = [ isService(el) ? el.data(SERVICE_NAME) : el.data(SPAN_DESTINATION_SERVICE_RESOURCE), - 'min-zoomed-font-size': parseInt(theme.euiSizeL, 10), + 'min-zoomed-font-size': parseInt(theme.euiSizeS, 10), 'overlay-opacity': 0, shape: (el: cytoscape.NodeSingular) => isService(el) ? (isIE11 ? 'rectangle' : 'ellipse') : 'diamond',