Merge pull request #579 from guardian/ahe/bandit-rrcp

Add editor for making epic a multi-armed bandit test
guardian · Apr 23, 2024 · ef3fbde · ef3fbde
2 parents c956913 + 63e8472
commit ef3fbde
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 2 deletions.
diff --git a/app/models/EpicTest.scala b/app/models/EpicTest.scala
@@ -34,7 +34,7 @@ case class EpicVariant(
   showChoiceCards: Option[Boolean],
   bylineWithImage: Option[BylineWithImage],
   defaultChoiceCardFrequency: Option[String],
-  showSignInLink: Option[Boolean]
+  showSignInLink: Option[Boolean],
 )
 case class EpicTest(
   name: String,
@@ -60,6 +60,7 @@ case class EpicTest(
   deviceType: Option[DeviceType] = None,
   campaignName: Option[String] = Some("NOT_IN_CAMPAIGN"),
   signedInStatus: Option[SignedInStatus] = Some(SignedInStatus.All),
+  isBanditTest: Option[Boolean] = None,
   consentStatus: Option[ConsentStatus] = Some(ConsentStatus.All),
 ) extends ChannelTest[EpicTest] {
 

diff --git a/public/src/components/channelManagement/epicTests/epicBanditEditor.tsx b/public/src/components/channelManagement/epicTests/epicBanditEditor.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { RadioGroup, FormControlLabel, Radio } from '@mui/material';
+import { EpicTest } from '../../../models/epic';
+
+interface EpicBanditEditorProps {
+  test: EpicTest;
+  isDisabled: boolean;
+  onExperimentMethodologyChange: (isBanditTest?: boolean) => void;
+}
+
+export const EpicBanditEditor: React.FC<EpicBanditEditorProps> = ({
+  test,
+  isDisabled,
+  onExperimentMethodologyChange,
+}: EpicBanditEditorProps) => {
+  const onRadioGroupChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    if (event.target.value === 'bandit') {
+      onExperimentMethodologyChange(true);
+    } else {
+      onExperimentMethodologyChange(false);
+    }
+  };
+
+  return (
+    <RadioGroup value={test.isBanditTest ? 'bandit' : 'abtest'} onChange={onRadioGroupChange}>
+      <FormControlLabel
+        value="abtest"
+        key="abtest"
+        control={<Radio />}
+        label="AB Testing"
+        disabled={isDisabled}
+      />
+      <FormControlLabel
+        value="bandit"
+        key="bandit"
+        control={<Radio />}
+        label="Multi-Armed Bandit"
+        disabled={isDisabled}
+      />
+    </RadioGroup>
+  );
+};
diff --git a/public/src/components/channelManagement/epicTests/epicTestEditor.tsx b/public/src/components/channelManagement/epicTests/epicTestEditor.tsx
@@ -34,6 +34,9 @@ import { useStyles } from '../helpers/testEditorStyles';
 import { EpicTestPreviewButton } from './epicTestPreview';
 import { ValidatedTestEditor, ValidatedTestEditorProps } from '../validatedTestEditor';
 import { TestEditorProps } from '../testsForm';
+import { EpicBanditEditor } from './epicBanditEditor';
+
+const BANDIT_FEATURE_SWITCH = false;
 
 const copyHasTemplate = (test: EpicTest, template: string): boolean =>
   test.variants.some(
@@ -88,6 +91,10 @@ export const getEpicTestEditor = (
       });
     };
 
+    const onExperimentMethodologyChange = (isBanditTest?: boolean): void => {
+      updateTest({ ...test, isBanditTest });
+    };
+
     const onVariantsChange = (updatedVariantList: EpicVariant[]): void => {
       updateTest({ ...test, variants: updatedVariantList });
     };
@@ -247,6 +254,19 @@ export const getEpicTestEditor = (
           </div>
         )}
 
+        {BANDIT_FEATURE_SWITCH && (
+          <div className={classes.sectionContainer}>
+            <Typography variant={'h3'} className={classes.sectionHeader}>
+              Experiment Methodology
+            </Typography>
+            <EpicBanditEditor
+              test={test}
+              isDisabled={!userHasTestLocked}
+              onExperimentMethodologyChange={onExperimentMethodologyChange}
+            />
+          </div>
+        )}
+
         {epicEditorConfig.allowCustomVariantSplit && canHaveCustomVariantSplit(test.variants) && (
           <div className={classes.sectionContainer}>
             <Typography variant={'h3'} className={classes.sectionHeader}>
@@ -258,7 +278,7 @@ export const getEpicTestEditor = (
                 controlProportionSettings={test.controlProportionSettings}
                 onControlProportionSettingsChange={onControlProportionSettingsChange}
                 onValidationChange={onVariantsSplitSettingsValidationChanged}
-                isDisabled={!userHasTestLocked}
+                isDisabled={!userHasTestLocked || !!test.isBanditTest}
               />
             </div>
           </div>

diff --git a/public/src/models/epic.ts b/public/src/models/epic.ts
@@ -62,4 +62,5 @@ export interface EpicTest extends Test {
   controlProportionSettings?: ControlProportionSettings;
   deviceType?: DeviceType;
   campaignName?: string;
+  isBanditTest?: boolean;
 }