feat(experiments): colour lift by metric direction by Zaimwa9 · Pull Request #8099 · Flagsmith/flagsmith

Zaimwa9 · 2026-07-24T13:49:41Z

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

Depends on #8098.

Colours experiment lift values by the primary metric's direction instead of sign only (follow-up to #8091):

Green when the lift moves with the metric ("higher is better" + positive, "lower is better" + negative), red when against, neutral grey for informational metrics.
Applies to the analysis chart, the delta bar/value in the results table, and the "Lift vs control" scorecard (now driven by a liftTone of success/danger/neutral).
Until feat(experiments): expose metric direction on experiment metrics API #8098 is deployed, direction is absent from the API response and metrics fall back to "higher is better" — identical to current behaviour.

How did you test this code?

Parametrised unit tests for direction → tone mapping in derive.test.ts; manually checked chart/table/scorecard colours for up and down metrics.

vercel · 2026-07-24T13:49:43Z

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

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview, Comment	Jul 24, 2026 2:30pm
flagsmith-frontend-staging	Ready	Preview, Comment	Jul 24, 2026 2:30pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored	Preview	Jul 24, 2026 2:30pm

coderabbitai · 2026-07-24T13:50:03Z

📝 Walkthrough

Walkthrough

Experiment metric responses now include direction. Lift favourability, colours, and summary statistics use direction-aware logic, including neutral handling for informational metrics. Axis charts and scorecard tables pass metric direction into lift rendering, while the summary scorecard maps derived tones to text classes. Tests cover upward, downward, and informational direction outcomes.

Estimated code review effort: 3 (Moderate) | ~20 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.}

github-actions · 2026-07-24T13:50:44Z

Docker builds report

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

coderabbitai

Actionable comments posted: 2

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 672c9bc6-7802-49be-af67-0f1b14658fea

📥 Commits

Reviewing files that changed from the base of the PR and between 80e50a2 and 36d16e6.

📒 Files selected for processing (7)

frontend/common/types/responses.ts
frontend/web/components/experiments/results/ExperimentMetricScorecard.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/__tests__/derive.test.ts
frontend/web/components/experiments/results/derive.ts

github-actions · 2026-07-24T13:58:41Z

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

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

3 passed

Details

3 tests across 3 suites
12.2 seconds
20db5e0
🔄 Run: #18712 (attempt 1)

🗂️ Previous results

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

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

1 passed

Details

1 test across 1 suite
35 seconds
20db5e0
🔄 Run: #18712 (attempt 1)

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

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

1 passed

Details

1 test across 1 suite
43.9 seconds
20db5e0
🔄 Run: #18712 (attempt 1)

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

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

1 passed

Details

1 test across 1 suite
42.2 seconds
20db5e0
🔄 Run: #18712 (attempt 1)

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

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

2 passed

Details

2 tests across 2 suites
1 minute, 7 seconds
36d16e6
🔄 Run: #18709 (attempt 1)

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

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

3 passed

Details

3 tests across 3 suites
48.6 seconds
36d16e6
🔄 Run: #18709 (attempt 1)

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

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

1 passed

Details

1 test across 1 suite
45.2 seconds
36d16e6
🔄 Run: #18709 (attempt 1)

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

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

1 passed

Details

1 test across 1 suite
38.1 seconds
36d16e6
🔄 Run: #18709 (attempt 1)

github-actions · 2026-07-24T13:59:05Z

Visual Regression

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

coderabbitai

Actionable comments posted: 1

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 2086e0cc-6225-41ee-b6e4-ada54e22c2c9

📥 Commits

Reviewing files that changed from the base of the PR and between 36d16e6 and 20db5e0.

📒 Files selected for processing (5)

frontend/common/types/responses.ts
frontend/web/components/experiments/results/ExperimentMetricScorecard.tsx
frontend/web/components/experiments/results/ExperimentResultsScorecardTable.tsx
frontend/web/components/experiments/results/__tests__/derive.test.ts
frontend/web/components/experiments/results/derive.ts

coderabbitai · 2026-07-24T14:34:41Z

+  it.each<[MetricDirection | undefined, LiftTone]>([
+    ['up', 'success'],
+    ['down', 'danger'],
+    ['informational', 'neutral'],
+    [undefined, 'success'], // legacy payloads without direction default to up


📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Extract the optional direction union into a named type.

MetricDirection | undefined is declared inline in the it.each generic. Define a named alias, such as OptionalMetricDirection, and use it here.

As per coding guidelines, TypeScript union types in frontend/**/*.{ts,tsx} must be extracted into named types.

Proposed adjustment

+type OptionalMetricDirection = MetricDirection | undefined + -it.each<[MetricDirection | undefined, LiftTone]>([ +it.each<[OptionalMetricDirection, LiftTone]>([

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

it.each<[MetricDirection | undefined, LiftTone]>([

['up', 'success'],

['down', 'danger'],

['informational', 'neutral'],

[undefined, 'success'], // legacy payloads without direction default to up

type OptionalMetricDirection = MetricDirection | undefined

it.each<[OptionalMetricDirection, LiftTone]>([

['up', 'success'],

['down', 'danger'],

['informational', 'neutral'],

[undefined, 'success'], // legacy payloads without direction default to up

Source: Coding guidelines

feat: colour experiment lift by metric direction

36d16e6

Zaimwa9 requested a review from a team as a code owner July 24, 2026 13:49

Zaimwa9 requested review from talissoncosta and removed request for a team July 24, 2026 13:49

github-actions Bot added the front-end Issue related to the React Front End Dashboard label Jul 24, 2026

vercel Bot deployed to Preview – flagsmith-frontend-staging July 24, 2026 13:50 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 24, 2026 13:50 View deployment

github-actions Bot added the feature New feature or request label Jul 24, 2026

coderabbitai Bot reviewed Jul 24, 2026

View reviewed changes

Comment thread frontend/common/types/responses.ts Outdated

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

fix: make experiment metric direction optional with up fallback

20db5e0

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

github-actions Bot added feature New feature or request and removed feature New feature or request labels Jul 24, 2026

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

coderabbitai Bot reviewed Jul 24, 2026

View reviewed changes

Uh oh!

Conversation

Zaimwa9 commented Jul 24, 2026

Changes

How did you test this code?

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Walkthrough

Uh oh!

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

Uh oh!

Docker builds report

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jul 24, 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-arm-16)

Details

Playwright Test Results (oss - depot-ubuntu-latest-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

Uh oh!

github-actions Bot commented Jul 24, 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!

coderabbitai Bot Jul 24, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel Bot commented Jul 24, 2026 •

edited

Loading

coderabbitai Bot commented Jul 24, 2026 •

edited

Loading

github-actions Bot commented Jul 24, 2026 •

edited

Loading

github-actions Bot commented Jul 24, 2026 •

edited

Loading

github-actions Bot commented Jul 24, 2026 •

edited

Loading