Skip to content

[feature/new-dag-editor] part 4: Add the main component for the reactflow based DAG editor #1316

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: feature/new-dag-editor
Choose a base branch
from

Conversation

GnsP
Copy link
Collaborator

@GnsP GnsP commented Mar 28, 2025

Add the main component for the reactflow based DAG editor

Description

Part 4 of the set of changes implementing the new DAG editor for CDAP UI.

Links to the previous changesets:

  1. [feature/new-dag-editor] part 1: Add changes to the dag-plus directive #1309
  2. [feature/new-dag-editor] part 2: Add back the older my-dag-ctrl to keep supporting the older ui #1312
  3. [feature/new-dag-editor] part 3: update build configs and add reactflow as dependency #1313

In this PR, we add the main component for the reactflow based DAG editor, its controller code to interface with the angularjs controller and associated utilities. This PR also includes the code changes to export this react component for use in the angularjs codebase.

Though we import and reference the Node and Edge types (components) in this PR, they are not included here to keep the changeset small for ease of review. The reactflow Node and Edge type components follow a standard set of props, that all implementing components should follow, therefore the reviewers can assume that the references to these components here will follow the standard set of props (Defined in the reactflow docs).

This also includes minor changes to the PipelineContextMenu and PipelineCommentsActionBtn components.

PR Type

  • Bug Fix
  • Feature
  • Build Fix
  • Testing
  • General Improvement
  • Cherry Pick

Links

Jira: CDAP-21142

Test Plan

NA. Not testable. Tests will be run when the complete feature branch is merged to develop

Screenshots

NA

showFitView={false}
showInteractive={false}
>
{!isDisabled && (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like these are hidden when disabled. Does it make more sense to disable the components themselves?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The showZoom, showFitView and showInteractive props of the reactflow.Controls component show/hide the built-in (in reactflow) implementation of these features. We have hidden them explicitly, as we are using the same buttons with our own controller logic.

The actual zoom, fit and lock buttons are not rendered when the editor is in disabled mode. (As implemented in the lines following this)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants