Fix listener overlap and component menu button click issue in Architecture Diagram

[kanushka]

Purpose

This PR Fixes two bugs in the Architecture Diagram view:

1. Fixes an issue where listeners that are not explicitly attached to a service would overlap with other elements, making the diagram difficult to read.
2. Fixes a navigation bug where clicking a menu button within an architecture diagram component would incorrectly navigate to the component's main view instead of triggering the menu action.

Fixes

• Listeners that aren't attached to services overlap in the architecture diagram product-ballerina-integrator#1837

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull Request Overview

This PR fixes two distinct bugs in the Architecture Diagram component: overlapping listener nodes and incorrect menu button click behavior. The first fix addresses a layout issue where listeners without attached services would overlap with other diagram elements, making the diagram difficult to read. The second fix prevents menu button clicks from inadvertently triggering component navigation, ensuring the menu action is executed instead.

Key Changes

• Modified the auto-distribution algorithm to position unconnected listeners below all other nodes with appropriate spacing
• Added onMouseDown and onMouseUp event handlers to all menu buttons to stop event propagation and prevent navigation

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
workspaces/common-libs/ui-toolkit/src/components/Button/Button.tsx	Added onMouseDown and onMouseUp props to ButtonProps interface to support event handling customization
workspaces/ballerina/component-diagram/src/utils/diagram.ts	Enhanced autoDistribute function to separate connected and unconnected listeners, positioning unconnected ones below all nodes to prevent overlap
workspaces/ballerina/component-diagram/src/components/nodes/ListenerNode/ListenerNodeWidget.tsx	Added mouse event handlers to menu button that stop propagation to prevent unwanted navigation
workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/GraphQLServiceWidget.tsx	Added mouse event handlers to menu button that stop propagation to prevent unwanted navigation
workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/GeneralWidget.tsx	Added mouse event handlers to menu button that stop propagation to prevent unwanted navigation
workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/AIServiceWidget.tsx	Added mouse event handlers to menu button that stop propagation to prevent unwanted navigation
workspaces/ballerina/component-diagram/src/components/nodes/ConnectionNode/ConnectionNodeWidget.tsx	Added mouse event handlers to menu button that stop propagation to prevent unwanted navigation

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.