release: v0.8 — UX & Charts

[alfredo1996]

Summary

Release branch for milestone v0.8 — UX & Charts. All 10 issues closed.

Features

• feat(component): UX design system — Deep Ocean palette, chart colors, ECharts themes #21 Design system — Deep Ocean palette, chart colors, ECharts themes
• feat: AST-based code completion for query editor #72 Schema-aware code completion — unified CodeMirror 6 architecture with vendored cypher-lang, language resolver registry
• feat(component): Markdown and iFrame widget types #24 Markdown & iFrame widgets — content-only widget types with security-first sanitization
• feat(component): Additional chart types — Gauge, Sankey, Sunburst, Radar, Treemap #23 Additional chart types — Gauge, Sankey, Sunburst, Radar, Treemap

Architecture highlights

• Vendored cypher-lang/ module built on @neo4j-cypher/language-support (no React wrapper dependency)
• LanguageResolver type + registry pattern for extensible editor language support
• Content-only widget pattern (no query/connection required)
• 5 new ECharts chart components with transform functions

Test coverage

• 884 component unit tests
• 1210 app unit tests
• 197+ E2E tests (Playwright)

Test plan

• Component unit tests pass
• App unit tests pass
• E2E tests pass
• TypeScript type-check clean
• Production build succeeds
• Manual review of new chart rendering
• Storybook stories for new components (TODO)

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • New charts (Gauge, Sankey, Sunburst, Radar, Treemap); selectable color palettes; Markdown and iFrame content widgets; content-only widget support; connection edit flow; schema-aware query autocomplete with manual refresh; dashboard fullscreen improvements; parameter substitution in content/URLs.

• Bug Fixes

  • Dashboard layout sanitation to prevent invalid coordinates on save.

• Tests

  • Large expansion of E2E and unit test coverage for editors, charts, widgets, schema handling, and language tooling.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

Walkthrough

Adds content-only widgets and five new chart types with palettes, implements schema-aware editor/autocomplete plumbing (types, store, resolvers, Cypher vendored helpers), editor/schema refresh UI, connection edit/update flow, many tests/stories, Playwright/CI dynamic server-port wiring, and various dashboard/widget UX refinements.

Changes

Cohort / File(s)	Summary
CI / Playwright ​.github/workflows/ci.yml, app/playwright.config.ts, app/e2e/global-setup.ts	Renamed/rewired typecheck job, increased timeout, adjusted cache keys, consolidated concurrent coverage commands, and introduced dynamic test server port/baseURL for Playwright.
E2E tests & tweaks app/e2e/code-completion.spec.ts, app/e2e/content-widgets.spec.ts, app/e2e/*.spec.ts	Added Playwright suites for schema-aware completion and content widgets; tightened selectors and switched some API calls to use Playwright baseURL.
Editor / Language resolvers & Cypher vendoring component/src/lib/language-resolvers.ts, component/src/lib/cypher-lang/...	New language resolver registry and multiple vendored CM6 Cypher modules (autocomplete, parser-adapter, signature help, constants, utils) to provide schema-aware CM6 extensions.
Query editor integration & UI component/src/components/composed/query-editor.tsx, app/src/components/widget-editor/query-editor-panel.tsx	QueryEditor accepts and reconfigures with schema, supports in-place compartment reconfigure and abortable init; QueryEditorPanel adds schema prefetch, refresh button, and passes schema/refetch to editor.
Schema types, store & hooks app/src/lib/schema-types.ts, app/src/stores/schema-store.ts, app/src/hooks/use-schema.ts, app/src/hooks/__tests__/use-schema.test.ts	Introduced DatabaseSchema types, added clearSchema store API, createRefreshSchema helper, and extended useConnectionSchema to expose refreshSchema with tests.
Content-only widgets & param substitution component/src/components/composed/markdown-widget.tsx, component/src/components/composed/iframe-widget.tsx, component/src/components/composed/index.ts, component/src/lib/param-substitute.ts, component/src/utils/index.ts, app/src/components/widget-editor-modal.tsx, app/src/components/card-container.tsx	Added Markdown and Iframe widgets and exports, substituteParams util, integrated content-only rendering path (skip queries, preview/content substitution) across editor, CardContainer, and modal.
Charts, palettes & renderer component/src/charts/*, component/src/charts/palettes.ts, component/src/charts/types.ts, component/src/charts/base-chart.tsx, app/src/lib/chart-registry.ts, app/src/components/chart-renderer.tsx, component/src/charts/index.ts	Added Gauge/Sankey/Sunburst/Radar/Treemap components, palette system and getPaletteColors, colorPalette prop on BaseChart, registry transforms, and ChartRenderer branches to render new types.
Dashboard & widgets UX app/src/app/(dashboard)/[id]/edit/page.tsx, app/src/app/(dashboard)/[id]/page.tsx, app/src/components/dashboard-container.tsx, app/src/components/graph-exploration-wrapper.tsx	Sanitizes grid layout before save, delayed fullscreen rendering to wait for animation, and replaced portal-based context menu with container-anchored absolute positioning.
Connections / API / hooks / UI app/src/app/(dashboard)/connections/page.tsx, app/src/hooks/use-connections.ts, app/src/app/api/connections/[id]/route.ts	Added useUpdateConnection and UpdateConnectionInput, edit dialog flow/UI for updating connections, and extended PATCH response payload to include createdAt.
Tests & stories app/src/lib/__tests__/*, component/src/lib/__tests__/*, component/src/components/composed/__tests__/*, component/stories/**	Large expansion of unit/integration tests (schema transforms, language resolvers, chart registry, widgets, editor) and many Storybook stories for new charts and widgets.
Monorepo/package tooling & deps component/package.json, package.json	Added CodeMirror/Cypher dependencies to component package and Husky/lint-staged/prettier plus prepare script and lint-staged config at repo root.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant WidgetEditor
    participant QueryEditor
    participant SchemaStore
    participant LanguageResolver
    participant CodeMirror
    participant Autocomplete

    User->>WidgetEditor: open editor / select connection
    WidgetEditor->>QueryEditor: mount(connectionId)
    QueryEditor->>SchemaStore: useConnectionSchema(connectionId)
    SchemaStore-->>QueryEditor: schema + refreshSchema

    User->>QueryEditor: click "Refresh schema"
    QueryEditor->>SchemaStore: refreshSchema()
    SchemaStore->>SchemaStore: invalidate queryClient + clearSchema(entry)
    SchemaStore-->>QueryEditor: updated schema

    User->>CodeMirror: type
    CodeMirror->>LanguageResolver: resolveLanguageExt(language, schema)
    LanguageResolver-->>CodeMirror: Extension[] (sql/cypher with schema)
    CodeMirror->>Autocomplete: request completions
    Autocomplete-->>User: show schema-aware suggestions

Loading

sequenceDiagram
    participant User
    participant WidgetEditor
    participant ChartTypeSelector
    participant PreviewArea
    participant ChartRenderer

    User->>WidgetEditor: choose chart type (markdown/iframe)
    WidgetEditor->>ChartTypeSelector: set isContentOnly
    WidgetEditor->>PreviewArea: hide connection/query controls
    User->>WidgetEditor: enter content/url
    WidgetEditor->>ChartRenderer: render with content props
    ChartRenderer->>ChartRenderer: detect content-only -> render MarkdownWidget / IframeWidget
    ChartRenderer-->>PreviewArea: display rendered content

Loading

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120 minutes

Possibly related PRs

• feat(component): schema-aware code completion for Cypher and SQL #127: Overlapping schema/autocomplete work — types, hooks, language resolvers, and QueryEditor wiring.
• feat(component): Markdown and iFrame widget types #130: Overlaps content-widget and chart/widget registry additions (Markdown/iFrame and chart-type integration).
• feat(component): CodeMirror 6 query editor with syntax highlighting #63: Related QueryEditor and language/schema-aware integration changes.

Suggested labels

enhancement, pkg:app, pkg:component, area:charts, area:widgets, type: feature

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch release/0.8

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (2)

component/src/components/composed/markdown-widget.tsx (2)

250-282: dangerouslySetInnerHTML usage is appropriately guarded.

The static analysis warning is acknowledged. However, the implementation applies multi-layered sanitization:

1. escapeHtml neutralizes raw HTML tags
2. isSafeUrl allowlists URL schemes
3. Only parser-generated tags reach the DOM

The non-null assertion on line 279 is safe after the early return, but could be made explicit:

♻️ Optional: Remove assertion with type narrowing

   const html = React.useMemo(
-    () => (content ? parseMarkdown(content) : null),
+    () => (content ? parseMarkdown(content) : ""),
     [content],
   );
   ...
-      dangerouslySetInnerHTML={{ __html: html! }}
+      dangerouslySetInnerHTML={{ __html: html }}

🤖 Prompt for AI Agents

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

In `@component/src/components/composed/markdown-widget.tsx` around lines 250 -
282, The non-null assertion on html passed to dangerouslySetInnerHTML in
MarkdownWidget can be removed by narrowing html's type before use: ensure html
is computed only when content exists (using parseMarkdown) or add an explicit
runtime check (e.g., if (!html) return null) so TypeScript knows html is a
string when assigned to dangerouslySetInnerHTML; update the html/content logic
around parseMarkdown and the return that renders dangerouslySetInnerHTML
(references: MarkdownWidget, html, content, parseMarkdown,
dangerouslySetInnerHTML) to eliminate the `!` assertion.

---

130-141: Ordered list close logic is asymmetric but functional.

Unlike unordered lists (line 126-128), ordered lists don't have an explicit else if (listType === "ol") { closeList() } after the match block. The list is instead closed by closeList() in the paragraph fallback (line 160) or by other block elements.

This works correctly but the asymmetry could confuse future maintainers. Consider adding the explicit close for consistency:

♻️ Optional: Add explicit ol close for symmetry

       result.push(
         `<li>${processInline(line.replace(/^\d+\.\s+/, ""))}</li>`,
       );
       continue;
     }
+    else if (listType === "ol") {
+      closeList();
+    }
 
     // Horizontal rule

🤖 Prompt for AI Agents

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

In `@component/src/components/composed/markdown-widget.tsx` around lines 130 -
141, The ordered-list branch lacks the explicit symmetric close found for
unordered lists; update the markdown parsing logic around the ordered-list
handling (the block that tests line.match(/^\d+\.\s+/)) to mirror the unordered
list pattern by adding an else-if that checks if listType === "ol" and calls
closeList() so ol lists are explicitly closed when transitioning out of an
ordered list; keep using result, listType, processInline and closeList() so the
rest of the flow is unchanged.

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In `@component/src/components/composed/__tests__/markdown-widget.test.tsx`:
- Around line 287-294: Update the incorrect inline comment in the test "closes
ordered list when followed by a paragraph": replace the misleading explanation
about the paragraph's ul check with a concise note that the ordered list is
closed by closeList() in the paragraph fallback (reference the listType handling
and the closeList() call in the paragraph branch). Ensure the comment mentions
listType and closeList() so future readers know the <ol> is closed by the
paragraph fallback path rather than the ul-specific branch.
- Around line 273-285: The test comment is incorrect about list
sharing—MarkdownWidget actually closes an <ol> and opens a new <ul> when
switching list types (see the list-handling logic in markdown-widget.tsx);
update the test comment in markdown-widget.test.tsx to describe the actual
behavior and either tighten the assertions to verify separate lists (assert
presence of both "<ol" and "<ul" or that the two <li> elements belong to
different parent list elements) or explicitly state why the current loose
assertions are sufficient.

---

Nitpick comments:
In `@component/src/components/composed/markdown-widget.tsx`:
- Around line 250-282: The non-null assertion on html passed to
dangerouslySetInnerHTML in MarkdownWidget can be removed by narrowing html's
type before use: ensure html is computed only when content exists (using
parseMarkdown) or add an explicit runtime check (e.g., if (!html) return null)
so TypeScript knows html is a string when assigned to dangerouslySetInnerHTML;
update the html/content logic around parseMarkdown and the return that renders
dangerouslySetInnerHTML (references: MarkdownWidget, html, content,
parseMarkdown, dangerouslySetInnerHTML) to eliminate the `!` assertion.
- Around line 130-141: The ordered-list branch lacks the explicit symmetric
close found for unordered lists; update the markdown parsing logic around the
ordered-list handling (the block that tests line.match(/^\d+\.\s+/)) to mirror
the unordered list pattern by adding an else-if that checks if listType === "ol"
and calls closeList() so ol lists are explicitly closed when transitioning out
of an ordered list; keep using result, listType, processInline and closeList()
so the rest of the flow is unchanged.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: dee824a2-5e1f-417e-940d-c41b63bf45bb

📥 Commits

Reviewing files that changed from the base of the PR and between bcee7fd and 2c06f2d.

📒 Files selected for processing (3)

• .github/workflows/ci.yml
• component/src/components/composed/__tests__/markdown-widget.test.tsx
• component/src/components/composed/markdown-widget.tsx

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

• .github/workflows/ci.yml

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Test comment is misleading—lists are not shared.

The comment claims "the unordered item is rendered inside the existing open list (no new

is opened mid-list)." However, the implementation (lines 117-120 in markdown-widget.tsx) does close the <ol> and open a new <ul> when switching list types.

The test passes because assertions only check that <ol> exists and there are 2+ <li> elements, not that they share a container.

♻️ Suggested comment fix

-  it("renders ordered and unordered list items using shared inList state", () => {
-    // Implementation note: the parser uses a single inList flag for both ol and ul.
-    // When switching from ordered to unordered, the unordered item is rendered
-    // inside the existing open list (no new <ul> is opened mid-list).
+  it("closes ordered list and opens unordered list when switching types", () => {
+    // Implementation note: the parser tracks listType and closes the current list
+    // when encountering a different list type.
     const md = "1. Ordered\n- Unordered";

📝 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
	it("renders ordered and unordered list items using shared inList state", () => {
	// Implementation note: the parser uses a single inList flag for both ol and ul.
	// When switching from ordered to unordered, the unordered item is rendered
	// inside the existing open list (no new <ul> is opened mid-list).
	const md = "1. Ordered\n- Unordered";
	render(<MarkdownWidget content={md} />);
	const container = screen.getByTestId("markdown-widget");
	// An ordered list is opened for the first item
	expect(container.innerHTML).toContain("<ol");
	// Both items are rendered as <li>
	const items = container.querySelectorAll("li");
	expect(items.length).toBeGreaterThanOrEqual(2);
	});
	it("closes ordered list and opens unordered list when switching types", () => {
	// Implementation note: the parser tracks listType and closes the current list
	// when encountering a different list type.
	const md = "1. Ordered\n- Unordered";
	render(<MarkdownWidget content={md} />);
	const container = screen.getByTestId("markdown-widget");
	// An ordered list is opened for the first item
	expect(container.innerHTML).toContain("<ol");
	// Both items are rendered as <li>
	const items = container.querySelectorAll("li");
	expect(items.length).toBeGreaterThanOrEqual(2);
	});
🤖 Prompt for AI Agents

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

In `@component/src/components/composed/__tests__/markdown-widget.test.tsx` around
lines 273 - 285, The test comment is incorrect about list sharing—MarkdownWidget
actually closes an <ol> and opens a new <ul> when switching list types (see the
list-handling logic in markdown-widget.tsx); update the test comment in
markdown-widget.test.tsx to describe the actual behavior and either tighten the
assertions to verify separate lists (assert presence of both "<ol" and "<ul" or
that the two <li> elements belong to different parent list elements) or
explicitly state why the current loose assertions are sufficient.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Inline comment is incorrect.

Line 292-293 states the ordered list is closed "by the paragraph's else-if(inList) via ul check," but that's not accurate. The else if (listType === "ul") check on line 126-128 only handles ul. The <ol> is closed by closeList() in the paragraph fallback (line 160).

♻️ Suggested fix

     const container = screen.getByTestId("markdown-widget");
     expect(container.innerHTML).toContain("</ol>");
-    // wait — ordered list gets closed by the paragraph's else-if(inList) via ul check
+    // The ordered list is closed by closeList() in the paragraph handler
     expect(screen.getByText("This is a paragraph")).toBeInTheDocument();

📝 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

	it("closes ordered list when followed by a paragraph", () => {
	const md = "1. Item\nThis is a paragraph";
	render(<MarkdownWidget content={md} />);
	const container = screen.getByTestId("markdown-widget");
	expect(container.innerHTML).toContain("</ol>");
	// wait — ordered list gets closed by the paragraph's else-if(inList) via ul check
	expect(screen.getByText("This is a paragraph")).toBeInTheDocument();
	});
	it("closes ordered list when followed by a paragraph", () => {
	const md = "1. Item\nThis is a paragraph";
	render(<MarkdownWidget content={md} />);
	const container = screen.getByTestId("markdown-widget");
	expect(container.innerHTML).toContain("</ol>");
	// The ordered list is closed by closeList() in the paragraph handler
	expect(screen.getByText("This is a paragraph")).toBeInTheDocument();
	});

🤖 Prompt for AI Agents

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

In `@component/src/components/composed/__tests__/markdown-widget.test.tsx` around
lines 287 - 294, Update the incorrect inline comment in the test "closes ordered
list when followed by a paragraph": replace the misleading explanation about the
paragraph's ul check with a concise note that the ordered list is closed by
closeList() in the paragraph fallback (reference the listType handling and the
closeList() call in the paragraph branch). Ensure the comment mentions listType
and closeList() so future readers know the <ol> is closed by the paragraph
fallback path rather than the ul-specific branch.

[sonarqubecloud]

Quality Gate failed

Failed conditions
2 Security Hotspots
73.2% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud