If & else handles can connect to items in invalid ways.

[itsWindows11]

⚠️ Search for existing issues first ⚠️

• I have searched the existing issues, and there is no existing issue for my problem

Which Operating System are you using?

Windows

Which version of data-river are you using?

0.0.1

Describe your issue.

As shown in the video below, if/else handles can be connected to a block directly despite an indirect connection to that same block existing. Also, if a block is connected to the "if handle", it can get connected to the "else handle", and vice versa.

Screen.Recording.2024-10-14.201613.mp4

Paste Error from Terminal/Console

No response

[c0rtexR]

Desired Behavior:

• Allow if or else outputs to connect to multiple blocks.
• Prevent connections where both if and else outputs connect to the same block.
• Prevent cycles in the graph to avoid infinite loops.

Proposed Solution:

Implement connection validation logic to prevent invalid configurations:

1. Use isValidConnection on Handles:

   Update the SourceHandle component to include an isValidConnection function that checks for invalid connections. This function should:

   • Check if the target node is already connected to the other output (if or else) of the same logic block.
   • Prevent the connection if it would result in both if and else outputs connecting to the same node.
   • Check for potential cycles that could create infinite loops.

2. Pre-calculate Invalid Connections:

   Perform validation during the connection attempt (onConnect event) rather than during dragging to avoid performance issues with animation frames.

3. Update Connectable State:

   Dynamically set the connectable prop on the Handle components based on the validation results to prevent users from creating invalid connections.

Action Items:

• Modify the SourceHandle component to include the isValidConnection prop with the validation function.
• Implement the validation logic in the isValidConnection function.
• Ensure that the validation checks are efficient to prevent any performance degradation.

Example Code Snippet:

// SourceHandle.ts
import React from "react";
import { Handle, Position } from "reactflow";
import { useSelector } from "react-redux";

const SourceHandle = ({ isVisible, nodeId, handleId }) => {
  const edges = useSelector((state) => state.reactFlow.edges);

  const isValidConnection = (connection) => {
    // Prevent connecting both 'if' and 'else' to the same target
    const existingConnections = edges.filter(
      (edge) =>
        edge.source === nodeId &&
        edge.target === connection.target &&
        edge.sourceHandle !== connection.sourceHandle
    );
    return existingConnections.length === 0;
  };

  return (
    <Handle
      type="source"
      position={Position.Right}
      id={handleId} // e.g., 'if' or 'else'
      isValidConnection={isValidConnection}
      style={{ visibility: isVisible ? "visible" : "hidden" }}
    />
  );
};

export default SourceHandle;

Notes:

• Ensure that each handle (if and else) has a unique id to differentiate them.
• The isValidConnection function accesses the current edges from the Redux store to check for existing connections.
• Consider implementing cycle detection if necessary to prevent infinite loops.