Wrap Recharts Sankey chart by harsh21234i · Pull Request #6708 · reflex-dev/reflex

harsh21234i · 2026-07-06T16:13:43Z

Summary

Add rx.recharts.SankeyChart / rx.recharts.sankey_chart
Export Sankey through the Recharts package API
Add docs with simple, stateful, and custom typed/styled node examples
Add unit coverage for responsive-container wrapping and render alias

Tests

uv run pytest tests/units/components/graphing/test_recharts.py -q
uv run ruff check ...
uv run ruff format --check ...
uv run pyright ...

greptile-apps · 2026-07-06T16:17:36Z

Confidence Score: 4/5

Safe to merge after fixing the SVG gradient reference pattern in both doc files - the core implementation is correct and well-tested.

Summary

Core additions: SankeyChart, SankeyNamespace, six TypedDict types, sankey_node / sankey_link decorators with deferred-annotation support, use_chart_width(), and the use_hook_var / use_id helpers.
SVG memoization fix: rx.el.svg now carries MemoizationMode(recursive=False) so gradient defs and the elements that reference them by id share one render scope.
Docs gradient examples: Both docs/api-reference/var_system.md and docs/library/graphing/charts/sankeychart.md show f"url(#{gradient_id})" as the recommended way to link SVG elements to a use_id() value; because Python evaluates the f-string at definition time (calling str(Var) to get the JS variable name, not its runtime value), the resulting string is a static literal that will not match the id attribute rendered by React's useId(), so the gradient is never applied at runtime.

_{Reviews (27) · Last reviewed commit: "Cover the package-level Sankey exports a..."}

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: e94c1102db

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

codspeed-hq · 2026-07-09T22:20:20Z

Merging this PR will not alter performance

✅ 40 untouched benchmarks
⏩ 8 skipped benchmarks¹

_{Comparing harsh21234i:fix/wrap-recharts-sankey-6558 (e4f46c3) with main (bae7294)}

8 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

masenf

needs a changelog entry.

doesn't build

TypeError: Invalid var passed for prop SankeyChart.data, expected type <class 
'reflex_components_recharts.charts.SankeyData'>, got value 
reflex___state____state___docgen_exec___docs_library_graphing_charts_sankeychart_md____sankey_state
.data_rx_state_ of type collections.abc.Mapping[str, 
collections.abc.Sequence[collections.abc.Mapping[str, int]] | 
collections.abc.Sequence[collections.abc.Mapping[str, str]]].
While rendering demo block in docs/library/graphing/charts/sankeychart.md:
class SankeyState(rx.State):
    data = {
        "nodes": [
            {"name": "Marketing"},
            {"name": "Trial"},
            {"name": "Sales"},
            {"name": "Support"},
         
Happened while evaluating page 'library/graphing/charts/sankeychart'

harsh21234i · 2026-07-10T03:17:21Z

Removed link_width because Recharts does not expose a top-level Sankey prop for link width. Link width is
computed from link values and exposed only to custom link renderers.
Widened SankeyChart.data to accept mapping-shaped state vars as well as the explicit SankeyData TypedDict, so
the stateful docs example with unannotated state data works at component construction.
Added regression coverage for both the removed dead prop and unannotated state data.

The earlier SankeyNode.name and SankeyLink optional styling comments were already addressed in the current branch.

harsh21234i · 2026-07-13T07:32:52Z

hey @masenf @FarhanAliRaza can someone look into this ?

…key-6558

* Implement use_hook_var, use_chart_width, and use_id * Add memo-based decorator wrappers for `sankey_chart.node` and `sankey_chart.link` that do the needful to convert the decorated function into a custom component capable of being passed to sankey_chart as props. Updated the docs to show a proper custom link+node example; removed broken partial customization example (merged working pieces with the stateful example).

…`use_id`

- Add reflex-base news entry for the new use_hook_var/use_id APIs (reflex-dev#6708) - Extend recharts news entry to mention custom node/link renderers and use_chart_width - Add unit tests for reflex_base.vars.special and rx.recharts.use_chart_width - Document hook vars in the var_system API reference and wrapping-react custom-code-and-hooks pages; point to the helpers from the sankey docs Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QQXD9PDAbVVDieBfgSHiPX

Addresses #6708 (comment) Verified against the recharts@3.8.1 published types and runtime: the link payload is {...link, source: sourceNode, target: targetNode}, so source and target are resolved node payloads (not indices), thickness is dy (not width), and index exists only on the outer SankeyLinkProps. Also alias the Sankey TypedDicts at module level for the namespace attributes: the generated .pyi rendered 'X = X' class attrs as self-referential type aliases, which broke resolution of sankey_chart.SankeyLinkProps and friends under pyright (7 stub errors, now 0). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QQXD9PDAbVVDieBfgSHiPX

cubic-dev-ai

5 issues found across 15 files

Prompt for AI agents (unresolved issues)


Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="docs/library/graphing/charts/sankeychart.md">

<violation number="1" location="docs/library/graphing/charts/sankeychart.md:155">
P2: Custom node labels keep SVG's default black fill and only add a gray outline, so they become hard to read in dark mode. Use `fill` to set the intended text color instead of `stroke`.</violation>
</file>

<file name="packages/reflex-components-recharts/src/reflex_components_recharts/charts.py">

<violation number="1" location="packages/reflex-components-recharts/src/reflex_components_recharts/charts.py:621">
P3: Minor dead-code/robustness note: `sig.parameters[next(...)] is None` can never be true (a `Parameter` object is never `None`), so this clause is dead. The empty-signature case is already excluded by the preceding `len(sig.parameters) != 1` check. It also uses index-style `next(iter(...))` into the mapping unnecessarily; iterating the values directly is clearer.</violation>

<violation number="2" location="packages/reflex-components-recharts/src/reflex_components_recharts/charts.py:622">
P2: The decorator's runtime validation compares the decorated function's raw parameter annotation with `get_origin(...) is not Var`. When the caller's module uses `from __future__ import annotations` (common in Reflex apps, and where this is enforced on many user modules), `inspect.signature` returns the annotation as an unevaluated string, so `get_origin` returns `None` and the check always fails — the decorator raises `TypeError` at import time for a fully valid `node: rx.Var[SankeyNodeProps]` function, breaking the documented custom-renderer API with a confusing error. Consider resolving annotations (e.g. `typing.get_type_hints(fn, include_extras=True)`) before validating, or skipping the eager check and letting the memo machinery handle typing, so both evaluated and string-lazy annotations are accepted. The same issue exists in `sankey_link`.</violation>

<violation number="3" location="packages/reflex-components-recharts/src/reflex_components_recharts/charts.py:630">
P3: A valid single positional-only renderer parameter passes validation but then fails during memo creation with an unexpected-keyword `TypeError`. Either reject unsupported parameter kinds during validation or invoke positional-only callbacks positionally in both decorators.</violation>

<violation number="4" location="packages/reflex-components-recharts/src/reflex_components_recharts/charts.py:637">
P3: The newly added `sankey_link` decorator duplicates nearly all of `sankey_node`, including validation that already needs identical fixes in two places. A shared renderer-decorator helper parameterized by props type/name would prevent these paths from drifting.</violation>
</file>

_{Tip: instead of fixing issues one by one fix them all with cubic

Re-trigger cubic}

harsh21234i · 2026-08-01T13:28:07Z

Pushed ad5de4fa with two fixes:

Added the missing reflex-components-core dependency for reflex-components-recharts and its pyi build hook dependencies, which fixes the package build failure caused by reflex_base.components.memo importing reflex_components_core.
Updated the Sankey custom link payload types to match the Recharts runtime shape: payload.source / payload.target are resolved node payloads, link height uses dy, and index remains on the outer link props. Added a regression test for this shape.

cubic-dev-ai

5 issues found across 15 files

Prompt for AI agents (unresolved issues)


Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="docs/library/graphing/charts/sankeychart.md">

<violation number="1" location="docs/library/graphing/charts/sankeychart.md:57">
P2: In the "Stateful Example", `SankeyState.data` is declared without a type annotation, so it is not a reactive Var (Reflex builds state vars from annotated fields). The `Randomize flows` button mutates that plain dict in place, which produces no backend state delta, so the chart will not update when clicked. Annotate `data` (e.g. `data: dict[str, Any]` or a `SankeyData`) so the mutation triggers a re-render and the example actually demonstrates the stateful behavior it claims.</violation>

<violation number="2" location="docs/library/graphing/charts/sankeychart.md:165">
P3: Link value labels retain the SVG default black fill, so they can become unreadable on dark backgrounds and render as outlined text elsewhere. This likely should use `fill=rx.color("gray", 12)` like the node labels.</violation>
</file>

<file name="packages/reflex-components-recharts/src/reflex_components_recharts/charts.py">

<violation number="1" location="packages/reflex-components-recharts/src/reflex_components_recharts/charts.py:11">
P3: Importing `_MemoComponentWrapper` makes the Recharts package depend on a private `reflex-base` implementation detail, so an internal memo refactor can break this package at import time. A public callable/protocol return type would avoid exposing that coupling in the Sankey decorator API.</violation>

<violation number="2" location="packages/reflex-components-recharts/src/reflex_components_recharts/charts.py:527">
P3: Custom `name_key`/`data_key` datasets are rejected by the new `SankeyData` type because `name` and `value` remain required default-key fields. Marking those two fields `NotRequired` would let the TypedDict model the alternate-key props exposed by `SankeyChart`.</violation>

<violation number="3" location="packages/reflex-components-recharts/src/reflex_components_recharts/charts.py:739">
P2: Using `rx.recharts.sankey_chart` as a component-style key raises `TypeError: unhashable type: 'SankeyNamespace'`, and it is not normalized by `evaluate_style_namespaces`. Inheriting from `ComponentNamespace` would preserve the standard callable-namespace styling behavior.</violation>
</file>

_{Tip: instead of fixing issues one by one fix them all with cubic

Re-trigger cubic}

cubic-dev-ai

All reported issues were addressed across 15 files

_{Reply with feedback, questions, or to request a fix.

Fix all with cubic | Re-trigger cubic}

…ankey-6558 # Conflicts: # packages/reflex-components-recharts/src/reflex_components_recharts/__init__.py # packages/reflex-components-recharts/src/reflex_components_recharts/general.py # pyi_hashes.json

harsh21234i · 2026-08-13T03:08:31Z

Hey @masenf The failing check is test_call_script[inline], where external4 is not loaded. This PR does not modify the call- script or integration harness code, and the external-script variant passes. Could this be rerun or compared against main to confirm whether it is a baseline/flaky CI failure?

harsh21234i · 2026-09-09T11:54:26Z

hey @masenf please take a look when free :)

FarhanAliRaza

Tested in a real app on top of this branch, with main as the baseline for the unchanged chart types.

The app renders a literal-data Sankey chart with a tooltip, a state-bound chart with node and link config dicts and sort=False, a randomize event, an empty nodes/links toggle, custom node and link renderers on two chart instances, rx.vars.use_id() in a plain function and inside @rx.memo, rx.recharts.use_chart_width() outside a chart, and an area chart as a regression check. Results were asserted from the DOM and the compiled JSX, not from screenshots.

The Sankey wrapper works. The state-bound chart updates on events, empty data does not crash, custom renderers resolve their gradients, and use_chart_width() flips the label anchor at the right edge. The regression chart is unchanged.

Two faults block: use_id() produces different ids for sibling elements, so the documented gradient example renders nothing, and the generated stubs make the documented renderer signature a pyright error for users. The reflex-base lower bound also points at published versions that lack the new module.

Unit tests for the touched test files pass, ruff is clean, and pyright on the package source is clean apart from the stub aliases.

See the inline comments for the requested changes.

cubic-dev-ai

All reported issues were addressed across 6 files (changes from recent commits).

_{Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic}

harsh21234i · 2026-09-10T11:59:40Z

Thanks for identifying this. The failure was caused by stale generated .pyi hashes in pyi_hashes.json, not by the implementation. I updated the charts.pyi and recharts.pyi hashes from the CI-generated values and pushed commit 561e403. The branch is clean, and CI has been triggered again.

The Sankey chart does not need `use_hook_var`, `use_id` or `use_chart_width`. Those vars hoist their hook into every component that consumes them, so two siblings sharing one `use_id()` value get different ids and the documented gradient example rendered nothing. That is a compiler ownership question, and it belongs in its own change rather than in a component wrapper. Remove the `reflex_base.vars.special` module, its docs and test, and the `reflex-base` development pin they required. Rebuild the custom link example on the link `index`, which is unique within a chart, and anchor the outcome label from the node payload instead of the chart width. Export the Sankey TypedDicts from the package module so that `rx.Var[rx.recharts.SankeyNodeProps]` is a valid type expression. The namespace attributes were reached through an instance, which pyright rejects in a type expression. Claude-Session: https://claude.ai/code/session_01QWny288Mh7ymvkb4n6eBB7

cubic-dev-ai

All reported issues were addressed across 15 files (changes from recent commits).

_{Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic}

Restore `use_hook_var`, `use_id` and `use_chart_width`. A hook var is called once per compiled component, so every element that reads it must render inside the same one. The documented gradient example broke because each child of a plain `rx.el.svg` compiled into its own memoized component and called `useId()` for itself. Mark `Svg` as `MemoizationMode(recursive=False)`, the same snapshot boundary that select, dialog and accordion use. The svg root and its descendants now compile into one component, so `defs` and the elements that reference them share one hook value. The docs example goes back to a plain function, and a compile-level regression test asserts one memo unit and one hook call for two siblings under one svg. Export the Sankey TypedDicts from the package module so that `rx.Var[rx.recharts.SankeyNodeProps]` is a valid type expression. Claude-Session: https://claude.ai/code/session_01EXS4neepFi4cuR4TQoNhTi

cubic-dev-ai

All reported issues were addressed across 17 files (changes from recent commits).

_{Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic}

Claude-Session: https://claude.ai/code/session_01EXS4neepFi4cuR4TQoNhTi

Wrap Recharts Sankey chart

e94c110

harsh21234i requested review from a team and Alek99 as code owners July 6, 2026 16:13

greptile-apps Bot reviewed Jul 6, 2026

View reviewed changes

Comment thread packages/reflex-components-recharts/src/reflex_components_recharts/charts.py Outdated

Comment thread packages/reflex-components-recharts/src/reflex_components_recharts/charts.py

chatgpt-codex-connector Bot reviewed Jul 6, 2026

View reviewed changes

Comment thread packages/reflex-components-recharts/src/reflex_components_recharts/charts.py Outdated

Tighten Sankey data typing

574f851

masenf reviewed Jul 9, 2026

View reviewed changes

Tighten Sankey chart wrapper props

00fa111

harsh21234i requested a review from masenf July 10, 2026 03:17

Add Sankey chart changelog fragment

cc9bd95

masenf added the In Review Actively being reviewed by reflex team member label Jul 29, 2026

masenf added 3 commits July 29, 2026 15:41

Merge remote-tracking branch 'origin/main' into fix/wrap-recharts-san…

47f21ad

…key-6558

reflex-components-recharts depends on reflex-base use_hook_var and …

6c9066d

…`use_id`

greptile-apps Bot reviewed Jul 30, 2026

View reviewed changes

Comment thread packages/reflex-components-recharts/src/reflex_components_recharts/charts.py

Fix Sankey payload typing and package build

ad5de4f

greptile-apps Bot reviewed Aug 1, 2026

View reviewed changes

Comment thread packages/reflex-components-recharts/src/reflex_components_recharts/charts.py

cubic-dev-ai Bot reviewed Aug 1, 2026

View reviewed changes

Address Sankey renderer review feedback

7a9c158

cubic-dev-ai Bot reviewed Aug 1, 2026

View reviewed changes

Address Sankey docs and namespace feedback

6a09841

cubic-dev-ai Bot reviewed Aug 1, 2026

View reviewed changes

Comment thread docs/library/graphing/charts/sankeychart.md

Comment thread packages/reflex-base/src/reflex_base/vars/special.py Outdated

Address final Sankey review nits

aa25c05

Harsh Thakare and others added 5 commits August 4, 2026 10:15

Merge remote-tracking branch 'upstream/main' into fix/wrap-recharts-s…

bd6054f

…ankey-6558 # Conflicts: # packages/reflex-components-recharts/src/reflex_components_recharts/__init__.py # packages/reflex-components-recharts/src/reflex_components_recharts/general.py # pyi_hashes.json

Merge branch 'main' into fix/wrap-recharts-sankey-6558

a217435

Merge branch 'main' into fix/wrap-recharts-sankey-6558

d9af11f

Merge branch 'main' into fix/wrap-recharts-sankey-6558

2f98d91

Fix Sankey docs renderer type

43e4f1a

harsh21234i and others added 4 commits August 21, 2026 13:58

Merge branch 'main' into fix/wrap-recharts-sankey-6558

ad58f95

Merge branch 'main' into fix/wrap-recharts-sankey-6558

46b2b5e

fix docs Sankey SVG coordinate types

3e662db

fix Sankey node coordinate types

07c41fd

greptile-apps Bot reviewed Sep 9, 2026

View reviewed changes

Comment thread packages/reflex-base/src/reflex_base/vars/special.py

harsh21234i added 2 commits September 9, 2026 17:02

refactor hook identifiers into constants

ff15e6a

update generated pyi hash

d80d777

FarhanAliRaza reviewed Sep 9, 2026

View reviewed changes

Comment thread packages/reflex-base/src/reflex_base/vars/special.py

FarhanAliRaza reviewed Sep 9, 2026

View reviewed changes

Comment thread packages/reflex-components-recharts/src/reflex_components_recharts/charts.py Outdated

FarhanAliRaza reviewed Sep 9, 2026

View reviewed changes

Comment thread packages/reflex-components-recharts/pyproject.toml Outdated

FarhanAliRaza reviewed Sep 9, 2026

View reviewed changes

Comment thread packages/reflex-components-recharts/src/reflex_components_recharts/general.py Outdated

FarhanAliRaza requested changes Sep 9, 2026

View reviewed changes

fix Sankey typing and hook documentation

9c1bc20

cubic-dev-ai Bot reviewed Sep 10, 2026

View reviewed changes

Comment thread packages/reflex-components-recharts/pyproject.toml

harsh21234i added 2 commits September 10, 2026 15:03

merge current main into Sankey PR

a29b860

Update generated Recharts stub hashes

561e403

cubic-dev-ai Bot reviewed Sep 10, 2026

View reviewed changes

Comment thread docs/library/graphing/charts/sankeychart.md Outdated

cubic-dev-ai Bot reviewed Sep 10, 2026

View reviewed changes

Comment thread tests/units/components/graphing/test_recharts.py

Comment thread docs/wrapping-react/custom-code-and-hooks.md

Cover the package-level Sankey exports and document hook var scoping

e4f46c3

Claude-Session: https://claude.ai/code/session_01EXS4neepFi4cuR4TQoNhTi

FarhanAliRaza approved these changes Sep 10, 2026

View reviewed changes

Uh oh!

Conversation

harsh21234i commented Jul 6, 2026

Summary

Tests

Uh oh!

greptile-apps Bot commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Confidence Score: 4/5

Summary

Uh oh!

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

codspeed-hq Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will not alter performance

Footnotes

Uh oh!

masenf left a comment

Choose a reason for hiding this comment

Uh oh!

harsh21234i commented Jul 10, 2026

Uh oh!

harsh21234i commented Jul 13, 2026

Uh oh!

Uh oh!

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

harsh21234i commented Aug 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

harsh21234i commented Aug 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

harsh21234i commented Sep 9, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

FarhanAliRaza left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

greptile-apps Bot commented Jul 6, 2026 •

edited

Loading

codspeed-hq Bot commented Jul 9, 2026 •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading

harsh21234i commented Aug 1, 2026 •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading

harsh21234i commented Aug 13, 2026 •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading