From 99c382fdacd68f4d791dfbb3cad8f60736cd04f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Casper=20H=C3=BCbertz?= Date: Tue, 28 Apr 2020 09:33:55 +0200 Subject: [PATCH] [APM] Service maps: Improve the selected node style (#64279) * [APM] Set the text color of the selected state * [APM] Show label background on selected state --- .../components/app/ServiceMap/cytoscapeOptions.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/cytoscapeOptions.ts b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/cytoscapeOptions.ts index eb71994bd2e4..e9942a327b69 100644 --- a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/cytoscapeOptions.ts +++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/cytoscapeOptions.ts @@ -60,7 +60,10 @@ const style: cytoscape.Stylesheet[] = [ ? theme.euiColorPrimary : theme.euiColorMediumShade, 'border-width': 2, - color: theme.textColors.text, + color: (el: cytoscape.NodeSingular) => + el.hasClass('primary') || el.selected() + ? theme.euiColorPrimaryText + : theme.textColors.text, // 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', @@ -78,8 +81,9 @@ const style: cytoscape.Stylesheet[] = [ 'overlay-opacity': 0, shape: (el: cytoscape.NodeSingular) => isService(el) ? (isIE11 ? 'rectangle' : 'ellipse') : 'diamond', - 'text-background-color': theme.euiColorLightestShade, - 'text-background-opacity': 0, + 'text-background-color': theme.euiColorPrimary, + 'text-background-opacity': (el: cytoscape.NodeSingular) => + el.hasClass('primary') || el.selected() ? 0.1 : 0, 'text-background-padding': theme.paddingSizes.xs, 'text-background-shape': 'roundrectangle', 'text-margin-y': parseInt(theme.paddingSizes.s, 10),