I recently worked on updating our flow editor, a tool we’ve adapted from Rapidpro, and I can’t help but express my admiration for its design. Before delving into the technical details, let me share the problem we aimed to solve with this flow editor: building a user-friendly flow builder for a WhatsApp chatbot, allowing non-tech-savvy individuals to effortlessly create conversations.

One improvement we implemented is the automatic creation of a “wait for response” node when users create a WhatsApp message with buttons or list options. Previously, users had to manually add this node after creating the message, adding unnecessary steps to the process.

As I wrapped up my work, I couldn’t resist documenting and highlighting some aspects of the flow editor that I found particularly appealing:

Appreciation for the Software:

I must say, I genuinely love this software. The elegance and clarity with which it is written and segmented into various parts are truly commendable.

Exploring the Flow Editor:

On the surface, it may seem like a normal interaction with a webpage, but the creation of this sophisticated software involves a meticulous consideration of various elements. Among the numerous aspects involved in its design, some notable features include:

• Precise calculation of lines connecting two points and their smooth movement.
• Ensuring that no two nodes overlap, enhancing clarity and organization.
• Intuitive drag-and-drop functionality for effortless creation of new nodes.
• Thoughtful canvas design facilitating seamless node connection.
• Streamlined processes for joining nodes cohesively.
• Effortless deletion of nodes, with automatic adjustment of connected paths.
• Integration of a simulation feature to replicate user interactions.
• Implementation of a revision system, allowing users to revert to previous versions.

While these are just a few highlights, numerous other considerations contribute to the overall excellence of this software.

I appreciate that it’s implemented in TypeScript, making it significantly more comprehensible and straightforward for debugging purposes.

Given that this code was developed during the nascent stages of React, it relies on class-based components. However, it appears that they are will soon move it out of React and use web based components.

What truly stands out is the meticulous structuring of the code. The collaborative efforts at Nyaruka in deliberating and formulating this solution over time underscore its integrity.

While it’s plausible that various developers have crafted similar builders over the years, there’s a distinctive charm in the specific decisions made here. Each choice appears to reflect a thoughtful and deliberate approach, contributing to the overall elegance of the codebase.

Store Structure

The heart of the flow editor lies in its store structure created using redux, which encompasses three main stores:

1. Flow Context: Stores the flow’s context, node locations, connections, translations, assets, and any issues within the flow.
2. Editor State: Manages the editor’s state, including revision numbers, language settings, simulation status, and drag information.
3. Node Editor: Handles the context of the current node activity when the form is open, whether it’s a newly created node or an existing one.
   

Visualizing the Repository:

Using github repo visualization

Understanding hierarchy and structure of the project

At the project’s apex, various key components define its hierarchy:

• Alert Modal:
  • Addressing Connectivity Issues: Triggers when issues like a lack of internet connection arise.
• Language Bar:
  • Language Selection Facilitation: Allows users to choose their preferred language.
• Saving Indicator:
  • Save Operation Status Indication: Provides visual feedback on ongoing save processes.
• Translation Tab:
  • Content Translation Support: Enables users to manage and execute translation tasks.
• Revision Tab:
  • Version Control and Revision History Management: Tracks changes and allows users to revert to previous versions.
• Issues Tab:
  • Project-Related Problem Monitoring: Provides a platform to identify and manage issues.
• Main Flow Component

Moving into the core of the project, the main flow can be delineated into three primary components:

Main flow components

• Simulator:
  • Rendering Based on Node Presence: Simulates processes and activities when a node is present.
• NodeEditor:
  • Dialog Display Upon Node Dragging: Allows users to edit and customize properties of newly added nodes.
• Canvas:
  • Central Interactive Space: Encompasses the creation of new nodes and various user interactions.
• Canvas Subcomponents:
  • List of Nodes:
    • Comprehensive Node Management: Maintains a list of all nodes within the canvas.
  • jsPlumb Library Integration:
    • Seamless Flow Chart Building: Manages node connections and interactions using the powerful jsPlumb library.

Types of nodes:

• Actions:
  • Driving Flow Forward: Executes tasks that propel the project forward.
• Router:
  • Dynamic Flow Branching: Creates branches in the flow based on responses or data.

Wanted to write what each of them entail but will leave it for another blog.