refactor(demo): Sankey multi-hop + Circle Packing hierarchy (#918, #920)

[alfredo1996]

Closes #918. Closes #920.

Summary

Two demo-data fixes in `scripts/demo/chart-gallery.json`. Both were demo queries that made the chart look uninteresting — different SQL teaches users what each chart can do.

#918 — Sankey: multi-hop flow

Was a 2-column `region → status` query (visually a stacked bar chart). Now a 4-hop `continent → country → category → status` UNION ALL flow that actually shows off the DAG layout.

Wrinkle: the issue's original proposal used `continent → region` for the first hop, but regions named "South America" and "Oceania" collide with continent names, producing self-edges and an ECharts "DAG has cycle" error. Switched to `country` — uniquely named.

#920 — Circle Packing: hierarchical nesting

Was a flat 25-row `SELECT name, value` query — the chart degenerated to single-level circles. Now a parent-keyed UNION (categories with empty `parent` + products under their category name) so the chart renders nested circles per the issue's design intent.

Markdown intros

Both pages' intro markdown was updated:

• Sankey: "Multi-hop flow visualization across N categorical dimensions… any chain just works"
• Circle Packing: documents the `name`/`value`/`parent` shape explicitly (empty `parent` = outer circle; matching parent name = nested inside)

Verification

• Re-seeded locally: `DATABASE_URL=… node scripts/seed-demo.mjs --only=chart-gallery`
• Visited both pages and screenshotted (attached above in the chat)
• `app/src/lib/dashboard/tests/demo-showcases.test.ts` schema validation still passes (75/75 tests in that folder)
• No code/component changes — both charts already supported what's needed (verified by their Storybook stories)

🤖 Generated with Claude Code

Summary by CodeRabbit

• Updates
  • Enhanced Sankey widget to visualize multi-level data flows across continents, countries, categories, and status dimensions
  • Improved Circle Packing widget to display category and product hierarchy relationships with clearer nesting behavior
  • Updated widget titles and descriptions for improved clarity

[coderabbitai]

Walkthrough

Updated chart gallery demo configurations for Sankey and Circle Packing widgets. Sankey now demonstrates a four-level categorical flow across geographic and product dimensions. Circle Packing now displays product-category nesting instead of a flat product list.

Changes

Dashboard Widget Examples

Layer / File(s)	Summary
Sankey multi-hop flow configuration scripts/demo/chart-gallery.json	Widget title updated to "Continent → Region → Category → Status flow"; markdown description revised to explain multi-hop flows across N categorical dimensions; query replaced with three-part UNION ALL to generate source/target/value edges across continent → region → category → status transitions.
Circle Packing category-product hierarchy scripts/demo/chart-gallery.json	Widget title updated to reflect hierarchy; markdown description clarified to specify name/value/parent data shape and nesting behavior; query replaced with two-part UNION ALL that produces category outer circles and product inner circles grouped by their parent category.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• alfredo1996/neoboard#630: Originally added the Circle Packing widget configuration in the same chart gallery JSON file, now being restructured to use hierarchical data.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	Title accurately summarizes the main change: updating Sankey and Circle Packing demo widgets to showcase multi-hop flows and hierarchies, directly addressing issues #918 and #920.
Linked Issues check	✅ Passed	PR implements all coding requirements: Sankey query replaced with 4-hop UNION ALL (continent→country→category→status), Circle Packing query replaced with parent-keyed UNION for category→product hierarchy, widget titles and markdown updated per issue specifications.
Out of Scope Changes check	✅ Passed	All changes are strictly scoped to the two linked issues: Sankey and Circle Packing widget updates in chart-gallery.json; no unrelated files or configuration changes present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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 refactor/issue-918-920-sankey-circle-demo

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@scripts/demo/chart-gallery.json`:
- Line 576: The markdown in the "## Sankey diagram" example text currently says
"continent → region → category → status" but the implemented query and widget
title use "continent → country → category → status"; update the example string
(the "content" value under the Sankey diagram entry) to replace "region" with
"country" so the example flow matches the query and widget naming (refer to the
"## Sankey diagram" block and the widget/query that use continent → country →
category → status).

🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: d3ee38ef-e42c-4508-a723-cdf24aaaedae

📥 Commits

Reviewing files that changed from the base of the PR and between 5b4c09d and 0c63d38.

📒 Files selected for processing (1)

• scripts/demo/chart-gallery.json

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Update the example flow to match the actual query.

The markdown example mentions "continent → region → category → status" but the actual query (line 584) and widget title (line 586) use "continent → country → category → status". Per the PR objectives, country was chosen over region to avoid name collisions. Update the example to match the implementation for consistency.

📝 Suggested fix

-                "content": "## Sankey diagram\n\nMulti-hop flow visualization across N categorical dimensions. Query returns `source`, `target`, `value` rows — the chart wires them into a graph automatically, so any chain (continent → region → category → status, etc.) just works.\n\n**Options shown:** `orient: horizontal`, `showLabels: true`."
+                "content": "## Sankey diagram\n\nMulti-hop flow visualization across N categorical dimensions. Query returns `source`, `target`, `value` rows — the chart wires them into a graph automatically, so any chain (continent → country → category → status, etc.) just works.\n\n**Options shown:** `orient: horizontal`, `showLabels: true`."

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@scripts/demo/chart-gallery.json` at line 576, The markdown in the "## Sankey
diagram" example text currently says "continent → region → category → status"
but the implemented query and widget title use "continent → country → category →
status"; update the example string (the "content" value under the Sankey diagram
entry) to replace "region" with "country" so the example flow matches the query
and widget naming (refer to the "## Sankey diagram" block and the widget/query
that use continent → country → category → status).