[BI]Take the show more functions button outof logging container #1011
Conversation
WalkthroughThe "Show More Functions" button is relocated from within the logging function group to the panel level in the NodeList component. The computation of the callable function node is refactored from local, in-situ extraction to global extraction from filteredCategories, with conditional rendering based on node existence and search state. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~5–10 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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.
Example instruction:
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx (1)
838-855: Improve type safety and consider icon choice.The type assertion
as Nodeon line 840 bypasses type checking. While the find condition on line 774 makes this likely safe, it's not guaranteed. Additionally, thechevron-righticon typically indicates navigation or expansion rather than an action that adds a node, which might confuse users.Consider these improvements:
1. Improve type safety:
- <S.AdvancedSubcategoryHeader onClick={() => handleAddNode(callFunctionNode as Node)}> + <S.AdvancedSubcategoryHeader onClick={() => { + if (callFunctionNode && "id" in callFunctionNode && "label" in callFunctionNode) { + handleAddNode(callFunctionNode); + } + }}>2. Use a more intuitive icon:
- <Codicon name="chevron-right" /> + <Codicon name="list-tree" />The
list-treeicon better represents viewing more functions, or alternatively usesymbol-methodto indicate functions.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx(3 hunks)
🧰 Additional context used
🧠 Learnings (5)
📓 Common learnings
Learnt from: CR
Repo: wso2/vscode-extensions PR: 0
File: workspaces/ballerina/component-diagram/AGENTS.md:0-0
Timestamp: 2025-11-25T06:34:10.812Z
Learning: Applies to workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/GeneralWidget.tsx : For regular services with more than 3 functions, show only the first 2 functions with a 'View All' button; for services with 3 or fewer functions, show all functions
Learnt from: CR
Repo: wso2/vscode-extensions PR: 0
File: workspaces/ballerina/component-diagram/AGENTS.md:0-0
Timestamp: 2025-11-25T06:34:10.812Z
Learning: Applies to workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/**/*.tsx : Implement lazy expansion of functions: only render function items when they are visible to improve performance for large function lists
📚 Learning: 2025-11-25T06:34:10.812Z
Learnt from: CR
Repo: wso2/vscode-extensions PR: 0
File: workspaces/ballerina/component-diagram/AGENTS.md:0-0
Timestamp: 2025-11-25T06:34:10.812Z
Learning: Applies to workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/**/*.tsx : Implement lazy expansion of functions: only render function items when they are visible to improve performance for large function lists
Applied to files:
workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx
📚 Learning: 2025-11-25T06:34:10.812Z
Learnt from: CR
Repo: wso2/vscode-extensions PR: 0
File: workspaces/ballerina/component-diagram/AGENTS.md:0-0
Timestamp: 2025-11-25T06:34:10.812Z
Learning: Applies to workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/GeneralWidget.tsx : For regular services with more than 3 functions, show only the first 2 functions with a 'View All' button; for services with 3 or fewer functions, show all functions
Applied to files:
workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx
📚 Learning: 2025-11-25T06:34:10.812Z
Learnt from: CR
Repo: wso2/vscode-extensions PR: 0
File: workspaces/ballerina/component-diagram/AGENTS.md:0-0
Timestamp: 2025-11-25T06:34:10.812Z
Learning: Applies to workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/GraphQLServiceWidget.tsx : For GraphQL services, group functions by type (Query, Subscription, Mutation) and allow independent expand/collapse of each group. Default state: Query group open, Subscription/Mutation groups collapsed
Applied to files:
workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx
📚 Learning: 2025-11-25T06:34:10.812Z
Learnt from: CR
Repo: wso2/vscode-extensions PR: 0
File: workspaces/ballerina/component-diagram/AGENTS.md:0-0
Timestamp: 2025-11-25T06:34:10.812Z
Learning: Applies to workspaces/ballerina/component-diagram/src/components/**/*.tsx : Use React 18.2.0 features including concurrent rendering and automatic batching; avoid class components in favor of functional components with hooks
Applied to files:
workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx
🔇 Additional comments (2)
workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx (2)
835-856: Implementation successfully achieves PR objective.The relocation of the "Show More Functions" button from within the Logging category to the panel level is well-executed. The conditional rendering preserves the expected behavior (hidden during search), and the interaction remains consistent with the previous implementation.
770-774: Based on the repository clone failure, I cannot directly verify the code. However, I can analyze the review comment against standard React patterns and the information provided. Let me assess what can be verified from the context:Analysis of the Review Comment:
Memoization Suggestion: The code snippet shows
flatMap(...).filter(...).find(...)operations that would run on every render. The suggestion to useuseMemois a valid performance optimization for such patterns.Duplicate Rendering Concern: The review asks to verify the FUNCTION node isn't duplicated. Without access to the file, I cannot confirm:
- Whether FUNCTION is removed from the original category items (likely Logging)
- Whether filtering prevents dual rendering
- The complete data flow
Suggested Diff: The diff appears syntactically valid but I cannot confirm:
- If
useMemois already imported- If
filteredCategoriesis the correct dependency- If there are other dependencies that should trigger the memoization
Since I cannot verify the critical aspects of this review comment due to repository access failure, I must mark it for manual verification:
Memoize the callFunctionNode extraction and verify no duplicate rendering of FUNCTION node.
The
flatMap+filter+findoperations execute on every render, which impacts performance with large category lists. Ensure the FUNCTION node has been removed from the original category items (likely Logging) to prevent rendering it both within its category and at the panel level.The suggested memoization with
useMemois appropriate, but cannot be verified without access to confirm: (1) current import statements, (2) whether FUNCTION is filtered from original categories, and (3) the correct dependency array for your data flow.
2 participants
Purpose
Fixes: wso2/product-ballerina-integrator#1839
Goals
Approach
UI Component Development
npm run storybookfrom the root directory to view current components.Manage Icons
User stories
Release note
Documentation
Training
Certification
Marketing
Automation tests
Security checks
Samples
Related PRs
Migrations (if applicable)
Test environment
Learning
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.