Skip to content

feat(experiments): add experiment detail page with exposures panel#7811

Merged
Zaimwa9 merged 10 commits into
mainfrom
feat/experiment-detail-page
Jun 19, 2026
Merged

feat(experiments): add experiment detail page with exposures panel#7811
Zaimwa9 merged 10 commits into
mainfrom
feat/experiment-detail-page

Conversation

@Zaimwa9

@Zaimwa9 Zaimwa9 commented Jun 18, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor
  • 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

Adds the experiment detail page, the landing view when clicking an experiment row from the list.

Page shell & routing

  • New route /project/:projectId/environment/:environmentId/experiments/:experimentId gated behind experimental_flags
  • Loading spinner, error state, and redirect when the feature flag is off
  • Experiment list rows now link through to the detail page

Detail header

  • Experiment name, status badge, feature flag chip, and start/end dates
  • Primary metric name displayed between the title and hypothesis
  • Inline-editable hypothesis following the same pencil → confirm/cancel pattern used elsewhere (e.g. VariationKeyLabel), with an immediate PATCH on confirm via the new updateExperiment mutation

Configuration section

Exposures panel

  • Cumulative enrolment line chart (one series per variant) using the existing LineChart component (added an optional height prop)
  • Variant share legend with colour-coded bars and percentage breakdown
  • "As of" timestamp with a refresh button that triggers a POST, then polls GET at 10s intervals until data arrives
  • Full view-state machine (exposuresViewState.ts) handling empty → computing → loaded → refreshing transitions

Supporting code

  • RTK Query endpoints: experiment detail GET, exposures GET/POST, experiment PATCH
  • Types for exposures envelope, Bayesian results (forward declarations for the follow-up PR), and request shapes
  • derive.ts utilities: cumulative series builder, headline total, variant identity resolution
  • Unit tests for derive utilities and the exposures view-state machine
  • Minor tweaks to ContentCard (optional title prop, size variant) and SelectableCard border styling

How did you test this code?

  • Unit tests for derive utilities and exposures view-state (npm run test:unit -- --testPathPatterns=experiments)
  • Typecheck passes with no new errors (npm run typecheck)
  • ESLint passes on all touched files
  • Manual testing against local API: navigated from the experiments list, verified header/config/hypothesis editing, triggered exposures refresh and confirmed the polling → chart update cycle, verified empty and error states
image image image

Experiment in draft => No exposure section, later will be updatable
image

Experiment running => with fake data
image

Paused experiment
image

@Zaimwa9
feat(experiments): add experiment detail page with exposures panel
c6a3938 
Introduce the experiment detail page accessible from the experiments
list. Includes the detail header with inline-editable hypothesis,
experiment configuration section, and the full exposures panel with
polling, refresh, and cumulative enrolment chart.
@Zaimwa9 Zaimwa9 requested a review from a team as a code owner June 18, 2026 08:14
@Zaimwa9 Zaimwa9 requested review from talissoncosta and removed request for a team June 18, 2026 08:14
@vercel

vercel Bot commented Jun 18, 2026 •
edited
Loading

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Ready Ready Preview, Comment Jun 19, 2026 12:41pm
flagsmith-frontend-staging Ready Ready Preview, Comment Jun 19, 2026 12:41pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Preview Jun 19, 2026 12:41pm

Request Review

@github-actions github-actions Bot added the front-end Issue related to the React Front End Dashboard label Jun 18, 2026
@Zaimwa9 Zaimwa9 marked this pull request as draft June 18, 2026 08:15
@github-actions github-actions Bot added the feature New feature or request label Jun 18, 2026
@github-actions

github-actions Bot commented Jun 18, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Docker builds report

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

@github-actions

github-actions Bot commented Jun 18, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

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

passed  1 passed

Details

stats  1 test across 1 suite
duration  41.9 seconds
commit  c6a3938
info  🔄 Run: #17608 (attempt 1)

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

passed  1 passed

Details

stats  1 test across 1 suite
duration  45 seconds
commit  c6a3938
info  🔄 Run: #17608 (attempt 1)

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

failed  1 failed

Details

stats  1 test across 1 suite
duration  45.9 seconds
commit  c6a3938
info  📦 Artifacts: View test results and HTML report
🔄 Run: #17608 (attempt 1)

Failed tests

firefox › tests/project-permission-test.pw.ts › Project Permission Tests › Project-level permissions control access to features, environments, audit logs, and segments @enterprise

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

passed  1 passed

Details

stats  1 test across 1 suite
duration  33 seconds
commit  3b33f4b
info  🔄 Run: #17619 (attempt 1)

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

passed  1 passed

Details

stats  1 test across 1 suite
duration  45.9 seconds
commit  3b33f4b
info  🔄 Run: #17619 (attempt 1)

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

failed  1 failed

Details

stats  1 test across 1 suite
duration  44.9 seconds
commit  3b33f4b
info  📦 Artifacts: View test results and HTML report
🔄 Run: #17619 (attempt 1)

Failed tests

firefox › tests/project-permission-test.pw.ts › Project Permission Tests › Project-level permissions control access to features, environments, audit logs, and segments @enterprise

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

passed  1 passed

Details

stats  1 test across 1 suite
duration  43.9 seconds
commit  3b33f4b
info  🔄 Run: #17619 (attempt 2)

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

passed  1 passed

Details

stats  1 test across 1 suite
duration  41.2 seconds
commit  3b33f4b
info  🔄 Run: #17619 (attempt 2)

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

failed  1 failed

Details

stats  1 test across 1 suite
duration  46.1 seconds
commit  3b33f4b
info  📦 Artifacts: View test results and HTML report
🔄 Run: #17619 (attempt 2)

Failed tests

firefox › tests/project-permission-test.pw.ts › Project Permission Tests › Project-level permissions control access to features, environments, audit logs, and segments @enterprise

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

failed  1 failed

Details

stats  1 test across 1 suite
duration  45.9 seconds
commit  3b33f4b
info  📦 Artifacts: View test results and HTML report
🔄 Run: #17619 (attempt 3)

Failed tests

firefox › tests/project-permission-test.pw.ts › Project Permission Tests › Project-level permissions control access to features, environments, audit logs, and segments @enterprise

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

passed  1 passed

Details

stats  1 test across 1 suite
duration  41.6 seconds
commit  3b33f4b
info  🔄 Run: #17619 (attempt 4)

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

passed  1 passed

Details

stats  1 test across 1 suite
duration  44.5 seconds
commit  3b33f4b
info  🔄 Run: #17619 (attempt 4)

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

failed  1 failed

Details

stats  1 test across 1 suite
duration  45.5 seconds
commit  3b33f4b
info  📦 Artifacts: View test results and HTML report
🔄 Run: #17619 (attempt 4)

Failed tests

firefox › tests/project-permission-test.pw.ts › Project Permission Tests › Project-level permissions control access to features, environments, audit logs, and segments @enterprise

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

passed  2 passed

Details

stats  2 tests across 2 suites
duration  3.3 seconds
commit  bbfc9e0
info  🔄 Run: #17665 (attempt 1)

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

passed  1 passed

Details

stats  1 test across 1 suite
duration  36.5 seconds
commit  bbfc9e0
info  🔄 Run: #17665 (attempt 1)

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

passed  3 passed

Details

stats  3 tests across 3 suites
duration  34 seconds
commit  bbfc9e0
info  🔄 Run: #17665 (attempt 1)

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

passed  1 passed

Details

stats  1 test across 1 suite
duration  1 minute, 10 seconds
commit  bbfc9e0
info  🔄 Run: #17665 (attempt 1)

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

passed  1 passed

Details

stats  1 test across 1 suite
duration  40.7 seconds
commit  b4bea92
info  🔄 Run: #17675 (attempt 1)

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

passed  1 passed

Details

stats  1 test across 1 suite
duration  43.8 seconds
commit  b4bea92
info  🔄 Run: #17675 (attempt 1)

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

passed  3 passed

Details

stats  3 tests across 3 suites
duration  33.6 seconds
commit  b4bea92
info  🔄 Run: #17675 (attempt 1)

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

passed  3 passed

Details

stats  3 tests across 3 suites
duration  58.9 seconds
commit  b4bea92
info  🔄 Run: #17675 (attempt 1)

@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Jun 18, 2026
@github-actions

github-actions Bot commented Jun 18, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Visual Regression

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

@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Jun 18, 2026
@Zaimwa9
fix(experiments): address PR review — drop dead code, fix HomePage re…
90503d1 
…vert

- Restore HomePage optional chaining (accidental revert of #7788)
- Remove unused VariantShareLegend component
- Strip results.scss to PR1-only classes
- Use getPrimaryMetric helper instead of experiment.metrics[0]
- Remove unused _status param from deriveExposuresViewState
- Remove dead getRefreshPollInterval export and its tests
@Zaimwa9

Zaimwa9 commented Jun 18, 2026

Copy link
Copy Markdown
Contributor Author

@gemini-code-assist review

@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Jun 18, 2026
@Zaimwa9 Zaimwa9 marked this pull request as ready for review June 18, 2026 08:52
@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Jun 18, 2026
@Zaimwa9 Zaimwa9 mentioned this pull request Jun 18, 2026
Merged
4 tasks
@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Jun 18, 2026
talissoncosta
talissoncosta previously approved these changes Jun 18, 2026
View reviewed changes

@talissoncosta talissoncosta left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks pretty good @Zaimwa9 !
Just a few suggestions.

Comment thread frontend/web/components/experiments/results/results.scss
Comment thread frontend/web/components/experiments/results/results.scss Outdated
Comment thread frontend/web/components/experiments/results/results.scss Outdated
Comment thread frontend/web/components/experiments/ExperimentsTable/ExperimentsTable.tsx
@Zaimwa9
fix(experiments): refresh polling, throttle handling, and cache inval…
bbfc9e0 
…idation

- Fix polling not starting after refresh when data already exists
- Add 2-minute poll timeout to prevent infinite polling
- Handle 429 throttle gracefully: extract Retry-After header, show
  countdown instead of error toast, disable button during cooldown
- Invalidate individual experiment cache on start/pause/complete
  mutations so the detail page updates immediately
- Hide exposures section when experiment is in draft status
@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Jun 19, 2026
Zaimwa9 added 2 commits June 19, 2026 11:33
@Zaimwa9
feat(experiments): read Retry-After header for throttle countdown
f658bf0 
Use queryFn to access response headers from fetchBaseQuery, extract
the Retry-After value on 429 responses, and pass it through the
error object so the exposures panel shows an accurate countdown.
Requires CORS_EXPOSE_HEADERS on the backend (PR #7832).
@Zaimwa9
feat(experiments): address PR review feedback
b4bea92 
- Replace alert banner with inline error text below As Of label
- Use selectable-card__tag for feature flag chip (fixes Bootstrap yellow)
- Replace header SCSS blocks with utility classes
- Add optional chaining guard on multivariate_options
- Make experiment rows always clickable
- Disable Start button with tooltip when no metric attached
@github-actions github-actions Bot added feature New feature or request and removed feature New feature or request labels Jun 19, 2026
@Zaimwa9 Zaimwa9 requested a review from talissoncosta June 19, 2026 12:43
talissoncosta
talissoncosta approved these changes Jun 19, 2026
View reviewed changes

@talissoncosta talissoncosta left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for addressing the feedbacks, looks great!

@Zaimwa9 Zaimwa9 merged commit 47490f4 into main Jun 19, 2026
29 of 30 checks passed
@Zaimwa9 Zaimwa9 deleted the feat/experiment-detail-page branch June 19, 2026 15:00
@flagsmith-engineering flagsmith-engineering Bot mentioned this pull request Jun 19, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@talissoncosta talissoncosta talissoncosta approved these changes
+1 more reviewer
@gemini-code-assist gemini-code-assist[bot] gemini-code-assist[bot] left review comments
Reviewers whose approvals may not affect merge requirements

Assignees

@talissoncosta talissoncosta

Labels

feature New feature or request front-end Issue related to the React Front End Dashboard

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Zaimwa9 @talissoncosta