feat(sankey): Add inline label layout and fix auto-assigned node colo… by BrendanDavies · Pull Request #526 · cloudflare/kumo

BrendanDavies · 2026-05-20T20:04:12Z

Changes

1. New nodeLabelLayout prop

Added nodeLabelLayout prop with two options:
- "stacked" (default): Value on top, name below (two lines)
- "inline": "Name Value" on a single line
Inline layout prevents label overlap on small nodes where stacked labels would collide

2. Bug fix: Auto-assigned node colors now appear in tooltips

Previously, when nodes didn't have explicit color properties, the auto-assigned colors from ChartPalette.categorical() were not reflected in link tooltips (fell back to gray #666)
Now computes nodeColors array upfront and stores computedColor in the node data map
Both node and link tooltips now correctly display auto-assigned colors

Files Changed

File	Changes
packages/kumo/src/components/chart/SankeyChart.tsx	Added `nodeLabelLayout` prop, fixed color computation
packages/kumo-docs-astro/src/components/demos/Chart/SankeyChartDemo.tsx	Added SankeyChartInlineLabelDemo
packages/kumo-docs-astro/src/pages/charts/sankey.astro	Added "Inline Label Layout" documentation section

Usage

<SankeyChart
  echarts={echarts}
  nodes={nodes}
  links={links}
  height={300}
  nodeLabelLayout="inline"  // Single line: "Workloads 109,870"
/>

Reviews
- bonk has reviewed the change
- automated review not possible because:
Tests
- Tests included/updated
- Automated tests not possible - manual testing has been completed as follows:
- Additional testing not necessary because:

…rs in tooltips

pkg-pr-new · 2026-05-20T20:12:20Z

npm i https://pkg.pr.new/@cloudflare/kumo@526

commit: e97d9f7

github-actions · 2026-05-20T20:12:59Z

Docs Preview

View docs preview

Commit: e97d9f7

github-actions · 2026-05-20T20:15:53Z

Visual Regression Report — 22 changed, 16 unchanged

22 screenshot(s) with visual changes:

Button / Variant: Primary

166 px (0.16%) changed

Before	After	Diff

Button / Variant: Ghost

101 px (0.1%) changed

Before	After	Diff

Button / Variant: Destructive

1,112 px (1.1%) changed

Before	After	Diff

Button / Icon Only

32 px (0.03%) changed

Before	After	Diff

Button / Loading State

210 px (0.21%) changed

Before	After	Diff

Button / Disabled State

232 px (0.23%) changed

Before	After	Diff

Dialog / Dialog With Actions

138 px (0.14%) changed

Before	After	Diff

Dialog / Dialog Basic

114 px (0.11%) changed

Before	After	Diff

Dialog / Dialog Alert

354 px (0.35%) changed

Before	After	Diff

Dialog / Dialog With Select

225 px (0.22%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

244 px (0.24%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Basic

299 px (0.29%) changed

Before	After	Diff

Select / Select Sizes

947 px (0.51%) changed

Before	After	Diff

Select / Select Without Label

105 px (0.1%) changed

Before	After	Diff

Select / Select With Field

635 px (0.54%) changed

Before	After	Diff

Select / Select With Tooltip

294 px (0.29%) changed

Before	After	Diff

Select / Select Custom Rendering

413 px (0.41%) changed

Before	After	Diff

Select / Select Loading

1,429 px (0.71%) changed

Before	After	Diff

Select / Select Disabled Items

231 px (0.23%) changed

Before	After	Diff

Select / Select Long List

898 px (0.76%) changed

Before	After	Diff

Select (Open)

1,265 px (0.01%) changed

Before	After	Diff

16 screenshot(s) unchanged

Button / Basic
Button / Variant: Secondary
Button / Variant: Outline
Button / Variant: Secondary Destructive
Button / Sizes
Button / With Icon
Button / Title
Button / Link as Button
Dialog / Dialog Confirmation
Dialog / Dialog With Combobox
Select / Select Placeholder
Select / Select Multiple
Select / Select Complex
Select / Select Disabled Options
Select / Select Grouped
Select / Select Grouped With Disabled

Generated by Kumo Visual Regression

mattrothenberg · 2026-05-20T20:48:52Z

/bonk what do you think about this PR?

ask-bonk

This is a solid PR! The implementation is clean and follows existing patterns.

What I like:

The nodeLabelLayout prop is well-designed with clear semantics (stacked | inline)
The color fix correctly addresses the tooltip color mismatch by computing nodeColors upfront and storing computedColor in the data map
Good test coverage for both the new feature and the bug fix
Proper changeset including both packages
The demo provides a practical example showing when inline layout is useful

One minor observation:
The new describe("nodeLabelLayout") and describe("auto-assigned node colors") blocks are nested inside describe("security utilities"). While this doesn't affect functionality, these tests aren't security-related so they might be better as top-level describes. This is purely organizational and non-blocking.

Overall, this is ready to ship! 🚀

ask-bonk · 2026-05-20T20:50:00Z

    });
  });
+
+  describe("nodeLabelLayout", () => {


Nit: These new test blocks (nodeLabelLayout and auto-assigned node colors) are nested inside describe("security utilities") but they're not security-related. Consider moving them to top-level describes for better organization. Non-blocking.

ask-bonk · 2026-05-20T20:50:00Z

-    // Build a map of node name to original node data for tooltip access
-    const nodeDataMap = new Map(nodes.map((n) => [n.name, n]));
+
+    // Compute colors for each node (explicit color > default > categorical)


Good approach computing colors upfront and storing them in nodeDataMap with computedColor. This ensures consistent color usage across both nodes and tooltips.

ask-bonk · 2026-05-20T20:50:00Z

+                    const formattedValue = escapeRichText(
+                      formatValue(nodeData.value),
+                    );
+                    // Inline: "name value" on single line; Stacked: value above name


Nice touch reversing the order for inline layout (name value vs value\nname). Reads more naturally on a single line.

ask-bonk · 2026-05-20T20:50:09Z

Review Summary for PR #526

This PR adds a useful new nodeLabelLayout prop to the SankeyChart component and fixes a bug where auto-assigned node colors weren't appearing in tooltips.

What's Good

Clean API design - The nodeLabelLayout prop with "stacked" (default) and "inline" options is intuitive and well-documented with inline JSDoc comments
Bug fix is well-architected - Computing nodeColors upfront and storing them in nodeDataMap as computedColor ensures consistent color usage across both nodes and tooltips, fixing the issue where auto-assigned categorical colors weren't showing up in link tooltips
Good test coverage - Added 6 new tests covering:
- Default stacked layout behavior
- Inline layout output format
- Line height differences between layouts
- Auto-assigned colors in link tooltips
- Color consistency for nodes without explicit colors
Proper changeset - Both @cloudflare/kumo and @cloudflare/kumo-docs-astro are marked as patch releases
Practical demo - The new SankeyChartInlineLabelDemo shows a realistic use case (many small nodes) where inline layout prevents label overlap

Minor Nitpick

The new test blocks for nodeLabelLayout and auto-assigned node colors are nested inside describe("security utilities"), which is a bit odd since they're not security-related. This is purely organizational and doesn't affect functionality.

Verdict: LGTM! 🚀 This is ready to merge.

github run

feat(sankey): Add inline label layout and fix auto-assigned node colo…

b8916ac

…rs in tooltips

BrendanDavies force-pushed the brendan/sanky-adj branch from a2df2f7 to b8916ac Compare May 20, 2026 20:05

BrendanDavies marked this pull request as ready for review May 20, 2026 20:07

mattrothenberg approved these changes May 20, 2026

View reviewed changes

Merge branch 'main' into brendan/sanky-adj

e97d9f7

ask-bonk Bot reviewed May 20, 2026

View reviewed changes

mattrothenberg merged commit 4f2b47c into cloudflare:main May 20, 2026
15 checks passed

Conversation

BrendanDavies commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Files Changed

Usage

Uh oh!

pkg-pr-new Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Docs Preview

Uh oh!

github-actions Bot commented May 20, 2026

Button / Variant: Primary

Button / Variant: Ghost

Button / Variant: Destructive

Button / Icon Only

Button / Loading State

Button / Disabled State

Dialog / Dialog With Actions

Dialog / Dialog Basic

Dialog / Dialog Alert

Dialog / Dialog With Select

Dialog / Dialog With Dropdown

Dialog (Open)

Select / Select Basic

Select / Select Sizes

Select / Select Without Label

Select / Select With Field

Select / Select With Tooltip

Select / Select Custom Rendering

Select / Select Loading

Select / Select Disabled Items

Select / Select Long List

Select (Open)

Uh oh!

mattrothenberg commented May 20, 2026

Uh oh!

ask-bonk Bot left a comment

Choose a reason for hiding this comment

Uh oh!

ask-bonk Bot May 20, 2026

Choose a reason for hiding this comment

Uh oh!

ask-bonk Bot May 20, 2026

Choose a reason for hiding this comment

Uh oh!

ask-bonk Bot May 20, 2026

Choose a reason for hiding this comment

Uh oh!

ask-bonk Bot commented May 20, 2026

Review Summary for PR #526

What's Good

Minor Nitpick

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

BrendanDavies commented May 20, 2026 •

edited

Loading

pkg-pr-new Bot commented May 20, 2026 •

edited

Loading

github-actions Bot commented May 20, 2026 •

edited

Loading