fix: use stable tool-call keys to prevent inline renderer flickering by lixun910 · Pull Request #579 · sqlrooms/sqlrooms

lixun910 · 2026-05-01T21:14:42Z

The inline sqlrooms/deck map will be re-rendered whenever analysisResult component updated causing flickering.

This pull request improves the rendering of tool groups in the AnalysisResult component by making the React key for each group more stable and unique. Instead of using the group index as the key, it now uses a key derived from the toolCallId values of the group's parts, which helps React efficiently track and update these elements.

Any stateful inline renderer (map, chart, etc.) inside a tool-group will now survive re-renders caused by new streaming segments appearing elsewhere in the conversation, because React can reconcile the component by its stable identity key.

Summary by CodeRabbit

Bug Fixes
- Fixed tool-group rendering so UI elements remain consistent when tool groups are reordered or their count changes.
- Ensured Recent Artifacts display uses a single truncated label span for clearer names.
Documentation
- Updated README examples to clarify title-change callback usage.
Style
- Multiple non-functional formatting and layout cleanups across components for readability.

…t avoid flickering of inline rendereres (e.g. map)

coderabbitai · 2026-05-01T21:14:55Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5191da5c-1f7a-461c-b7c1-9c2f7660c3b9

📥 Commits

Reviewing files that changed from the base of the PR and between 59af20c and 4e590cb.

📒 Files selected for processing (6)

apps/sqlrooms-cli-ui/src/workspace/ArtifactsContainerPanel.tsx
apps/sqlrooms-cli-ui/src/workspace/WorksheetSqlQueryBlockRenderer.tsx
packages/ai-core/src/components/AnalysisResult.tsx
packages/blocks/src/index.ts
packages/documents/README.md
packages/documents/src/BlockDocumentEditor/BlockDocumentBlockControls.tsx

💤 Files with no reviewable changes (3)

packages/documents/README.md
packages/blocks/src/index.ts
packages/documents/src/BlockDocumentEditor/BlockDocumentBlockControls.tsx

✅ Files skipped from review due to trivial changes (2)

apps/sqlrooms-cli-ui/src/workspace/WorksheetSqlQueryBlockRenderer.tsx
apps/sqlrooms-cli-ui/src/workspace/ArtifactsContainerPanel.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

packages/ai-core/src/components/AnalysisResult.tsx

📝 Walkthrough

Walkthrough

The AnalysisResult component's rendering logic now derives React fragment keys from underlying tool parts' toolCallId values instead of segment indices. This changes how React reconciles tool-group DOM elements when segment ordering or length changes.

Changes

Cohort / File(s)	Summary
React Key Generation `packages/ai-core/src/components/AnalysisResult.tsx`	Modified tool-group segment fragment key derivation from index-based to `toolCallId`-based identification to change reconciliation identity.
Formatting & minor UI/docs updates `apps/sqlrooms-cli-ui/src/workspace/ArtifactsContainerPanel.tsx`, `apps/sqlrooms-cli-ui/src/workspace/WorksheetSqlQueryBlockRenderer.tsx`, `packages/blocks/src/index.ts`, `packages/documents/README.md`, `packages/documents/src/BlockDocumentEditor/BlockDocumentBlockControls.tsx`	Non-functional reformatting: import and type declaration layout changes, line-wrapping for event handlers and callbacks, and whitespace/line-wrap edits in block editor helpers and README examples.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

sqlrooms/sqlrooms#628: Modifies packages/ai-core/src/components/AnalysisResult.tsx in the tool segment rendering path (chat-search registration/highlighting) and touches related code.
sqlrooms/sqlrooms#576: Also edits packages/ai-core/src/components/AnalysisResult.tsx tool-group rendering; introduces summaryLabel usage for completed tool groups.

Suggested reviewers

ilyabo

Poem

🐰 I hopped through keys and lines today,
Replaced an index with toolCallId's sway.
Fragments now hold a steadier tune,
While docs and imports got neater soon.
Cheers from a rabbit—code in bloom!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
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.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main fix in the PR: replacing index-based keys with stable tool-call ID-based keys to prevent renderer flickering in tool groups.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch xli-fix-flickering-inline-map-in-chart

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

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

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In `@packages/ai-core/src/components/AnalysisResult.tsx`:
- Line 196: The map callback in AnalysisResult.tsx currently declares an unused
parameter segIdx in segments.map((seg, segIdx) => { ... }); remove the unused
segIdx parameter so the callback is just segments.map((seg) => { ... }) (or use
_ if you prefer an explicit ignored parameter) to satisfy the linter and avoid
no-unused-vars/TS errors; ensure no other references to segIdx remain inside the
map body before committing.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: cff880ac-17e9-4b10-9eb8-8c65b5fd3cd7

📥 Commits

Reviewing files that changed from the base of the PR and between 134461c and 59af20c.

📒 Files selected for processing (1)

packages/ai-core/src/components/AnalysisResult.tsx

coderabbitai · 2026-05-01T21:17:30Z

@@ -195,6 +195,9 @@ export const AnalysisResult: React.FC<AnalysisResultProps> = ({
        <div className="flex w-full flex-col gap-2">
          {segments.map((seg, segIdx) => {


⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Remove unused segIdx to protect lint baseline.

segIdx is no longer used after the key change and may trip no-unused-vars/TS lint in CI.

Suggested fix

- {segments.map((seg, segIdx) => { + {segments.map((seg) => {

As per coding guidelines, "**/*.{ts,tsx,js,jsx}: Maintain lint baseline with warnings only; 0 errors is the expected state".

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

{segments.map((seg, segIdx) => {

{segments.map((seg) => {

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In `@packages/ai-core/src/components/AnalysisResult.tsx` at line 196, The map callback in AnalysisResult.tsx currently declares an unused parameter segIdx in segments.map((seg, segIdx) => { ... }); remove the unused segIdx parameter so the callback is just segments.map((seg) => { ... }) (or use _ if you prefer an explicit ignored parameter) to satisfy the linter and avoid no-unused-vars/TS errors; ensure no other references to segIdx remain inside the map body before committing.

fix: Update key generation for tool groups in AnalysisResult componen…

59af20c

…t avoid flickering of inline rendereres (e.g. map)

coderabbitai Bot reviewed May 1, 2026

View reviewed changes

lixun910 requested review from ilyabo May 4, 2026 19:02

ilyabo approved these changes May 12, 2026

View reviewed changes

ilyabo approved these changes May 20, 2026

View reviewed changes

Merge branch 'main' into xli-fix-flickering-inline-map-in-chart

4e590cb

lixun910 closed this Jun 4, 2026

Navigation Menu

Repository navigation

fix: use stable tool-call keys to prevent inline renderer flickering - #579

fix: use stable tool-call keys to prevent inline renderer flickering#579
lixun910 wants to merge 2 commits into
mainfrom
xli-fix-flickering-inline-map-in-chart

lixun910 commented May 1, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 1, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot May 1, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -195,6 +195,9 @@ export const AnalysisResult: React.FC<AnalysisResultProps> = ({
		<div className="flex w-full flex-col gap-2">
		{segments.map((seg, segIdx) => {

Conversation

lixun910 commented May 1, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot May 1, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

lixun910 commented May 1, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 1, 2026 •

edited

Loading