[RFC] Introduce React Flow Library in OpenSearch Dashboards

[ps48]

Overview

Introduce react flow library in OpenSearch Dashboards https://reactflow.dev/

Motivation

Currently OpenSearch Dashboards contains support for many visualization specific libraries and framework which include vega, elastic/charts and d3. There are really great and flexible frameworks for generic visualizations. But there is a need for a framework where we need Higher order components for interactive node-based visualizations that require:

• Interactive Node Graphs: Service maps, trace flows, and dependency visualizations
• Workflow Visualizations: Process flows, pipeline diagrams, and state machines
• Network Diagrams: Infrastructure topology, data lineage, and relationship mapping
• Decision Trees: Logic flows and conditional pathways
• Observability Workflows: Investigative flows for troubleshooting, alert correlation, and root cause analysis

Current implementations across plugins are fragmented, leading to:

• Inconsistent user experiences
• Duplicated development effort
• Version conflicts between plugins
• Increased security maintenance overhead

Benefits of React flow

1. Developer Experience

   • Declarative React API that integrates seamlessly with OSD's React ecosystem
   • TypeScript support with comprehensive type definitions
   • Extensive documentation and active community

2. Performance & Scalability

   • Built-in virtualization handles thousands of nodes efficiently
   • Optimized rendering with React's reconciliation
   • Memory-efficient edge rendering

3. Customization & Flexibility

   • Custom node and edge components
   • Pluggable layout algorithms
   • Theming support compatible with OSD's EUI theme system

4. Accessibility

   • WCAG compliant with keyboard navigation
   • Screen reader support
   • Focus management

5. Maintenance & Security

   • Active development with regular updates
   • Strong security track record
   • MIT license compatible with OpenSearch

How is it different from above mentioned libraries

React Flow is specifically designed for interactive node-based visualizations and provides higher-order components that are not available in traditional charting libraries:

Core Components & HOCs:

• ReactFlow Component: Main container that handles the flow state, interactions, and rendering
• Node Components: Pre-built and customizable node types (default, input, output, group nodes)
• Edge Components: Various edge types (default, straight, step, smoothstep, bezier) with custom styling
• Handle Components: Connection points for nodes that manage edge attachment and validation
• Background Component: Configurable grid, dots, or lines background patterns
• Controls Component: Built-in zoom, fit view, and interaction controls
• MiniMap Component: Overview navigation for large graphs
• Panel Components: Floating panels for additional UI elements

Interactive Capabilities:

• Drag & Drop: Native node dragging with collision detection and snapping
• Multi-selection: Select multiple nodes and edges with keyboard modifiers
• Connection Handling: Interactive edge creation by dragging from node handles
• Viewport Controls: Zoom, pan, and fit-to-view with smooth animations
• Keyboard Navigation: Full keyboard accessibility for all interactions

Advanced Features:

• Custom Node Types: Create completely custom React components as nodes
• Edge Validation: Programmatic control over which connections are allowed
• Grouping & Nesting: Support for nested flows and node grouping
• Layout Integration: Works with layout libraries (dagre, elk, etc.) for automatic positioning
• Event System: Comprehensive event handling for all user interactions

Unlike Vega, Elastic Charts, and D3 which focus on data visualization, React Flow provides the building blocks specifically for interactive workflow and network diagram applications.

Existing usage in OSD plugins

• Dashboards flow framework plugin already uses this: https://github.com/opensearch-project/dashboards-flow-framework
• We have seen conflicts if plugins utilize different versions - build is an issue for version conflicts, CVE needs to done at all plugins - unifying in OSD core helps

How will it be used in future features in OSD and plugins:

1. Discover traces flavor - Trace map feature: We are currently working on a new discover experience for enhancing the existing discover experience with trace/span exploration functionalities. We'll have an RFC on the feature soon. Here's the initial PR: [Explore] remove data-explorer and introduce sample route for flavors #9835

2. Trace analytics plugin - Service map feature: The current service map in the services page of trace analytics is long due. It currently uses react-vis-graph which doesn't provide great HoCs and it really adds up the effort to create and maintain customized high level components.

RFC Questions

1. Developer Experience: Do you have experience building with React Flow? If so, how has your experience been with the library in terms of ease of use, performance, and customization capabilities?

2. Long-term Strategic Value: Do you think adding this visualization library will be beneficial in the long term as we introduce new functionalities in OSD and its plugins? How do you see it fitting into the broader OSD ecosystem?

3. Alternative Solutions: Do you suggest any other alternatives to React Flow for node-based visualizations? Are there other libraries or approaches we should consider for this use case?

[TackAdam]

Developer Experience:
I strongly advocate for React Flow based on hands-on experience. The library excels with its intuitive declarative React API, excellent TypeScript support, and comprehensive documentation. Performance is outstanding with built-in virtualization handling 1000+ nodes smoothly, and customization is straightforward with custom node/edge components and seamless theming integration. The developer experience is significantly superior to lower-level alternatives like react-vis-graph.

Long-term Strategic Value:
Adding React Flow to OSD will create a universal user experience across all node-based visualizations, users will have consistent interaction patterns whether working with service maps, trace flows, or workflow diagrams. As observability workflows become more complex, having React Flow as core infrastructure positions OSD to support evolving use cases like advanced trace analysis, ML workflows, and investigation patterns without each plugin reinventing visualization infrastructure. The result will be a cohesive, powerful ecosystem with standardized accessibility and shared component libraries.

[ruanyl]

Thanks for the RFC, you have an example of how the new discover experience can use this library, do you have plan when will this be implemented?

React Flow sounds good to me, but I'd add it to OSD core only when it's actually used by core.

[ps48]

Hi @ruanyl , The new discover experience for traces will be coming up next month. @TackAdam will have a github issue posted for the new experience. Yes, I agree we'll only add the library when we add this new experience.

[krisfreedain]

Catch All Triage - 1 2