How to set up node inputs that are created ar runtime, but dont break json

[dbriscoe511]

I'm using Rete (V1 now, plan to convert to V2 when it's stable.) for a text processing application. One of the features I have created allows users to create variables that become inputs to the node.

Example:
there is a textEntry node with a text box. the user enters this into the text box:
"bob has {number} kids"
number becomes an input to the textEntry node.
the user uses a number entry node to pass "3" into number input.
the output of the textEntry box is "bob has 3 kids"

I have this working. however, I am allowing the user to save and load the diagrams as well. When the diagram is loaded is when things break. any dynamically creating inputs disappear, until a emitter("process") is triggered. It also displays an error that any connections to the dynamic inputs "IO not found for node x".

I'm not really sure why this happens, since the inputs are clearly added to the outputted json.

"5": {
      "id": 5,
      "data": {
        "text": "Bob has {sons} sons, {daughters} daughters"
      },
      "inputs": {
        "dyn_inp0": {
          "connections": [
            {
              "node": 3,
              "output": "text",
              "data": {}
            }
          ]
        },
        "dyn_inp1": {
          "connections": [
            {
              "node": 4,
              "output": "text",
              "data": {}
            }
          ]
        }
      },
      "outputs": {
        "text": {
          "connections": [
            {
              "node": 1,
              "input": "text",
              "data": {}
            },
            {
              "node": 6,
              "input": "message",
              "data": {}
            }
          ]
        }
      },

Here is the code for handling dynamic inputs.

export function dynamic_input(nodeId, desired_inputs, editor, socket, ControlConstructor, input_titles = []) {
    /**
     * This function dynamically updates the inputs of a node based on the desired number of inputs.
     * It adds new inputs or removes extra inputs accordingly, and updates the node's appearance in the editor.
     *
     * @param {string|number} nodeId - The ID of the node to update.
     * @param {number} desired_inputs - The desired number of inputs for the node.
     * @param {Rete.Editor} editor - The Rete.js editor instance.
     * @param {Rete.Socket} socket - The socket to use for the new inputs.
     * @param {Function} controlConstructor - The constructor function for the control to be added to the new inputs.
     */

    // Count the existing dynamic inputs
    const nodeInstance = editor.nodes.find((n) => n.id === nodeId);

    let existingDynamicInputs = 0;
    nodeInstance.inputs.forEach((input, key) => {
        if (key.startsWith("dyn_inp")) {
          existingDynamicInputs += 1;
        }
    });

    //create input titles if needed
    if (input_titles.length < desired_inputs) {
        for (let i = input_titles.length; i < desired_inputs; i++) {
            input_titles.push("Input " + i);
        }
    }

    // Add new dynamic inputs if needed, or rename existing inputs
    for (let i = 0; i < desired_inputs; i++) {
      let inputKey = "dyn_inp" + i;
      if (i < existingDynamicInputs) {
          // Rename existing input
          let existingInput = nodeInstance.inputs.get(inputKey);
          existingInput.name = input_titles[i];
      } else {
          // Add new input
          let inp = new Rete.Input(inputKey, input_titles[i], socket);
          
          //add control to input
          //right now this looks kind of ugly, and does not seem useful. could add back in later
          //inp.addControl(new ControlConstructor(editor, "dyn_inp" + i, nodeInstance, false, (input_titles[i]+": ") ));
          
          nodeInstance.addInput(inp);
          console.log("dynamic_io added input", inp);
      }
    }


    // Remove extra dynamic inputs if needed
    for (let i = existingDynamicInputs; i > desired_inputs; i--) {
        let inputToRemove = nodeInstance.inputs.get("dyn_inp" + (i - 1));
        console.log("input to remove", inputToRemove);

        // Manually remove connections before removing the input.
        // removeInput is supposed to handle this but doesnt handle the output side, causing crashes
        inputToRemove.connections.forEach((connection) => {
            // Remove connection from the input side
            inputToRemove.removeConnection(connection);
            
            // Remove connection from the output side
            const outputNode = connection.output.node;
            const outputKey = connection.output.key;
            outputNode.outputs.get(outputKey).removeConnection(connection);

            // force a re-render
            editor.trigger('process');
        });

        nodeInstance.removeInput(inputToRemove);
    }

    // Update the node's appearance in the editor, and force a re-render
    nodeInstance.update();
}

Code from worker, where this is called:

worker(node, inputs, outputs) {
        // get items in brackets
        const substitutor = new StringSubstitutor();
        let to_replace = substitutor.extractItemsInBrackets(node.data.text);
        console.log("replace:",to_replace);

        // add dynamic inputs
        let num_inputs = to_replace.length;
        dynamic_input(node.id, num_inputs, this.editor, textSocket, TextControl, to_replace);

        // get dynamic input values
        let input_values = [];
        for (let i = 0; i < num_inputs; i++) {
            let input = "";
            try{
                input = inputs["dyn_inp" + i].length ? inputs["dyn_inp" + i][0] : node.data["dyn_inp" + i];
            } catch {
                // when the input is first created, it is undefined and throws an error
                // this may be a bad way to handle it
                input = "";
            }

            if (input.length) {
                input_values.push(input);
            } else {
                input_values.push("");
            }
        }

        // replace items in brackets with dynamic input values
        let replaced = substitutor.substituteItems(node.data.text, input_values);
        outputs["text"] = replaced;
    }

I would love any help fixing this issue!

[Ni55aN]

since the inputs are clearly added to the outputted json

having connections in JSON is not enough, because Rete.Input and Rete.Output must be predefined for them in the node instance (builder method)

I guess the dynamic_input function should be called inside builder method.

Also I wouldn't recommend calling dynamic_input inside worker. If possible, update dynamic inputs directly when the text in the input changes.

[dbriscoe511]

Thanks for the tips!! adding this function to the builder fixed my issues. If anyone else is interested in this application, I had to add the following code to dynamic_input to allow it to work with the builder, and at runtime with the worker.

//if this is running when the editor is running, we need to find the node instance
    //if it is running in the builder, inputs need to be added to the node object directly.
    if (runtime) {
      var nodeInstance = editor.nodes.find((n) => n.id === node.id);
    }else {
      var nodeInstance = node;
    }

This was my main issue, so thanks for the help. Why is calling the dynamic_input inside worker bad?

[Ni55aN]

While reading the code, it may seem that this operation is dependent on the processing, but the fact is that change of the input field is the only reason to execute this function