Add a UI Toggle to Enable/Disable Dev-Time Tracing in BI

[dan-niles]

Purpose

Resolves wso2/product-ballerina-integrator#2446

This PR adds a toggle button in the BI UI to enable/disable dev-time tracing.

Screen.Recording.2026-02-18.at.3.01.36.PM.mov

Summary by CodeRabbit

• New Features
  • Added tracing toggle button with dynamic visual indicators reflecting enabled/disabled states
  • Tracing status is automatically verified on component initialization for accurate state display

[coderabbitai]

Warning

Rate limit exceeded

@dan-niles has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 9 minutes and 15 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📝 Walkthrough

Walkthrough

A tracing toggle button has been added to the DiagramWrapper component's toolbar UI. The feature checks the current tracing status on mount and allows users to enable/disable development-time tracing via RPC calls, updating the button's appearance based on the tracing state.

Changes

Cohort / File(s)	Summary
Tracing Toggle UI State & RPC Integration workspaces/ballerina/ballerina-visualizer/src/views/BI/DiagramWrapper/index.tsx	Added tracing UI state management (isTracingEnabled) with mount-time status check via checkTracingStatus() RPC call. Implemented handleToggleTracing() function to enable/disable tracing and refresh status. Replaced static Chat action button with dynamic Tracing toggle button in both agent and HTTP resource branches, with button appearance and icon/label changing based on tracing state.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 Hop-hop, the trace now glows so bright,
One toggle switch brings clarity to light,
No more lost commits in version control's sight,
Tracing's state is just a click away—
Happy debugging, hip-hip-hooray! 🎉

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (2 warnings, 1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is incomplete. It provides Purpose and a screenshot but lacks Goals, Approach, and other required template sections.	Complete the description by adding Goals, Approach, Release note, Documentation, and other relevant template sections as applicable.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Linked Issues check	❓ Inconclusive	The PR addresses the primary objective of adding a toggle button in the BI UI to enable/disable dev-time tracing, but does not implement the .gitignore prevention feature.	Clarify whether the .gitignore feature was intentionally deferred or if it should be included in this PR to fully resolve issue #2446.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title accurately summarizes the main change: adding a UI toggle to control dev-time tracing in the BI interface.
Out of Scope Changes check	✅ Passed	Changes are limited to the DiagramWrapper component with tracing UI state and toggle functionality, remaining within the scope of adding a tracing toggle to the BI interface.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

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

---

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.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

workspaces/ballerina/ballerina-visualizer/src/views/BI/DiagramWrapper/index.tsx (1)

294-334: Duplicate tracing toggle JSX — extract to a shared element

The tracing ActionButton block (lines 295–305) is copy-pasted verbatim into the isResource branch (lines 324–334). Extract it to avoid future drift.

♻️ Proposed refactor

+    const tracingToggleButton = (
+        <ActionButton
+            appearance={isTracingEnabled ? "primary" : "secondary"}
+            onClick={handleToggleTracing}
+        >
+            <Icon
+                name={isTracingEnabled ? "telescope" : "circle-slash"}
+                isCodicon={true}
+                sx={{ marginRight: 5, width: 16, height: 16, fontSize: 14 }}
+            />
+            {isTracingEnabled ? "Tracing: On" : "Tracing: Off"}
+        </ActionButton>
+    );
 
     // in getActions():
     if (isAgent) {
         return (
             <>
-                <ActionButton
-                    appearance={isTracingEnabled ? "primary" : "secondary"}
-                    onClick={handleToggleTracing}
-                >
-                    <Icon
-                        name={isTracingEnabled ? "telescope" : "circle-slash"}
-                        isCodicon={true}
-                        sx={{ marginRight: 5, width: 16, height: 16, fontSize: 14 }}
-                    />
-                    {isTracingEnabled ? "Tracing: On" : "Tracing: Off"}
-                </ActionButton>
+                {tracingToggleButton}
                 <ActionButton ...>Chat</ActionButton>
             </>
         );
     }
 
     if (isResource && serviceType === "http") {
         return (
             <>
-                <ActionButton
-                    appearance={isTracingEnabled ? "primary" : "secondary"}
-                    onClick={handleToggleTracing}
-                >
-                    ...
-                </ActionButton>
+                {tracingToggleButton}
                 ...
             </>
         );
     }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@workspaces/ballerina/ballerina-visualizer/src/views/BI/DiagramWrapper/index.tsx`
around lines 294 - 334, The tracing ActionButton JSX is duplicated in both
branches; extract it into a shared constant or small component (e.g.,
TracingToggle) and replace the duplicated blocks with that component/constant;
reuse the existing props/state names (isTracingEnabled, handleToggleTracing, and
Icon usage) so behavior and styling remain identical and import/define
TracingToggle near DiagramWrapper to keep scope consistent.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@workspaces/ballerina/ballerina-visualizer/src/views/BI/DiagramWrapper/index.tsx`:
- Around line 168-170: The useEffect that calls checkTracingStatus currently has
an empty dependency array, but checkTracingStatus closes over rpcClient; update
that effect to include rpcClient in its dependency array so it re-runs when
rpcClient changes (i.e., change useEffect(() => { checkTracingStatus(); }, []);
to useEffect(() => { checkTracingStatus(); }, [rpcClient]) ), ensuring the
tracing status is refreshed whenever rpcClient is re-initialized.
- Around line 181-185: handleToggleTracing currently races and swallows errors;
introduce an in-flight flag (e.g., isToggling state) and wrap the
rpcClient.getCommonRpcClient().executeCommand call in try/catch/finally to set
isToggling true before the call and false in finally, call checkTracingStatus
immediately after the command completes (remove the setTimeout), and
log/propagate the caught error (so failures don't silently stall the UI); also
pass disabled={isToggling} to the ActionButton(s) that trigger
handleToggleTracing so the UI prevents double clicks while the toggle is
in-flight (references: handleToggleTracing, isTracingEnabled, isToggling,
rpcClient.getCommonRpcClient().executeCommand, checkTracingStatus,
ActionButton).

---

Nitpick comments:
In
`@workspaces/ballerina/ballerina-visualizer/src/views/BI/DiagramWrapper/index.tsx`:
- Around line 294-334: The tracing ActionButton JSX is duplicated in both
branches; extract it into a shared constant or small component (e.g.,
TracingToggle) and replace the duplicated blocks with that component/constant;
reuse the existing props/state names (isTracingEnabled, handleToggleTracing, and
Icon usage) so behavior and styling remain identical and import/define
TracingToggle near DiagramWrapper to keep scope consistent.