Conversation
|
🤖 Jobs for this PR can be triggered through checkboxes. 🚧
ℹ️ To trigger the CI, please tick the checkbox below 👇
|
| * Transform Cytoscape elements to React Flow format | ||
| * Converts nodes and edges from Cytoscape's data structure to React Flow's format | ||
| */ | ||
| export function transformElements( |
There was a problem hiding this comment.
Will this format be returned by getServiceMapNodes in the future?
There was a problem hiding this comment.
Yes, ideally the API should return the react flow format. For the purpose of the PoC we have this function to help us work with the data we have and if we decide to proceed with this solution we should remove this and return the data in the correct format.
There was a problem hiding this comment.
Yes, the idea for now was to use the already existing structure for the format, just for the POC, when we implement this we will get the proper data for the flow without using any cytoscape transform
There was a problem hiding this comment.
I added a comment before the function to explain that
|
Is it possible to centralize the node with the arrow? 
|
I think now it is the center of the node + text as I made them flex items, but yes I will try to fix the position, thanks for spotting that |
@crespocarlos Fixed in Fix edges position 
|
…ova/kibana into react-flow-service-map
[APM] Add Service map PoC tests
…d-collapse [PoC] React flow service map expand collapse
4 participants
Summary
This PR introduces a proof of concept to evaluate replacing Cytoscape.js with React Flow for the APM Service Map visualization.
The React Flow version is behind a feature flag and appears as a new "React Flow Service map" tab next to the existing Service Map.
Why React Flow?
React Flow renders actual DOM elements (not canvas), making it more accessible and easier to work with using standard React patterns. It also has a smaller bundle size (~150KB vs ~500KB) and a more intuitive API for creating custom nodes.
What's Implemented
✅ Custom ServiceNode component (circular with agent icons)
✅ Custom DependencyNode component (diamond with span icons)
✅ Dagre-based left-to-right layout matching Cytoscape
✅ Edge highlighting on node click (blue edges + arrows)
✅ Data transformation from Cytoscape format to React Flow
✅ Feature flag
xpack.apm.featureFlags.serviceMapUseReactFlow✅ Unit tests for
transformElementsandapplyLayoutWhat's NOT implemented (future work):
❌ Code optimizations around the node/edges highlighting
❌ Dark mode support for controls and background and other styling improvements
❌ Popover on node click with service stats/links
❌ Grouped "externals" connections
❌ Keyboard navigation
❌ Performance testing with large maps
❌ E2E tests
How to test:
xpack.apm.featureFlags.serviceMapUseReactFlow: truetokibana.dev.yml