feat(funnels): round funnel bar ends and follow cursor with tooltip#60945
Merged
Conversation
2 tasks
Contributor
|
Reviews (1): Last reviewed commit: "refactor(funnels): remove obsolete StepD..." | Re-trigger Greptile |
Contributor
|
Size Change: +2.02 kB (0%) Total Size: 80.9 MB 📦 View Changed
ℹ️ View Unchanged
|
sampennington
force-pushed
the
posthog-code/funnel-horizontal-flow-rows
branch
from
3623c98 to
6d24e67
Compare
sampennington
force-pushed
the
sam/funnel-bar-round-ends
branch
from
06357d8 to
e97366e
Compare
sampennington
force-pushed
the
posthog-code/funnel-horizontal-flow-rows
branch
from
6d24e67 to
149f70e
Compare
Base automatically changed from
posthog-code/funnel-horizontal-flow-rows
to
master
June 1, 2026 19:14
Adds an opt-in `bars.roundStackEnds` to BarChart that rounds both outer ends of a stack into a pill by clipping the bar layer to a rounded rect spanning each band's full extent and drawing the segments square. This keeps the outer corners rounded at the full radius even when the edge segment is a thin sliver (e.g. the last breakdown of a near-100% step), which per-segment rounding clamps to the sliver's half-width. Enables it on the horizontal funnel's per-step bars and switches their tooltip to cursor-following placement. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The flowing-row layout replaced StepDecorations and nothing references it any more. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
sampennington
force-pushed
the
sam/funnel-bar-round-ends
branch
from
e97366e to
1b0b63b
Compare
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Purely frontend canvas-rendering enhancement — adds an optional roundStackEnds flag to pill-clip stacked bars, switches tooltip placement to cursor-follow, wraps a callback in useMemo, and deletes a component that has no importers. No backend, data model, API contract, or security surface affected.
Contributor
|
✅ Visual changes approved by @sampennington — baseline updated in 3 changed, 2 new. |
5 updated Run: 98435c45-58b4-43e9-9c16-4938d38990bf Co-authored-by: sampennington <56024559+sampennington@users.noreply.github.com>
github-actions
Bot
dismissed
their stale review
New commits pushed (delta classified non_trivial_delta) — stamphog approval dismissed; re-review running automatically.
Contributor
There was a problem hiding this comment.
Pure frontend visual change: adds optional pill-clipping for stacked bar ends, switches tooltip to cursor-follow, wraps a callback in useMemo, and removes a dead component (StepDecorations.tsx) confirmed to have no importers. No backend, data model, API contract, or security surface affected.
Contributor
|
🎭 Playwright report · View test results →
These issues are not necessarily caused by your changes. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Follow-up polish to the horizontal funnel flow-rows refactor (#60843, which this stacks on). Two gaps on the refactored chart:
Changes
Adds an opt-in
bars.roundStackEndsto the hog-chartsBarChartand enables it on the funnel, plus switches the funnel tooltip to cursor-following placement. It also removes the now-obsoleteStepDecorations.tsxthat #60843 left in place.roundStackEndsrounds both outer ends of a stack into a pill by clipping the bar layer to a rounded rect spanning each band's full extent and drawing the segments square inside the clip (reusing the existingclipToRoundedRects). This rounds the outer corners at the full radius even when the edge segment is a thin sliver — which per-segment rounding can't, since it clamps the radius to the sliver's half-width. The hover highlight clips to the same pill so it doesn't poke square corners past the ends.tooltip: { placement: 'cursor' }on the funnel'sSingleStepBar— the tooltip now tracks the mouse via the already-implemented'cursor'mode.StepDecorations.tsx(unused after the refactor).How did you test this code?
I'm an agent (Claude Code). Automated: the hog-charts + funnel suites pass (
bar-layout,bar-canvas-renderer,bars-under-cursor,BarChart,funnelBarHorizontalTransforms— 150 tests). I also visually verified the Default and Breakdown funnel stories in Storybook locally — pill ends render correctly (including the thin-breakdown right end) and the tooltip follows the cursor. No new automated tests were added forroundStackEnds/stackPillRectsyet (flagged in review as a follow-up).Automatic notifications
🤖 Agent context
Authored with Claude Code (Opus 4.8). Diagnosed that the missing curved ends were a dormant capability: the layout layer already had per-corner rounding hooks (
capRoundedAtIndex/baseRoundedAtIndex) butBarChartnever wired them through. First attempt wired those per-segment, but a reviewer-style check on the breakdown case showed thin slivers clamp the radius to ~0. Switched to the clip-to-pill approach (the codebase already hadclipToRoundedRectsbuilt for exactly this, just unused), which is both simpler and correct for thin edges, and reverted the per-segment plumbing. Split out of #60843 on request to keep the layout refactor and this visual polish reviewable separately; theStepDecorations.tsxdeletion was moved here so #60843 stays purely additive.Requires human review — do not self-merge.