Skip to content

fix: Workflow adding nodes sometimes fails to connect correctly to anchor points #4211

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shaohuzhang1 merged 1 commit into from
Oct 17, 2025
Merged

fix: Workflow adding nodes sometimes fails to connect correctly to anchor points #4211

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ui/src/workflow/common/NodeContainer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,7 @@ function clickNodes(item: any) {
sourceNodeId: props.nodeModel.id,
sourceAnchorId: anchorData.value?.id,
targetNodeId: nodeModel.id,
targetAnchorId: nodeModel.id + '_left',
})

closeNodeMenu()
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Oct 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided code snippet is for a JavaScript/TypeScript function clickNodes that sets up an event handler to handle clicks on nodes within a graph or diagram. Specifically, it appears to be related to connecting two nodes with an edge.

Here are some potential issues and suggestions:

  1. Duplicate Target Node IDs:

    targetNodeId: nodeModel.id + '_left';

    If nodeModel.id ends with _left, adding .value?._id from the anchorData before this line would prevent errors if anchorData might not exist. However, without additional context, this could lead to unexpected behavior if there's no default value for anchorData.

  2. Event Handling:
    The code doesn’t specifically mention how the clickNodes function was triggered (e.g., via an event listener). Ensure that this function is correctly hooked up in your application to manage clicking events on nodes.

  3. Function Body:
    There is only one action (createConnection) being performed inside the clickNodes function. This should either call multiple functions sequentially or group them appropriately. Consider whether there’s redundancy in actions being repeated multiple times.

  4. Node Model ID Concatenation with "_left":
    It's important to verify that concatenating strings like ${props.nodeModel.id}_left aligns with the data format expected throughout your application. Ensure consistency in naming conventions and data manipulation logic.

Suggested improvement ideas:

  • Use type checking to ensure all required properties (sourceNodeId, targetNodeId) exist and have valid values.
  • Add comments or documentation explaining the purpose and flow of the clickNodes function.
  • Simplify complex expressions by breaking them into smaller, more readable parts. For example, 
    const sourceAnchor = anchorData && anchorData.value ? { id: anchorData.value.id, } : null;
createConnection({
  sourceNodeId: props.nodeModel.id,
  sourceAnchorId: sourceAnchor && sourceAnchor.id,
  targetNodeId: nodeModel.id,
  targetAnchorId: nodeModel.id + '_left',
});

These checks and improvements can help ensure the function behaves as intended across different contexts and provides clearer code structure.

Expand Down
Loading