From 7f23e505358aab3a911d6a68a81f36502ed49972 Mon Sep 17 00:00:00 2001 From: Oliver Gupte Date: Wed, 20 May 2020 09:46:43 -0700 Subject: [PATCH 1/2] Closes #67126 by increasing spacingFactor in the cytoscape layout from 0.85 -> 1.2 --- .../plugins/apm/public/components/app/ServiceMap/Cytoscape.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 67c6cd9978bf19..441f4f6bf46b42 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. From dc316a09901112b376c1e91582f5716ff36f32c0 Mon Sep 17 00:00:00 2001 From: Oliver Gupte Date: Wed, 20 May 2020 17:00:01 -0700 Subject: [PATCH 2/2] - prevents labels from hiding when nodes get a bit smaller - also bump the label font size --- .../apm/public/components/app/ServiceMap/cytoscapeOptions.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 3ec13a4cde20de..67cd688b6d188b 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',