fix: experiment results polish by Zaimwa9 · Pull Request #8166 · Flagsmith/flagsmith

Zaimwa9 · 2026-07-30T14:42:53Z

Thanks for submitting a PR! Please check the boxes below:

I have read the Contributing Guide.
I have added information to docs/ if required so people know about the feature.
I have filled in the "Changes" section below.
I have filled in the "How did you test this code" section below.

Changes

UI/UX fixes for the experiment results page:

When control wins, the summary card becomes "Control vs best variant" and shows the best treatment's lift negated (e.g. +65.1%) instead of "Baseline".
Control's win probability is inferred from the treatments' chances instead of showing an em dash.
Long variant names in the axis chart truncate with an ellipsis instead of overflowing the chart edge.
Narrower Delta column, wider Variant column; delta track hidden below 1264px.
Delta and win-probability tracks use a clearer surface colour in dark mode.
Summary card values use the same typography as usage stats; winning variation shows its colour swatch; "Chance to be best" is green above 90%.
VariantName takes a fontSize prop and vertically centres its swatch without disturbing the text baseline.
Header metric name bumped by 2px.

How did you test this code?

Manually.

Swatch + variant alignment

Increased text + ellipsis + reduced Delta column width + winning control version

vercel · 2026-07-30T14:43:00Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Building	Preview	Aug 4, 2026 9:28am
flagsmith-frontend-staging	Ready	Preview	Aug 4, 2026 9:28am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored	Preview	Aug 4, 2026 9:28am

coderabbitai · 2026-07-30T14:43:03Z

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

Walkthrough

Experiment result derivation now calculates control win probability separately, selects winners using treatment and control probabilities, and exposes revised lift summary fields. Scorecards consume these values for control and treatment rows, while summary cards use formatted winner, chance, and lift displays. Variant names, stat markup, chart labels, metric typography, track colours, and responsive lift visibility were also updated.

Estimated code review effort: 4 (Complex) | ~45 minutes

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

_{Comment @coderabbitai help to get the list of available commands.}

Zaimwa9 · 2026-07-30T14:45:14Z

@themis-blindfold review

github-actions · 2026-07-30T14:49:10Z

Docker builds report

Image	Build Status	Security report
`ghcr.io/flagsmith/flagsmith-api-test:pr-8166`	Finished ✅	Skipped
`ghcr.io/flagsmith/flagsmith-e2e:pr-8166`	Finished ✅	Skipped
`ghcr.io/flagsmith/flagsmith-api:pr-8166`	Finished ✅	Results ✅
`ghcr.io/flagsmith/flagsmith:pr-8166`	Finished ✅	Results ✅
`ghcr.io/flagsmith/flagsmith-private-cloud:pr-8166`	Finished ✅	Results ✅
`ghcr.io/flagsmith/flagsmith-frontend:pr-8166`	Finished ✅	Results ✅

themis-blindfold · 2026-07-30T14:51:27Z

⚖️ Themis review: ✅ Ship it

Clean visual polish across the experiment results page. The refactoring of getWinningVariant into getControlChanceToWin + getBestTreatment is well-structured; the new helpers are independently testable and each has clear, single-purpose semantics. Control's inferred win probability (Bonferroni bound 1 - Σ chance_to_win) is now surfaced in both the scorecard table and the summary card, and the "control wins" summary card correctly shows the best treatment's lift negated so users see the magnitude of control's advantage rather than a blank "Baseline". CSS truncation on axis chart labels (overflow: hidden + text-overflow: ellipsis inside a flex child with constrained maxWidth) is spec-compliant since overflow: hidden resolves min-width: auto to 0 on flex items. Column width redistribution keeps the same 86% total. All CI checks pass.

Area	Score
🎯 Correctness	5/5
🧪 Test coverage	4/5
📐 Code quality	5/5
🚀 Product impact	3/5

📝 Walkthrough

derive.ts refactor — getWinningVariant split into getControlChanceToWin (Bonferroni bound for control) and getBestTreatment (highest-chance treatment). deriveSummary now computes a negated lift when control wins, adds chanceToBestHigh, liftLabel, and renames liftVsControl → liftValue.
Scorecard table — Control row now shows an inferred win probability instead of an em dash; column widths rebalanced (wider Variant, narrower Delta); delta track hidden below 1264px.
Summary scorecard — Winning variation renders a VariantName with colour swatch at 24px; "Chance to be best" turns green above 90%; lift card label dynamically switches between "Lift vs control" and "Control vs best variant".
Axis chart — Variant labels truncate with ellipsis via a maxWidth keyed to ciLeft%; title attribute added for hover access to full name.
Visual tweaks — StatCard value wrapper changed from div.fs-3 to h4; VariantName accepts fontSize prop; delta and win-probability tracks use --color-surface-emphasis for dark-mode clarity; swatch vertical alignment uses precise calc() offsets.

🧪 How to verify

Load an experiment where a treatment wins — confirm the summary card shows the treatment name with colour swatch, positive lift, and the lift label reads "Lift vs control".
Load an experiment where control wins — confirm the summary card reads "Control vs best variant" with a positive lift percentage (the negated treatment lift), and the scorecard table's control row shows a non-zero win probability.
Give a variant a very long name (30+ chars) and confirm the axis chart label truncates with an ellipsis and shows the full name on hover.
Resize the viewport below 1264px and confirm the delta track bar disappears, leaving only the percentage value.
Toggle dark mode and verify the delta and win-probability track backgrounds are visible against the card surface.

Product take: Solid UX polish for experiment results — the "control wins" scenario now gives users an actionable number (how much control leads by) instead of a blank baseline, and inferred control win probability fills a visible data gap. This is a meaningful clarity improvement for anyone interpreting experiment outcomes, though it doesn't unlock new capability.

🧭 Assumptions & unverified claims

No unverified assumptions or claims.

The experiment results just got a full spa day — polished, aligned, and ready for their close-up. · reviewed at da4ff38

github-actions · 2026-07-30T14:55:14Z

✅ private-cloud · depot-ubuntu-latest-arm-16 — run #18987 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

3 passed

Details

3 tests across 3 suites
38.4 seconds
03ab110
🔄 Run: #18987 (attempt 1)

🗂️ Previous results

✅ private-cloud · depot-ubuntu-latest-16 — run #18987 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

3 passed

Details

3 tests across 3 suites
32.4 seconds
03ab110
🔄 Run: #18987 (attempt 1)

✅ oss · depot-ubuntu-latest-16 — run #18987 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

1 passed

Details

1 test across 1 suite
37.6 seconds
03ab110
🔄 Run: #18987 (attempt 1)

✅ oss · depot-ubuntu-latest-arm-16 — run #18987 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

1 passed

Details

1 test across 1 suite
45.7 seconds
03ab110
🔄 Run: #18987 (attempt 1)

✅ private-cloud · depot-ubuntu-latest-arm-16 — run #18897 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

3 passed

Details

3 tests across 3 suites
37.2 seconds
bcf2d40
🔄 Run: #18897 (attempt 1)

✅ private-cloud · depot-ubuntu-latest-16 — run #18897 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

3 passed

Details

3 tests across 3 suites
32.2 seconds
bcf2d40
🔄 Run: #18897 (attempt 1)

✅ oss · depot-ubuntu-latest-arm-16 — run #18897 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

1 passed

Details

1 test across 1 suite
39.3 seconds
bcf2d40
🔄 Run: #18897 (attempt 1)

✅ oss · depot-ubuntu-latest-16 — run #18897 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

1 passed

Details

1 test across 1 suite
40.9 seconds
bcf2d40
🔄 Run: #18897 (attempt 1)

✅ oss · depot-ubuntu-latest-arm-16 — run #18890 (attempt 2)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

1 passed

Details

1 test across 1 suite
44.6 seconds
6a5f304
🔄 Run: #18890 (attempt 2)

✅ private-cloud · depot-ubuntu-latest-arm-16 — run #18890 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

2 passed

Details

2 tests across 2 suites
38.8 seconds
6a5f304
🔄 Run: #18890 (attempt 1)

✅ private-cloud · depot-ubuntu-latest-16 — run #18890 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

2 passed

Details

2 tests across 2 suites
32 seconds
6a5f304
🔄 Run: #18890 (attempt 1)

❌ oss · depot-ubuntu-latest-arm-16 — run #18890 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

1 failed

Details

1 test across 1 suite
21.8 seconds
6a5f304
📦 Artifacts: View test results and HTML report
🔄 Run: #18890 (attempt 1)

Failed tests

firefox › tests/segment-test.pw.ts › Segment test 1 - Create, update, and manage segments with multivariate flags @oss

coderabbitai

Actionable comments posted: 3

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 6d30ae96-6c47-4e21-9eff-3dfe0d7315e6

📥 Commits

Reviewing files that changed from the base of the PR and between b372dc1 and da4ff38.

📒 Files selected for processing (10)

frontend/web/components/experiments/results/ExperimentDetailHeader.tsx
frontend/web/components/experiments/results/ExperimentRecommendation.tsx
frontend/web/components/experiments/results/ExperimentResultsAxisChart.tsx
frontend/web/components/experiments/results/ExperimentResultsScorecardTable.tsx
frontend/web/components/experiments/results/ExperimentSummaryScorecard.tsx
frontend/web/components/experiments/results/StatCard.tsx
frontend/web/components/experiments/results/VariantName.tsx
frontend/web/components/experiments/results/__tests__/derive.test.ts
frontend/web/components/experiments/results/derive.ts
frontend/web/components/experiments/results/results.scss

github-actions · 2026-07-30T14:57:13Z

Visual Regression

19 screenshots compared. See report for details.
View full report

…bability

coderabbitai

Actionable comments posted: 1

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 46ac368a-d860-44f1-9fc9-c21d36d9881c

📥 Commits

Reviewing files that changed from the base of the PR and between da4ff38 and e188239.

📒 Files selected for processing (2)

frontend/web/components/experiments/results/__tests__/derive.test.ts
frontend/web/components/experiments/results/derive.ts

coderabbitai

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

frontend/web/components/experiments/results/results.scss (1)

200-203: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Constrain the label width for ellipsis to work.

Line 200 only hides overflow; without a width or max-width, the inline-flex label retains its intrinsic width and long variant names will still not truncate. Define the available label width and add min-width: 0 if this text node is a flex item.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: a799db9e-63ae-4c28-b06a-f47056cc969d

📥 Commits

Reviewing files that changed from the base of the PR and between 9008fa7 and 25e517b.

📒 Files selected for processing (3)

frontend/web/components/experiments/results/ExperimentSummaryScorecard.tsx
frontend/web/components/experiments/results/VariantName.tsx
frontend/web/components/experiments/results/results.scss

talissoncosta

Looks good, just some suggestions.

talissoncosta

Much cleaner, comments addressed. Just the hook location nit.

- Move useFitText alongside the rest of the hooks in common/hooks. - Floor the axis row label's max-width so an interval starting near the axis edge ellipsises the variant name instead of collapsing it. - Let the label text shrink below its intrinsic width so the ellipsis applies. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

kyle-ssg · 2026-08-04T09:29:38Z

@talissoncosta I've resolved these

fix: experiment results polish

da4ff38

vercel Bot deployed to Preview – flagsmith-frontend-staging July 30, 2026 14:43 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 30, 2026 14:43 View deployment

github-actions Bot added front-end Issue related to the React Front End Dashboard fix labels Jul 30, 2026

Zaimwa9 marked this pull request as ready for review July 30, 2026 14:48

Zaimwa9 requested a review from a team as a code owner July 30, 2026 14:48

Zaimwa9 requested review from kyle-ssg and talissoncosta and removed request for a team and kyle-ssg July 30, 2026 14:48

github-actions Bot removed the fix label Jul 30, 2026

github-actions Bot added the fix label Jul 30, 2026

coderabbitai Bot reviewed Jul 30, 2026

View reviewed changes

Comment thread frontend/web/components/experiments/results/derive.ts

Comment thread frontend/web/components/experiments/results/ExperimentResultsAxisChart.tsx

Comment thread frontend/web/components/experiments/results/StatCard.tsx Outdated

fix: require inference from all arms before inferring control win pro…

e188239

…bability

vercel Bot deployed to Preview – flagsmith-frontend-staging July 30, 2026 15:04 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 30, 2026 15:04 View deployment

github-actions Bot added fix and removed fix labels Jul 30, 2026

coderabbitai Bot reviewed Jul 30, 2026

View reviewed changes

Comment thread frontend/web/components/experiments/results/__tests__/derive.test.ts

test: cover explicit null inference entries

9008fa7

vercel Bot deployed to Preview – flagsmith-frontend-staging July 30, 2026 15:10 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 30, 2026 15:11 View deployment

github-actions Bot added fix and removed fix labels Jul 30, 2026

fix: fit long winner names to the summary card width

25e517b

vercel Bot deployed to Preview – flagsmith-frontend-staging July 30, 2026 15:36 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 30, 2026 15:36 View deployment

github-actions Bot added fix and removed fix labels Jul 30, 2026

coderabbitai Bot reviewed Jul 30, 2026

View reviewed changes

Comment thread frontend/web/components/experiments/results/VariantName.tsx

talissoncosta reviewed Jul 30, 2026

View reviewed changes

Zaimwa9 added 2 commits July 31, 2026 10:14

fix: widen the winning variation card only for long names

3afb8a8

refactor: address review feedback on fit-to-width and stat cards

6a5f304

vercel Bot deployed to Preview – flagsmith-frontend-staging July 31, 2026 08:15 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 31, 2026 08:15 View deployment

github-actions Bot added fix and removed fix labels Jul 31, 2026

fix: hedge extreme win probabilities

bcf2d40

vercel Bot deployed to Preview – flagsmith-frontend-staging July 31, 2026 09:06 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 31, 2026 09:06 View deployment

github-actions Bot added fix and removed fix labels Jul 31, 2026

talissoncosta previously approved these changes Jul 31, 2026

View reviewed changes

Comment thread frontend/common/hooks/useFitText.ts

kyle-ssg dismissed talissoncosta’s stale review via 03ab110 August 4, 2026 09:27

vercel Bot deployed to Preview – flagsmith-frontend-staging August 4, 2026 09:28 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview August 4, 2026 09:28 View deployment

github-actions Bot added fix and removed fix labels Aug 4, 2026

kyle-ssg requested a review from talissoncosta August 4, 2026 09:29

kyle-ssg approved these changes Aug 4, 2026

View reviewed changes

Uh oh!

Conversation

Zaimwa9 commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

How did you test this code?

Uh oh!

vercel Bot commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Uh oh!

Zaimwa9 commented Jul 30, 2026

Uh oh!

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

Uh oh!

Docker builds report

Uh oh!

themis-blindfold Bot commented Jul 30, 2026

⚖️ Themis review: ✅ Ship it

Uh oh!

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

Uh oh!

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

Details

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

Details

Playwright Test Results (oss - depot-ubuntu-latest-16)

Details

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

Details

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

Details

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

Details

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

Details

Playwright Test Results (oss - depot-ubuntu-latest-16)

Details

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

Details

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

Details

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

Details

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

Details

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Visual Regression

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

talissoncosta left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

talissoncosta left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Zaimwa9 commented Jul 30, 2026 •

edited

Loading

vercel Bot commented Jul 30, 2026 •

edited

Loading

coderabbitai Bot commented Jul 30, 2026 •

edited

Loading

github-actions Bot commented Jul 30, 2026 •

edited

Loading

github-actions Bot commented Jul 30, 2026 •

edited

Loading

github-actions Bot commented Jul 30, 2026 •

edited

Loading