[APM] Service map Popover and Node Details with react flow by jennypavlova · Pull Request #251055 · elastic/kibana

jennypavlova · 2026-01-30T12:45:19Z

Closes #250209

Summary

This PR adds all popovers in service map:

Service Node popover
- With Anomaly detection + dark theme:
Dependecy Node popover
Edge/Connection popover
Group popover

How to test

Verify that the Cytoscape service map is visible berfore adding the feature flag
Add xpack.apm.featureFlags.serviceMapUseReactFlow: true to the kibana.dev.yml ⚠️ Might change if [APM] Service map with react flow: Change from APM feature flags to platform #250783 is merged before this one ⚠️
Verify the nodes and edges are rendered and highlighted on click
Verify the nodes and edges are visible and clickable (all popovers should be visible for service, dependency, group, connection
Verify that the dark mode is supported

How to run the scout tests

Start the server with the React Flow feature flag enabled:

node scripts/scout.js start-server --serverless=oblt --config-dir react_flow_service_map

Run the React Flow tests:

npx playwright test --config=x-pack/solutions/observability/plugins/apm/test/scout_react_flow_service_map/ui/parallel.playwright.config.ts --grep=@svlOblt --project=local

elasticmachine · 2026-01-30T12:45:24Z

Pinging @elastic/obs-presentation-team (Team:obs-presentation)

crespocarlos

Awesome!! I found some small issues

Span group is not getting the span details correctly:

current	new

The popover stays open even after the focus leaves the node:

current

old_popover.mov

new

new_popover.mov

The popovers are also missing the \/

current	new

crespocarlos · 2026-01-30T13:10:18Z

.../plugins/apm/public/components/app/service_map/react_flow_service_map/react_flow_popover.tsx

+    ? `${selectedEdge.source} → ${selectedEdge.target}`
+    : selectedNodeId ?? '';
+
+  const trigger = <div style={{ width: 1, height: 1, visibility: 'hidden' }} />;


Should we add an aria-hidden here?

Suggested change

const trigger = <div style={{ width: 1, height: 1, visibility: 'hidden' }} />;

const trigger = <div style={{ width: 1, height: 1, visibility: 'hidden' }} aria-hidden="true"/>;

Nice, thanks. added ✅

crespocarlos · 2026-01-30T13:11:27Z

.../plugins/apm/public/components/app/service_map/react_flow_service_map/react_flow_popover.tsx

+    [SPAN_TYPE]: 'spanType' in nodeData ? nodeData.spanType : undefined,
+    spanType: 'spanType' in nodeData ? nodeData.spanType : undefined,


maybe we can store 'spanType' in nodeData ? nodeData.spanType : undefined in a variable and reuse it?

also, do we need SPAN_TYPE and spanType

crespocarlos · 2026-01-30T13:12:21Z

...ty/plugins/apm/public/components/app/service_map/react_flow_service_map/react_flow_graph.tsx

+  /** Currently focused service name (for service-specific map) */
+  serviceName?: string;
+  /** Environment filter */
+  environment: Environment;
+  /** KQL filter */
+  kuery: string;
+  /** Start time */
+  start: string;
+  /** End time */
+  end: string;


nit: do we need these comments?

Removed ✅

crespocarlos · 2026-01-30T13:19:51Z

...ty/plugins/apm/public/components/app/service_map/react_flow_service_map/react_flow_graph.tsx

+    setSelectedNodeForPopover(null);
+    setSelectedEdgeForPopover(null);


Q: why do we need to set both edge and node? Wouldn't edge be sufficient?

I don't think I understand the question: I think we should reset both by design if I understood the requirements correctly 🤔

crespocarlos · 2026-01-30T13:24:07Z

...ions/observability/plugins/apm/public/components/app/service_map/popover/popover_content.tsx

+    excludeEdges,
+  });
+
+  const handleDiagnoseClick = () => setIsDiagnosticFlyoutOpen(true);


useCallback?

crespocarlos · 2026-01-30T13:30:46Z

.../plugins/apm/public/components/app/service_map/react_flow_service_map/react_flow_popover.tsx

+  if (nodeData.isService) {
+    const serviceData = nodeData as ServiceNodeData;


Should we use type guards here? I think we already have one for this case, right?

crespocarlos · 2026-01-30T13:31:04Z

.../plugins/apm/public/components/app/service_map/react_flow_service_map/react_flow_popover.tsx

+  if ('isGrouped' in nodeData && nodeData.isGrouped) {
+    const groupedData = nodeData as GroupedNodeData;


We could use type guards here too

crespocarlos · 2026-01-30T13:41:41Z

.../plugins/apm/public/components/app/service_map/react_flow_service_map/react_flow_popover.tsx

+    const viewport = reactFlowInstance.getViewport();
+    const zoom = viewport.zoom;


Is the intention here to not recalculate the style when the viewport changes? Asking because if we need to reclaculate we probably need to pass the viewport as a dependency of this useMemo. We could probably use the useViewPort hook from react flow if we want to do that

I like the look and fill if we keep the same position and don't recalculate the viewport also performance-wise is better. But if you see a benefit in doing so I am Ok to change it - just that it will have a "jumping" behaviour if we do so and now it feels smoother IMO (from a UX point of view, also using the buttons to zoom will close the flyout anyway and I also need to fix the other bug you found with the focus change when moving/dragging the map position) This is the current version:

zoom_sm.mov

crespocarlos · 2026-01-30T13:43:21Z

.../plugins/apm/public/components/app/service_map/react_flow_service_map/react_flow_popover.tsx

+  const reactFlowInstance = useReactFlow();
+
+  const nodeData = selectedNode?.data;
+  const selectedNodeId = selectedNode?.id;


nit: selectedNodeId is only used once. we could use selectedNode?.id directly

I use it 2 times (line 203 and 213) 🤔

crespocarlos · 2026-01-30T13:46:13Z

...lugins/apm/public/components/app/service_map/react_flow_service_map/use_edge_highlighting.ts

+            stroke: isHighlighted ? primaryColor : defaultEdgeColor,
+            strokeWidth: isHighlighted ? HIGHLIGHTED_STROKE_WIDTH : DEFAULT_STROKE_WIDTH,


if edge.style has other attributes, we're losing them.

Suggested change

stroke: isHighlighted ? primaryColor : defaultEdgeColor,

strokeWidth: isHighlighted ? HIGHLIGHTED_STROKE_WIDTH : DEFAULT_STROKE_WIDTH,

...edge.style,

stroke: isHighlighted ? primaryColor : defaultEdgeColor,

strokeWidth: isHighlighted ? HIGHLIGHTED_STROKE_WIDTH : DEFAULT_STROKE_WIDTH,

Good catch, thank you! Added ✅

jennypavlova · 2026-01-30T15:01:02Z

@crespocarlos Thank you for reviewing! I am going through the comments and I have a QQ: Where do you see the arrow, on edge lite it is not visible (IMO it looks better without it and maybe it got removed but we can discuss if we need it. It could be a bug on edge that it is not visible - should we check with design, wdyt?)

crespocarlos · 2026-01-30T15:05:30Z

QQ: Where do you see the arrow, on edge lite it is not visible (IMO it looks better without it and maybe it got removed but we can discuss if we need it. It could be a bug on edge that it is not visible - should we check with design, wdyt?)

I checked it in the Overview cluster. I don't see it on the edge either, but I don't remember if anything changed on the popover recently

jennypavlova

@crespocarlos Thanks you for the review! I also fixed the issue with moving the map not closing the popovers, good catch there!

map_move_fix.mov

( I am investigating the undefined (undefined) issue - I guess it's the key format difference of Cytoscape/React flow, I don't know how I missed that 🤦‍♀️ )

jennypavlova · 2026-01-30T16:10:46Z

...lugins/apm/public/components/app/service_map/react_flow_service_map/use_edge_highlighting.ts

+            stroke: isHighlighted ? primaryColor : defaultEdgeColor,
+            strokeWidth: isHighlighted ? HIGHLIGHTED_STROKE_WIDTH : DEFAULT_STROKE_WIDTH,


Good catch, thank you! Added ✅

jennypavlova · 2026-01-30T16:24:02Z

.../plugins/apm/public/components/app/service_map/react_flow_service_map/react_flow_popover.tsx

+    const viewport = reactFlowInstance.getViewport();
+    const zoom = viewport.zoom;


I like the look and fill if we keep the same position and don't recalculate the viewport also performance-wise is better. But if you see a benefit in doing so I am Ok to change it - just that it will have a "jumping" behaviour if we do so and now it feels smoother IMO (from a UX point of view, also using the buttons to zoom will close the flyout anyway and I also need to fix the other bug you found with the focus change when moving/dragging the map position) This is the current version:

zoom_sm.mov

jennypavlova · 2026-01-30T16:44:42Z

Fixed the group popover issue and update the description ✅

smith · 2026-01-30T17:18:20Z

The popover doesn't close when it encounters a drag event:

It probably should to match the zoom behavior and the old behavior.

smith

Code looks good. Tried locally (didn't test anomalies or externals grouping.) See my note about drag behavior.

jennypavlova · 2026-01-30T17:56:58Z

@smith Good catch, thanks! Fixed ✅:

fix_node_drag.mov

crespocarlos

LGTM ✨

…ils-with-react-flow

elasticmachine · 2026-02-02T15:41:20Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 645357a

Failed CI Steps

Scout: [ observability / apm ] plugin

Test Failures

[job] [logs] Scout: [ observability / apm ] plugin / Can create, trigger and view an 'Error count' alert from service inventory
[job] [logs] Scout: [ observability / apm ] plugin / serverless-oblt - Alerts - Can create, trigger and view an 'Error count' alert from service inventory

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`apm`	2358	2360	+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`apm`	3.1MB	3.1MB	+4.4KB

History

💛 Build #388496 was flaky 56cb977
💔 Build #388467 failed 56cb977
💚 Build #387967 succeeded b078ccd

cc @jennypavlova

jennypavlova added 3 commits January 30, 2026 10:57

[APM] Service map Popover and Node Details with react flow

34882dd

Fix popover position and add edge popover

f25a8b3

Test all service map popovers e2e with scout

b078ccd

jennypavlova self-assigned this Jan 30, 2026

jennypavlova requested a review from a team as a code owner January 30, 2026 12:45

jennypavlova added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting Team:obs-presentation Focus: APM UI, Infra UI, Hosts UI, Universal Profiling, Obs Overview and left Navigation labels Jan 30, 2026

crespocarlos reviewed Jan 30, 2026

View reviewed changes

jennypavlova added 3 commits January 30, 2026 16:56

Cleanup

c8d6701

CR fixes

a9e5487

Close node/edge popover when moving the map

ee0bdd8

jennypavlova commented Jan 30, 2026

View reviewed changes

Fix the group popover description and add a test for it

e567b52

CR changes

8083eeb

jennypavlova requested a review from crespocarlos January 30, 2026 17:10

smith approved these changes Jan 30, 2026

View reviewed changes

Fix node drag

709aed6

crespocarlos approved these changes Feb 2, 2026

View reviewed changes

Merge branch 'main' into 250209-apm-service-map-popover-and-node-deta…

56cb977

…ils-with-react-flow

jennypavlova enabled auto-merge (squash) February 2, 2026 10:04

Merge branch 'main' into 250209-apm-service-map-popover-and-node-deta…

645357a

…ils-with-react-flow

jennypavlova merged commit 227d7d2 into elastic:main Feb 2, 2026
17 checks passed

kibanamachine added the v9.4.0 label Feb 2, 2026

	const trigger = <div style={{ width: 1, height: 1, visibility: 'hidden' }} />;
	const trigger = <div style={{ width: 1, height: 1, visibility: 'hidden' }} aria-hidden="true"/>;

		[SPAN_TYPE]: 'spanType' in nodeData ? nodeData.spanType : undefined,
		spanType: 'spanType' in nodeData ? nodeData.spanType : undefined,

		setSelectedNodeForPopover(null);
		setSelectedEdgeForPopover(null);

		if (nodeData.isService) {
		const serviceData = nodeData as ServiceNodeData;

		if ('isGrouped' in nodeData && nodeData.isGrouped) {
		const groupedData = nodeData as GroupedNodeData;

		const viewport = reactFlowInstance.getViewport();
		const zoom = viewport.zoom;

		stroke: isHighlighted ? primaryColor : defaultEdgeColor,
		strokeWidth: isHighlighted ? HIGHLIGHTED_STROKE_WIDTH : DEFAULT_STROKE_WIDTH,

Conversation

jennypavlova commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

How to test

How to run the scout tests

Uh oh!

elasticmachine commented Jan 30, 2026

Uh oh!

crespocarlos left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jennypavlova commented Jan 30, 2026

Uh oh!

crespocarlos commented Jan 30, 2026

Uh oh!

jennypavlova left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jennypavlova commented Jan 30, 2026

Uh oh!

smith commented Jan 30, 2026

Uh oh!

smith left a comment

Choose a reason for hiding this comment

Uh oh!

jennypavlova commented Jan 30, 2026

Uh oh!

crespocarlos left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

elasticmachine commented Feb 2, 2026

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Module Count

Async chunks

History

Uh oh!

Reviewers

Assignees

Labels

jennypavlova commented Jan 30, 2026 •

edited

Loading