Skip to content

release/1.1 → dev: all v1.1 features + plugin system - #394

Merged
alfredo1996 merged 57 commits into
devfrom
release/1.1
Apr 6, 2026
Merged

release/1.1 → dev: all v1.1 features + plugin system#394
alfredo1996 merged 57 commits into
devfrom
release/1.1

Conversation

@alfredo1996

@alfredo1996 alfredo1996 commented Apr 6, 2026

Copy link
Copy Markdown
Owner

Merges release/1.1 into dev with all v1.1 features including plugin system, 14 bug fixes, docs, CLI.

Summary by CodeRabbit

Release Notes

  • New Features

    • Added extensible chart plugin system for managing visualizations
    • Introduced form field validation with blur-time checking and static option support
    • Added dual Y-axis support for line charts with configurable series assignment
    • Implemented zoom in/out controls for graph visualization
    • Added getting-started guide for new dashboard creation
    • Enabled click action support for gauge charts
  • Improvements

    • Enhanced graph exploration with edge metadata and badge-style property panel headers
    • Added line connection and end-label display options
    • Updated legend styling across multiple chart types
    • Optimized chart resizing for improved rendering accuracy
    • Made sidebar profile button navigate directly to settings

alfredorubin96 and others added 30 commits April 5, 2026 13:29
Convert the user footer section from a static div to a clickable
button that navigates to /settings/profile. Adds cursor-pointer,
hover styling, and aria-label for keyboard accessibility.

Closes #351

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
When a widget is first placed on a dashboard grid, the container
often starts with 0 dimensions during ECharts init. The first
setOption() draws to a 0x0 canvas, leaving the chart blank until
the user resizes or reloads.

Force instance.resize() after setOption so the chart picks up the
real container size on first render.

Closes #332

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
buildCategoryAxisLabel now considers container width when computing
rotation — narrower containers rotate more aggressively so labels
don't overlap.

Thresholds (pixels per label):
- < 40px: 60°
- < 70px: 45°
- < 100px: 30°
- >= 100px: 0°

Also tightens label truncation to 10 chars when container is < 400px.

Closes #337

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add two new boolean options to LineChart:
- connectNulls: draw lines through missing (null) data points
- endLabel: show series name label at the end of each line

Exposed via the chart options schema so users can toggle in the UI.

Closes #146

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add edge ID to metadata items in relationship inspection panel
- Add Badge indicator showing 'Node' or 'Relationship' in panel header
- Thread optional id through GraphEdge type and transform pipeline so
  the inspection panel can surface the internal element id for edges

Closes #352

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add rightAxisSeries prop to LineChart so series with different scales
can share the same chart. When rightAxisSeries is non-empty, yAxis
becomes an array [leftAxis, rightAxis] and each series gets
yAxisIndex 0 or 1 based on whether its name appears in the set.

Also adds a rightYAxisLabel prop for the secondary axis label, exposes
both options in the chart options panel as text inputs (comma-separated
for series names), and wires them through chart-renderer.

Closes #159
Adds static options support for the form widget's select field type.
Users can now provide a comma-separated list of options (e.g.
'low,medium,high') instead of writing a seed query. When staticOptions
is set, it takes precedence over the seed query. Multi-select and
cascading-select still use seed queries only.

Closes #151
Replace the minimal EmptyState on the dashboards page with a welcoming
Getting Started guide for first-time users. Shows a welcome message, a
prominent "Create your first dashboard" CTA, a link to the docs, and a
three-step guide (connect, create, add widgets) with deep links to the
relevant pages.

Closes #333

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
feat: clicking user icon in sidebar opens profile settings (#351)
fix: bar chart blank render on initial widget placement (#332)
…roll

feat: scrollable pie chart legend with better controls (#338)
…ation

feat: responsive bar chart label rotation based on widget width (#337)
…bels

feat(component): connect nulls and end labels for line chart
…on-metadata

fix: show ID and entity type in graph inspection panel (#352)
feat(component): dual Y-axis support for line chart
feat: select dropdown field type for form widget (#151)
…pty-state

feat: onboarding guide on empty dashboards page (#333)
…on-v2

feat: field validation for form widget (#150)
alfredo1996 and others added 18 commits April 5, 2026 19:57
feat(component): zoom controls and node count for graph chart
First PR in the plugin system epic (#221). Adds the core contract and
registry without touching existing chart code.

The plugin registry will eventually replace the switch statement in
chart-renderer.tsx and the scattered edits across chart-registry.ts,
chart-options/, and query-editor-panel.tsx. This PR is purely additive —
no existing code paths change.

New files:
- app/src/lib/chart-plugin-registry.ts — defineChartPlugin, createPluginRegistry
- app/src/lib/__tests__/chart-plugin-registry.test.ts — 21 tests

Plugin contract (ChartPluginConfig):
- type, label, component, transform — required
- validate, options, queryHint, compatibleWith, stylingTargets — optional
- capabilities: { supportsClickAction, supportsStyling, isECharts, requiresQuery }
- enrichClickEvent — plugin-specific click event enrichment

Registry API:
- register/unregister/get/has/getAll/getTypes/getCompatibleWith

Defaults:
- supportsClickAction: true
- supportsStyling: true when stylingTargets provided, else false
- isECharts: false, requiresQuery: true

Related: #220, epic #221

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…220)

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

Architecture:
- New `app/src/plugins/` directory holds the global registry singleton
  and individual chart plugins
- `chart-renderer.tsx` now checks `pluginRegistry.get(type)` FIRST;
  the existing switch statement remains as a safety fallback for
  charts not yet migrated
- Plugin component receives a uniform props shape: `{ data, settings,
  stylingRules, paramValues, colorScales, onClick, connectionId,
  widgetId, resultId, query, autoFit, clickableColumns, colorThresholds }`

Markdown migration (first plugin):
- New `app/src/plugins/markdown.tsx` defines the markdown plugin
- Content-only widget with no query, no click action, no styling
- Component adapter reads `settings.content` and renders MarkdownWidget
- The legacy switch case is kept as fallback (dead code after registration)

Tests added:
- 6 markdown plugin tests (capabilities, transform, component render)
- 3 global registry tests (registration on import, idempotency, unknown types)

All 1852 app tests pass (+9 new).

Related: #220, epic #221

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
feat(app): chart plugin registry — contract + registry primitives (#220)
feat(app): plugin-driven renderer + markdown plugin (#220)
Third PR in the plugin system epic. Migrates the three most-used
chart types from the hardcoded switch statement into self-contained
plugin files.

New plugins:
- app/src/plugins/bar.tsx — BarPluginComponent adapter + plugin config
- app/src/plugins/line.tsx — LinePluginComponent (includes dual Y-axis,
  connectNulls, endLabel from #146/#159)
- app/src/plugins/pie.tsx — PiePluginComponent (donut, rose, topN)

Changes to chart-renderer.tsx:
- Removed bar/line/pie/markdown cases from switch (dead code)
- Removed now-unused BarChart/LineChart/PieChart dynamic imports
- Removed now-unused MarkdownWidget import
- Plugin registry lookup intercepts these types before the switch

Each plugin reuses existing transforms/validators from chart-registry
to stay behaviorally identical during migration. Future PRs will
further consolidate options schemas + query hints into plugin configs.

Tests added:
- 6 bar plugin tests (capabilities, component render, settings passing)
- All 1877 app tests pass (+6 new, total +34 since PR 1)

Related: #220, epic #221

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…mple

feat(app): migrate bar/line/pie charts to plugin system (#220)
Fourth PR in the plugin system epic. Completes the migration — all
17 chart types now use the plugin registry. The switch statement in
chart-renderer.tsx is entirely gone.

New plugins (13):
- single-value.tsx, graph.tsx, map.tsx, table.tsx, json.tsx,
  parameter-select.tsx, form.tsx, iframe.tsx, gauge.tsx, sankey.tsx,
  sunburst.tsx, radar.tsx, treemap.tsx

chart-renderer.tsx changes:
- Removed the switch statement (was 540+ lines, now 130 lines total)
- Removed all dynamic imports for individual chart components
- Removed unused type imports
- Only delegates to pluginRegistry.get(type) now; unknown types
  return a helpful "Unknown chart type" error state

Component wiring:
- Plugin adapter receives { data, settings, stylingRules, paramValues,
  colorScales, onClick, onChartClick, connectionId, widgetId, resultId,
  query, autoFit, clickableColumns, colorThresholds } from the renderer
- Each plugin picks the props it needs and calls the underlying component
- handleEChartsClick (ECharts wrapper) vs onChartClick (raw row callback)
  are both passed — plugins pick the right one (e.g. map uses raw,
  bar uses ECharts wrapper)

Special handling:
- Graph: dual path (GraphExplorationWrapper for widgets with connectionId,
  GraphChart for previews) preserved
- Table/ParameterSelect/Form: use app-local components (imported from
  @/components/*) rather than @neoboard/components

All tests pass (1877) + TypeScript clean + ESLint clean.

Related: #220, epic #221

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Turbopack (Next.js 16 default) doesn't correctly handle CJS require()
for transpiled monorepo packages, causing createConnectionModule to
be undefined at runtime. This breaks all database queries.

Changes:
- app/package.json: `next dev --webpack` instead of `--turbopack`
- app/e2e/global-setup.ts: explicit `--webpack` for local E2E dev mode
- app/next.config.ts: add @neoboard/connection to transpilePackages,
  remove it from serverExternalPackages (it's an internal package)
- app/src/lib/connection-adapter.ts: clean require() with docs

E2E tests now pass locally (table, single-value, JSON, Neo4j bar
chart verified). The --webpack flag can be removed once Turbopack
fixes transpilePackages for CJS monorepo packages.

See: vercel/next.js#85316

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…rops

- New: plugins/utils.ts — PluginProps type + useEChartsClick() hook
- All 16 plugins use PluginProps (no more per-plugin interfaces)
- chart-renderer passes only onChartClick (removed handleEChartsClick)
- ECharts plugins wrap onChartClick via useEChartsClick() internally
- Removed unused useMemo, EChartsClickEvent imports from renderer

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
feat(app): migrate all 13 remaining charts to plugin system (#220)
…219)

First PR in the connector plugin system. Adds the plugin contract,
registry, and built-in plugins — without changing any existing code
paths.

New files:
- connection/src/generalized/connector-plugin.ts — ConnectorPlugin
  interface + createConnectorRegistry()
- connection/src/neo4j/plugin.ts — neo4jPlugin
- connection/src/postgresql/plugin.ts — postgresPlugin
- connection/src/connector-registry.ts — global singleton with
  auto-registration, createConnectionModule(), getAllConnectors()
- connection/__tests__/connector-registry.test.ts — 15 tests

Plugin contract:
  type, label, category, createModule, supportsGraphData,
  supportsWrite, queryLanguage, allowedProtocols,
  uriPlaceholder, databasePlaceholder

Registry: register/get/has/getAll/getTypes + validation

Closes #219

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
feat(connection): connector plugin registry + neo4j/postgres plugins (#219)
@coderabbitai

coderabbitai Bot commented Apr 6, 2026

Copy link
Copy Markdown

Warning

Rate limit exceeded

@alfredo1996 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 12 minutes and 55 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 12 minutes and 55 seconds.

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

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 91962349-94be-456f-be0a-1f6d4ef16108

📥 Commits

Reviewing files that changed from the base of the PR and between 4d6f306 and 295fffa.

📒 Files selected for processing (4)
  • docs/.astro/content-modules.mjs
  • docs/src/content/docs/developer/extending/new-chart-plugin.mdx
  • docs/src/content/docs/developer/extending/new-connector-plugin.mdx
  • docs/src/content/docs/developer/index.mdx

Walkthrough

Implements a plugin-driven architecture for chart rendering and introduces a connector registry system. Replaces monolithic switch-based chart rendering with registry-based plugin lookup, adds 15+ new chart plugins, implements form field validation with blur-time checks and static options support, enhances graph exploration with edge metadata and badged properties panels, and establishes modular database connector registration for Neo4j and PostgreSQL.

Changes

Cohort / File(s) Summary
Build Configuration & Bundling
app/next.config.ts, app/package.json, app/e2e/global-setup.ts
Switched dev bundler from Turbopack to webpack, added @neoboard/connection to transpilePackages, and added Neo4j driver modules (neo4j-driver, neo4j-driver-core) to serverExternalPackages.
Chart Plugin Registry Infrastructure
app/src/lib/chart-plugin-registry.ts, app/src/plugins/registry.ts, app/src/plugins/index.ts, app/src/lib/__tests__/chart-plugin-registry.test.ts
Introduced chart plugin registry with defineChartPlugin, createPluginRegistry, and plugin discovery. Handles capability normalization, validation, and compatibility filtering. Includes comprehensive test coverage for registry operations.
Chart Plugins – All Types
app/src/plugins/bar.tsx, app/src/plugins/gauge.tsx, app/src/plugins/graph.tsx, app/src/plugins/line.tsx, app/src/plugins/map.tsx, app/src/plugins/pie.tsx, app/src/plugins/radar.tsx, app/src/plugins/sankey.tsx, app/src/plugins/table.tsx, app/src/plugins/treemap.tsx, app/src/plugins/json.tsx, app/src/plugins/markdown.tsx, app/src/plugins/form.tsx, app/src/plugins/iframe.tsx, app/src/plugins/parameter-select.tsx, app/src/plugins/single-value.tsx, app/src/plugins/sunburst.tsx
15 new chart plugins replacing inline switch-based rendering. Each wires chart component, transformation/validation logic from registry, compatibility constraints, styling targets, and click/styling capabilities. Tests added for bar, markdown, and registry bootstrap.
Chart Renderer & Plugin Utilities
app/src/components/chart-renderer.tsx, app/src/plugins/utils.ts
Replaced monolithic switch(type) with pluginRegistry.get(type) lookup. Removed per-plugin imports and ECharts click wrapping; now delegated to plugins via PluginProps context. Introduced useEChartsClick hook for standardized click handling across plugins.
Component Chart Enhancements
component/src/charts/bar-chart.tsx, component/src/charts/pie-chart.tsx, component/src/charts/line-chart.tsx, component/src/charts/sunburst-chart.tsx, component/src/charts/treemap-chart.tsx, component/src/charts/graph-chart.tsx, component/src/charts/base-chart.tsx, component/src/charts/chart-utils.ts, component/src/charts/types.ts, component/src/components/composed/chart-options/line.ts
Enhanced charts with dual-axis support (line), drill-down interaction (sunburst/treemap via nodeClick), zoom controls (graph), container-aware label rotation/truncation (axis utilities), legend scroll styling (pie), and node/edge count overlay (graph). Added GraphEdge.id field. Added connectNulls and endLabel line options.
Component Chart Tests
component/src/charts/__tests__/graph-chart.test.tsx, component/src/charts/__tests__/line-chart.test.tsx, component/src/charts/__tests__/pie-chart.test.tsx
Added test coverage for graph zoom/node-count, line dual-axis/connect-nulls/end-label, and pie legend scroll styling.
Form Widget & Validation
app/src/lib/form-field-def.ts, app/src/lib/form-field-validation.ts, app/src/lib/__tests__/form-field-validation.test.ts, app/src/components/form-widget-renderer.tsx, app/src/components/widget-editor/form-fields-editor.tsx
Added FormFieldValidationType enum and validationType/staticOptions fields to FormFieldDef. Implemented validateFieldValue with per-type validation (email, number, date, text). Enhanced form renderer with blur-time validation, fieldErrors tracking, and submit-blocking when errors exist. Added static options parsing (comma-delimited) and conditional seed-query suppression in form fields editor.
Dashboard & Layout Updates
app/src/app/(dashboard)/layout.tsx, app/src/app/(dashboard)/page.tsx
Converted sidebar account footer from non-interactive <div> to interactive button navigating to /settings/profile. Added GettingStartedGuide component replacing empty-state when canCreate is true, with three-step onboarding guide and action links.
Graph Exploration Enhancements
app/src/components/graph-exploration-wrapper.tsx, component/src/hooks/useGraphExploration.ts
Added edge id metadata support in exploration. Memoized callbacks for stability; introduced explorationRef for accessing latest exploration state while keeping callback identity stable. Added Badge UI element to properties header (split label into "Node"/"Relationship" badge and truncated title). Consolidated useGraphExploration state into single graphState object.
Connection Package – Connector Registry
connection/src/generalized/connector-plugin.ts, connection/src/connector-registry.ts, connection/src/neo4j/plugin.ts, connection/src/postgresql/plugin.ts, connection/__tests__/connector-registry.test.ts
Introduced ConnectorPlugin contract and ConnectorRegistry with registration, lookup, and type enumeration. Implemented createConnectorRegistry() with validation (non-empty type/label, callable createModule). Registered built-in neo4jPlugin and postgresPlugin with metadata (type, label, category, query language, capability flags, URI placeholders). Added createConnectionModule helper and convenience exports. Comprehensive test coverage for registry operations and built-in plugins.
Connection Adapter Updates
app/src/lib/connection-adapter.ts
Changed module loading from createRequire(import.meta.url) to direct CommonJS require(...) calls for @neoboard/connection internals. Updated eslint suppressions and file comments to reflect webpack-only requirement.
E2E Test Updates
app/e2e/charts.spec.ts
Updated graph node-count selector to .first() to target the first matching element when multiple exist.

Sequence Diagram(s)

sequenceDiagram
    participant Client as Client/Dashboard
    participant Renderer as ChartRenderer
    participant Registry as PluginRegistry
    participant Plugin as ChartPlugin
    participant Component as PluginComponent

    Client->>Renderer: render(type, data, props)
    Renderer->>Registry: get(type)
    Registry-->>Renderer: plugin: ChartPlugin
    Renderer->>Plugin: access plugin.component
    Renderer->>Component: render(PluginProps)
    Component->>Component: transform data via plugin.transform
    Component->>Component: apply styling rules
    Component-->>Client: rendered chart
Loading
sequenceDiagram
    participant App as Application
    participant Registry as ConnectorRegistry
    participant Plugin as ConnectorPlugin
    participant Module as ConnectionModule

    App->>Registry: createConnectionModule(type, authConfig, advOptions)
    Registry->>Registry: getConnector(type)
    Registry-->>Registry: plugin: ConnectorPlugin | undefined
    alt plugin found
        Registry->>Plugin: createModule(authConfig, advOptions)
        Plugin->>Module: instantiate ConnectionModule
        Module-->>Registry: module instance
        Registry-->>App: ConnectionModule
    else plugin not found
        Registry-->>App: Error: unknown connector type
    end
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~55 minutes

Possibly related issues

Possibly related PRs

Suggested labels

enhancement, pkg:app, pkg:component, pkg:connection, area:charts, area:connectors, area:widgets, testing

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 30.23% 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 clearly identifies the main change: merging release/1.1 into dev with v1.1 features and the new plugin system.

✏️ 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 release/1.1

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.

alfredorubin96 and others added 2 commits April 6, 2026 12:51
Two new documentation pages explaining how to extend NeoBoard:

- developer/extending/new-chart-plugin.mdx — full guide with
  defineChartPlugin() reference, PluginProps table, ECharts vs
  custom patterns, and heatmap example
- developer/extending/new-connector-plugin.mdx — ConnectorPlugin
  reference, ConnectionModule implementation guide, registry API,
  and testing patterns

Updated developer index to link plugin guides prominently.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
docs: chart plugin + connector plugin developer guides
@sonarqubecloud

sonarqubecloud Bot commented Apr 6, 2026

Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
1 Security Hotspot
50.5% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants