Implement a node graph with ID-based configuration and WebSocket/browser-based result handling

[c0rtexR]

Task: Implement a node graph with ID-based configuration and WebSocket/browser-based result handling

---

Task Overview:
Develop a node graph structure where each block has a unique ID and configuration setup to handle task execution. Ensure that nodes can pass values and receive results, with real-time updates provided either through WebSockets or directly in the browser for simpler blocks.

---

SMART Criteria

Specific 🎯:
Create a workflow system where each node is defined by:

• ID-based configuration that outlines input/output keys and task settings (e.g., REST API call, conditional logic).
• Ability to send results back using WebSockets or browser mechanisms (e.g., fetch API for simple operations).
• Seamless integration of multiple node types (e.g., restCall, processData, scriptNode) with defined inputs, outputs, and error handling.

Measurable 📏:
Success will be measured by:

• Workflow nodes correctly passing values through their configuration, and receiving real-time results.
• At least 90% of test users confirming smooth interactions with nodes and accurate data handling.
• WebSocket or browser interactions being handled with less than 200ms latency for simple tasks.

Achievable 🚀:
This task is achievable using existing WebSocket and browser APIs for real-time data transfer, along with a node-based configuration model that can be dynamically updated.

Relevant 🎯:
Implementing this node graph with configuration and result handling is crucial for the data-river editor to support complex workflows while maintaining real-time feedback for users.

Time-bound ⏳:
This task should be completed within 2 weeks to allow sufficient time for testing the performance of both WebSocket and browser-based approaches.

---

Subtasks 📝

• Define the node configuration structure (ID-based with input/output keys and task-specific settings). #37
• Implement a system for passing values between nodes via their configuration. #38
• Set up WebSocket communication for real-time results delivery and browser-based handling for simpler nodes. #39
• Test the performance and accuracy of value passing between nodes. #40
• Gather feedback from test users and optimize WebSocket/browser interactions. #41

---

Acceptance Criteria ✅

• Workflow nodes correctly pass data and receive results in real-time via WebSocket or browser-based handling.
• Less than 200ms latency for data updates, confirmed through testing.
• 90% of test users report smooth interaction and accurate data flow between nodes.

---

Additional Notes 🗒

• Focus on performance and responsiveness, especially for simple browser-handled nodes.
• Ensure robust error handling in cases where WebSocket communication fails or errors occur in task execution.

[c0rtexR]

example graph

const workflowDefinition = {
  nodes: [
    {
      id: 'node-1',
      type: 'restCall',
      inputKeys: [], 
      outputKeys: ['apiResponse'],
      config: {
        method: 'GET',
        url: 'https://jsonplaceholder.typicode.com/todos/1',
        headers: {},
      },
    },
    {
      id: 'node-2',
      type: 'processData',
      inputKeys: ['apiResponse'],
      outputKeys: ['processedData'],
      config: {},
    },
    {
      id: 'node-3',
      type: 'optionalRestCall',
      inputKeys: [],
      outputKeys: ['optionalData'],
      onError: 'continue',
      activityOptions: {
        startToCloseTimeout: '30 seconds',
        retry: {
          maximumAttempts: 2,
        },
      },
      config: {
        method: 'GET',
        url: 'https://example.com/optional-data',
      },
    },
    {
      id: 'node-4',
      type: 'conditionNode',
      inputKeys: ['processedData'],
      condition: 'processedData.completed === true',
      trueBranch: 'node-5',
      falseBranch: 'node-6',
    },
    {
      id: 'node-5',
      type: 'parallelNode',
      branches: ['node-7', 'node-8'],
    },
    {
      id: 'node-6',
      type: 'scriptNode',
      inputKeys: ['processedData'],
      outputKeys: ['scriptOutput'],
      script: `
        const data = processedData;
        const result = { ...data, extraInfo: 'Added by script' };
        return result;
      `,
    }       
  ],
  edges: [
    { source: 'node-1', target: 'node-2' },
    { source: 'node-2', target: 'node-3' },
  ],
};