feat(app): plugin-driven renderer + markdown plugin (#220)

[alfredo1996]

Summary

Second PR in the plugin system epic. Wires the registry into `chart-renderer.tsx` and migrates markdown as proof of concept.

Stacked on: PR #377 (plugin registry primitives). Merge that first.

Architecture

• New directory: `app/src/plugins/` holds the global registry singleton + individual chart plugins
• Plugin lookup in renderer: `chart-renderer.tsx` now calls `pluginRegistry.get(type)` FIRST; the existing switch remains as a safety fallback
• Uniform plugin component props: All plugins receive `{ data, settings, stylingRules, paramValues, colorScales, onClick, connectionId, widgetId, resultId, query, autoFit, clickableColumns, colorThresholds }`

Markdown migration (proof of concept)

• Simplest plugin — content-only widget, no query, no styling
• Shows the pattern: read specific fields from `settings`, render component
• Legacy switch case kept as fallback (will be removed in PR 4)

Tests

• 6 new markdown plugin tests (capabilities, transform, component render)
• 3 new global registry tests (registration on import, idempotency)
• All 1852 app tests pass (+9 new)

Test plan

• TypeScript clean
• 1852 app tests pass
• E2E: markdown widgets still render (via CI)
• Manual: add a markdown widget, verify content renders

Related: #220, epic #221

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced a plugin system for extensible chart rendering with dynamic registration and lookup of custom chart types.
  • Added "Markdown" chart type as a built-in plugin for rendering static markdown content without data queries.
  • Chart renderer now supports plugin-based dispatch before falling back to legacy hard-coded chart types.

• Tests

  • Added test coverage for the plugin registry initialization and idempotency.
  • Added test coverage for the markdown plugin capabilities and component rendering.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

Walkthrough

Introduces a plugin registry system for chart rendering. The ChartRendererInner component now checks the plugin registry before the legacy switch dispatch. A markdown plugin is implemented and registered, with comprehensive test coverage for both the plugin and registry functionality.

Changes

Cohort / File(s)	Summary
Chart Renderer Plugin Integration app/src/components/chart-renderer.tsx	Added plugin registry lookup (pluginRegistry.get(type)) before existing switch dispatch; returns plugin component with full prop forwarding if found, otherwise falls back to legacy behavior.
Markdown Plugin Implementation app/src/plugins/markdown.tsx	New markdown chart plugin with content-only rendering, no click actions or styling, includes plugin options schema and description.
Plugin Registry Infrastructure app/src/plugins/registry.ts, app/src/plugins/index.ts	Added plugin registry singleton and idempotent registration module; re-exports registry and plugin-related types from shared library.
Plugin System Tests app/src/plugins/__tests__/markdown.test.tsx, app/src/plugins/__tests__/registry.test.ts	Added test suites validating markdown plugin metadata and options, registry registration behavior, and fallback lookup for unknown chart types.

Sequence Diagram(s)

sequenceDiagram
    participant Client as Client / User
    participant Renderer as ChartRendererInner
    participant Registry as PluginRegistry
    participant Plugin as MarkdownPlugin
    participant Widget as MarkdownWidget

    Client->>Renderer: Request chart render (type="markdown")
    Renderer->>Registry: pluginRegistry.get("markdown")
    Registry-->>Renderer: Return plugin
    Renderer->>Plugin: Call plugin.component(props)
    Plugin->>Widget: Render MarkdownWidget
    Widget-->>Client: Display markdown content

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

• feat(app): chart plugin system — registry-driven rendering, options, and transforms #220: Implements registry-driven chart plugin design by adding plugin registry, markdown plugin, and pluginRegistry.get lookup in ChartRendererInner as described in the issue.

Possibly related PRs

• feat(app): chart plugin registry — contract + registry primitives (#220) #377: Implements the underlying chart plugin contract and createPluginRegistry primitives that this PR imports and uses.
• feat(app): add error boundary for chart rendering #274: Both modify app/src/components/chart-renderer.tsx and the ChartRendererInner dispatch logic—retrieved PR introduced ChartErrorBoundary and extracted the switch, main PR adds pluginRegistry.get lookup before that switch.
• feat(component): add rule-based styling for Graph and Map charts #278: Both modify chart-renderer.tsx dispatch logic; retrieved PR updates prop forwarding for specific chart types, main PR adds plugin lookup that can short-circuit the existing dispatch.

Suggested labels

enhancement, pkg:app, area:widgets

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ 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 accurately captures the main changes: introducing a plugin-driven renderer architecture and implementing the markdown plugin as a proof of concept.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/chart-plugin-renderer

---

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

[sonarqubecloud]

Quality Gate failed

Failed conditions
73.3% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud