feat(charts): Style charts to match editor's color theme

[OlegWock]

@coderabbitai ignore

Summary by CodeRabbit

Release Notes

• New Features

  • Charts now gracefully display rendering errors with helpful error details instead of crashing.
  • Chart visualizations now dynamically adapt to match your VS Code theme colors.

• Chores

  • Added react-error-boundary dependency.

[linear]

GRN-4953 Dark mode support for chart block output

Currently we render charts on white background by default. Ideally, we'd want to detect whether current theme is dark or light and pick colors for chart appropriately. Maybe even use background color directly from the editor's theme to make output look seamless

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 71%. Comparing base (a50443c) to head (141ce80).
⚠️ Report is 1 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@          Coverage Diff          @@
##            main     #76   +/-   ##
=====================================
  Coverage     71%     71%           
=====================================
  Files        527     527           
  Lines      39474   39474           
  Branches    4933    4933           
=====================================
  Hits       28277   28277           
  Misses      9563    9563           
  Partials    1634    1634           

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[OlegWock]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR adds error boundary protection and dynamic theming to the Vega chart renderer. It installs react-error-boundary as a dependency, creates an ErrorFallback component for graceful error display, and implements theme detection via CSS variables with MutationObserver. The VegaRenderer applies detected theme colors to chart specs using Immer for immutable patching, while the error boundary wraps the renderer to catch and display runtime errors.

Sequence Diagram(s)

sequenceDiagram
    participant App
    participant ErrorBoundary
    participant VegaRenderer
    participant MutationObserver
    participant VegaChart

    App->>ErrorBoundary: Render with fallback
    ErrorBoundary->>VegaRenderer: Mount
    VegaRenderer->>MutationObserver: Initialize theme observer
    VegaRenderer->>VegaRenderer: Get theme colors from CSS vars
    VegaRenderer->>VegaRenderer: Apply colors to spec (Immer)
    VegaRenderer->>VegaChart: Render with themedSpec
    
    MutationObserver->>VegaRenderer: Detect theme change
    VegaRenderer->>VegaRenderer: Recompute theme colors
    VegaRenderer->>VegaChart: Re-render with updated spec
    
    alt Rendering Error
        VegaChart--xErrorBoundary: Error thrown
        ErrorBoundary->>ErrorBoundary: onError callback
        ErrorBoundary->>ErrorFallback: Render fallback UI
        ErrorFallback->>App: Display error message & stack
    end

Loading

Possibly related PRs

• feat(charts): Add visualization blocks support #66: Directly extends these vega-renderer files by adding theming, ErrorBoundary component, and react-error-boundary dependency.

Suggested reviewers

• andyjakubowski
• saltenasl
• jamesbhobbs
• Artmann

Pre-merge checks

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "Style charts to match editor's color theme" accurately captures the primary feature of the changeset—the new dynamic theming system in VegaRenderer.tsx that detects VS Code's theme and applies matching colors to charts. The title is concise, specific, and avoids vague language. While the PR also adds error boundary handling (a secondary change), the title appropriately focuses on the main objective, which is acceptable per PR conventions.

---

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

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/webviews/webview-side/vega-renderer/index.ts (1)

15-44: Consider clarifying dual error handling strategy.

The try/catch and ErrorBoundary handle different error phases:

• try/catch: JSON parsing and DOM setup errors (synchronous)
• ErrorBoundary: React render lifecycle errors (asynchronous)

A brief comment explaining this distinction would improve maintainability.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f5cec10 and 0781ae7.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (5)

• .eslintrc.js (1 hunks)
• package.json (1 hunks)
• src/webviews/webview-side/vega-renderer/ErrorBoundary.tsx (1 hunks)
• src/webviews/webview-side/vega-renderer/VegaRenderer.tsx (2 hunks)
• src/webviews/webview-side/vega-renderer/index.ts (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/webviews/webview-side/vega-renderer/index.ts (3)

src/webviews/webview-side/react-common/errorBoundary.tsx (1)

• ErrorBoundary (11-35)

src/webviews/webview-side/vega-renderer/ErrorBoundary.tsx (1)

• ErrorFallback (4-37)

src/webviews/webview-side/vega-renderer/VegaRenderer.tsx (1)

• VegaRenderer (50-121)

🔇 Additional comments (6)

package.json (1)

2198-2198: LGTM: Dependency addition aligns with usage.

The react-error-boundary@^6.0.0 dependency is correctly added to support the new ErrorBoundary integration in the Vega renderer.

.eslintrc.js (1)

77-77: LGTM: ESLint configuration updated correctly.

Adding react-error-boundary to the ignore list is necessary for unresolved import warnings.

src/webviews/webview-side/vega-renderer/index.ts (1)

4-6: LGTM: Imports are correct.

ErrorBoundary from react-error-boundary and local ErrorFallback properly imported.

src/webviews/webview-side/vega-renderer/ErrorBoundary.tsx (1)

4-37: LGTM: Clean error UI with proper theming.

ErrorFallback component correctly uses VSCode CSS variables and provides expandable stack trace. Inline styles are appropriate for this use case.

src/webviews/webview-side/vega-renderer/VegaRenderer.tsx (2)

21-48: LGTM: Theme detection implemented correctly.

MutationObserver properly watches theme changes and cleanup prevents memory leaks. The approach is appropriate for VSCode webviews.

---

72-108: structuredClone is fully supported.

VSCode 1.103.0 promotes Electron 37 to stable with Chromium 138.0.7204.100, which exceeds the Chrome 98+ requirement for structuredClone. No compatibility concerns.