Implement Start Button and Modal

[zackcl]

User Story

As an experiment creator, I want to start an inactive experiment so that it begins enrolling users into conditions.

Description

Implement the Start button and Start Experiment modal to transition an experiment from Inactive status to Running status. The Start button should only be enabled when the experiment meets validation requirements (has decision points, conditions, and condition weights sum to 100%).

Status Transition: Inactive → Running (INACTIVE → ENROLLING)

Implementation Details

1. Add Start Button

Location: experiment-overview-details-section-card.component (header-right section)

• Display only when experiment.state === EXPERIMENT_STATE.INACTIVE
• Button text: "Start"
• Button color: Primary (blue)
• Enable/disable based on validation (see validation section)

2. Create Start Experiment Modal

New component: modals/start-experiment-modal/

Follow the existing delete-experiment-modal pattern with:

• Title: "Start Experiment"
• Message: "Are you sure you want to start '[Experiment Name]'?"
• Warning: "While the experiment is running, decision points and conditions cannot be edited."
• Primary button: "Start" (blue)
• Cancel button: "Cancel"

3. Validation Logic

Requirement: Validate whenever the experiment is updated.

Validation rules:

• At least 1 decision point exists
• At least 1 condition exists
• Condition weights sum to 100%

Implementation approach:

• Add validation logic in experiments.effects.ts when experiment data is loaded/updated
• Store validation state in the experiment entity or as a derived observable
• Use validation state to enable/disable Start button
• Show tooltip on disabled button explaining why validation failed

Suggested approach: Add a computed property or selector that returns whether the experiment is "startable" based on these validations.

4. Service Updates

• DialogService: Add openStartExperimentModal() method
• ExperimentService: Add startExperiment(experimentId) method that dispatches the appropriate action
• API: Reuse existing POST /experiments/state endpoint with state: ENROLLING

Acceptance Criteria

• Start button appears ONLY when experiment status is Inactive
• Start button is disabled if decision points are missing (< 1)
• Start button is disabled if conditions are missing (< 1)
• Start button is disabled if condition weights don't sum to 100%
• Disabled Start button shows tooltip explaining validation failure
• Clicking enabled Start button opens the Start Experiment modal
• Modal displays experiment name dynamically
• Clicking "Start" transitions experiment to Running status
• Success notification appears: "Experiment started successfully"
• UI updates without page refresh (Start button disappears, Pause/Stop buttons appear)
• Clicking "Cancel" closes modal without changes
• Error notification appears if transition fails

Technical Notes

• Follow delete-experiment-modal implementation pattern
• Validation should run whenever experiment data changes (in effects or selector)
• No backend changes needed - UI-only implementation
• Use existing NgRx state management pattern
• Use translation keys for all text

Screenshots

Inactive Status with Start Button

Start Experiment Modal

Latest Design in Figma

https://www.figma.com/design/4a5EYBzojcVNwjlsBcRya2/UpGrade-UI-Latest-32--Experiment-Status-?node-id=38266-21375&t=Jv71JMRWtRvngRMk-1