Replace Diagram Maker with React-Flow

[srinath-intelops]

Requirement: Replace the diagram-maker with React-Flow

Acceptance Criteria: Complete migration to react-flow from diagram-maker Note: As this is going to be a very big task, we are gonna break it into smaller tasks.

Feasibility Check

• [ ] As part of this, Azhar is expected to create a document listing all the challenges/steps/things down. Failing to create an in-detailed document will be considered an incomplete task.
• [ ] We have a custom format to let the backend know about what has been drawn on the UI. We don't need to disturb that otherwise, all backend and core will need to be changed.
• [ ] So, need to generate the same structure after migrating to react-flow. This will need to be checked thoroughly before even starting with actual migration. 

Actual code changes and migration

• [ ] This is stage 2 which needs to be done post thorough analysis from the team including Chandrakanth.

Thorough testing

• [ ] Add test framework for UI

[srinath-intelops]

Azhar requires the clarification from Mahendra on below mentioned questions

1. As you have already implemented diagram-maker, what will be our motive to change plan?
2. What will be a best way to start this poc, I mean suggestions as I keep your points in mind while doing poc which avoids me in confusion on how to proceed and what points to be mainly considered in feasibility check.
3. In terms of nodes and edges, I just want some more understanding in its roles and what features they are upto and in future, what may can be added, which helps me considering in feasibility check.
4. As it seems to be the vital change in UI, are we planning to upgrade our UI, if yes, any techstack changes? and any UI/UX add-ons are we considering? - Chandrakanth Paladugu once said that he have some plans. (This is like an end goal).
5. Unable to think more than this, but if i get any in between i'll let you know

Planning to set up a Call with Mahendra tomorrow (Jul 27th)

[srinath-intelops]

Implementation Plan:

• [ ] Feasibility Check
• [ ] POC
• [ ] Decision Document (Includes Requirements, UI Mockups and agreed requirements)
• [ ] Development
• [ ] Testing
• [ ] Deployment

[srinath-intelops]

Azhar created a feasibility document and assessed each of the current feature development with React-Flow.

[azar-intelops]

• [ ] Create a document listing all the challenges/steps/things down

• [ ] 1. Library Features: Evaluate whether the "react-flow" library provides built-in functionalities to support node creation, different node types, edge connections, and event handling for interactions like hover and double-tap.

• [ ] 2. Customization: Check if the library allows sufficient customization to implement the required node and edge properties pop-ups according to the project's design and specifications.

• [ ] 3. Documentation and Community Support: Review the "react-flow" library's documentation and community support to determine if it is actively maintained, has good documentation, and a supportive community for troubleshooting and future updates.

• [ ] 4. Performance and Scalability: Consider the performance and scalability aspects of the library, especially when dealing with a potentially large number of nodes and edges, to ensure the diagram maker can handle complex diagrams efficiently.

• [ ] 5. Integration: Verify that the "react-flow" library can be integrated seamlessly into the existing project architecture and any potential conflicts with other libraries or components are addressed.

• [ ] 6. Browser Compatibility: Ensure that the "react-flow" library is compatible with all major web browsers to provide a consistent user experience across different platforms.

Note: I have made this points based on our previous conversations and functionalities present in diagram maker. Please feel free to add if anything is missing.

[srinath-intelops]

By Azhar:

1. Implemented the base diagram maker with react flow.

2. Added Control panel and background for our diagram-maker Background dots can be replicated like our compage, but the position for the control panel has some limitations. https://reactflow.dev/docs/api/plugin-components/panel/#example-usage

3. Its positions are defined on the edges, not in the middle. Created normal nodes and edges, but need to figure out how to add nodes on drag and drop, found one resource in docs. Facing a few errors in that. Will work on it tomorrow.

[azar-intelops]

Things I have worked on Aug 1 2023:

• Implemented Custom Node with a single Source and destination, I wanted to make the add node process a lil different way than compage, Whenever a user wants to create a node, he needs to configure the No of Sources and destinations, So that we can make things clean and easier.
• Going through this feature like how to implement custom node with n sources and m destinations and if n = 1, m >= 1.

[azar-intelops]

Hi Everyone,

Things I have worked on Aug 2 2023: Started exploring on how to dynamically add nodes and edges, And along with that How can we implement multiple source and destinations approach.

Initially I faced multiple issues with the types in react-flow and the code which available on the internet was not compatible with the current react-flow version.

Later I started digging some projects available on github. Here is what I have found!

• [ ] https://react-flow-mindmap.netlify.app/
• [ ] https://kaoto-stable-kaoto.mariasde-cluster-c22fc5e8e66e9470d8f58db21c47bfd0-0000.eu-de.containers.appdomain.cloud/#/
• [ ] https://prismaliser.app/

and many more repositories

common thing among these are, tailwindcss + zustand, Though we are not using them in our projects, but many projects are using them . Good to see these in the open-sources and production ready apps!

Current challenges: Add nodes dynamically! - solution: Going through other people's code and learning by myself. Need to figure out multipe sources and destinations , https://react-flow-mindmap.netlify.app/ These people have already implemented solution, I need to understand this.

Please let me know if I'm in wrong direction

[srinath-intelops]

Note: Pavan is taking over the task for the Interim till Azhar finishes up the CompageGPT.

Compage UI with React-Flow POC is complete. Scheduling demo for Chandu on Monday.

[srinath-intelops]

Compage - React-Flow Implementation Plan ETA: September 15th

1. Start off by creating custom nodes and custom connectors - Done
2. Rendering these custom nodes in React-Flow Canvas - Done
3. Users should be able to: - Done Add nodes via drag-and-drop or through sidebar selection. Delete nodes by selecting and pressing the Backspace/Delete button.
4. Integrate added features, such as the MiniMap and Controls, for enhanced Canvas interaction - Done
5. Establish a Zustand store for React-Flow's state, which will - Done Contains data about nodes, edges, and relevant action handlers. Persistently save all data to local storage.
6. All the Async API Calls will be set up in Zustand - WIP
7. Adding Forms and their respective input validations. And then rendering this form in the node body (e.g.: like Flowise) - WIP Supporting muti-step form Rendering UI according to the previous state Adding conditional fields Connecting this form state with the nodes. Building form fields without Material UI - WIP We will introduce the library called "Zod" for Validation and the Library called "react-hook-form"

[srinath-intelops]

This week's plan: UI Frontend (F.5): Pavan started working on the UI aspect of Frontend using Notus Pro (React, Tailwaid template). The goal is to complete this by tomorrow's EOD. This step includes two parts. Part-1: Convert these components into a package in UI frontend templates repo. Part-2: Now Import components into Compage (from the package that we built in the above part-1) Aysnc API Calls (Point G): Pavan had a call with Mahendra. Per discussion, they will connect and do the pair programming on Wednesday. Added forms to edges and stored them in Zustand.

Implementation Plan Start Date: Aug-30th | ETA: Sept-30th (Need clarity on designs)

1. Start off by creating custom nodes and custom connectors - Done
2. Rendering these custom nodes in React-Flow Canvas - Done
3. Users should be able to: - Done
4. Add nodes via drag-and-drop or through sidebar selection.
5. Delete nodes by selecting and pressing the Backspace/Delete button.
6. Integrate added features, such as the MiniMap and Controls, for enhanced Canvas interaction - Done
7. Establish a Zustand store for React-Flow's state, which will - Done
8. Contains data about nodes, edges, and relevant action handlers.
9. Persistently save all data to local storage.
10. Adding Forms and their respective input validations. And then rendering this form in the node body (e.g.: like Flowise)
11. Supporting multi-step form - Done
12. Rendering UI according to the previous state - Done
13. Adding conditional fields - Done
14. Connecting form state with the nodes - Done
15. Building form fields without Material UI - WIP
16. All the Async API Calls will be set up in Zustand - WIP Optional: Enhancement: We will introduce the library called "Zod" for Validation and the Library called "react-hook-form"

[srinath-intelops]

Pavan is working on Compage UI Integration with Backend:

1. Having a discussion with Mahendra on Integrating frontend with Backend. - Done
2. Configured Compage on localhost - Done
3. Working on adding the "react-flow" folder in addition to the old one (diagram maker). - WIP
4. Having a discussion with Azhar about the Compage folder structure and code walk-through - WIP
5. Test every functionality is working as it should be - WIP