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

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 📝

[ ] #37
[ ] #38
[ ] #39
[ ] #40
[ ] #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.

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' },
  ],
};

softflow24 / data-river