Editor Contribution
Last updated
Was this helpful?
Last updated
Was this helpful?
The editor in Data-River is built using React, allowing users to visually design workflows by dragging and connecting blocks (nodes) in a flowchart-style interface. Contributions to the editor involve creating and maintaining the UI components and handling interactions using libraries like .
This guide will help you get started contributing to the editor.
Flow Chart: The core component for rendering and managing blocks in a workflow.
Custom Nodes and Edges: Extend the default React Flow nodes and edges with custom logic and styles.
Panels and Controls: User interface elements for managing the editor environment, such as side panels and control buttons.
Clone the Repository As always, begin by cloning the Data-River repository.
Install Dependencies Make sure to install the necessary dependencies for the editor package:
Run the Editor Locally Start the development server to see the editor running locally:
Open http://localhost:5173/ in your browser to see the editor in action.
The editor package is organized into several key components:
Flow.tsx: Manages the overall flow chart, handling node and edge interactions.
CustomNode.tsx: Defines the visual and interactive behavior of custom blocks (nodes).
NodeControls.tsx: Handles the UI for controlling and configuring individual nodes.
Panels: Includes left, right, and bottom panels for managing node properties, logs, and execution results.
Once you've made your changes, be sure to:
Test your changes thoroughly by creating workflows and testing node interactions.
Ensure your code adheres to the project’s ESLint and Prettier rules.
Submit a pull request to the development branch for review.
React Flow: Most of the flowchart functionality is powered by , so familiarity with this library is helpful when contributing to the editor.
UI Components: The editor uses custom UI components from such as Card, InputWithLabel, and ScrollArea to ensure consistent styling across the platform.
State Management: The editor state is managed with , so contributions should follow best practices for updating and managing global state.