-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Test methodologies editor (simpler) (#641)
* Test methodologies editor * comment * min: 0.1 * Default to ABTest * only allow one method
- Loading branch information
Showing
14 changed files
with
172 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| package models | ||
|
|
||
| import io.circe.generic.extras.Configuration | ||
| import io.circe.generic.extras.auto._ | ||
| import io.circe.{Decoder, Encoder} | ||
|
|
||
| sealed trait Methodology | ||
|
|
||
| case class ABTest(name: String = "ABTest") extends Methodology | ||
| case class EpsilonGreedyBandit(name: String = "EpsilonGreedyBandit", epsilon: Double) extends Methodology | ||
|
|
||
| case object Methodology { | ||
| val defaultMethodologies = List(ABTest()) | ||
|
|
||
| implicit val customConfig: Configuration = Configuration.default.withDiscriminator("name") | ||
|
|
||
| implicit val secondaryCtaDecoder = Decoder[Methodology] | ||
| implicit val secondaryCtaEncoder = Encoder[Methodology] | ||
| } |
110 changes: 110 additions & 0 deletions
110
public/src/components/channelManagement/TestMethodologyEditor.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import React from 'react'; | ||
| import { Methodology } from './helpers/shared'; | ||
| import { makeStyles } from '@mui/styles'; | ||
| import { MenuItem, Select, SelectChangeEvent, TextField, Theme } from '@mui/material'; | ||
|
|
||
| const useStyles = makeStyles(({ spacing, palette }: Theme) => ({ | ||
| container: { | ||
| '& > * + *': { | ||
| marginTop: spacing(1), | ||
| }, | ||
| }, | ||
| methodologyContainer: { | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| border: `1px solid ${palette.grey[800]}`, | ||
| borderRadius: '4px', | ||
| padding: spacing(1), | ||
| '& > * + *': { | ||
| marginLeft: spacing(1), | ||
| }, | ||
| }, | ||
| })); | ||
|
|
||
| const defaultEpsilonGreedyBandit: Methodology = { | ||
| name: 'EpsilonGreedyBandit', | ||
| epsilon: 0.1, | ||
| }; | ||
|
|
||
| interface TestMethodologyProps { | ||
| methodology: Methodology; | ||
| isDisabled: boolean; | ||
| onChange: (methodology: Methodology) => void; | ||
| } | ||
|
|
||
| const TestMethodology: React.FC<TestMethodologyProps> = ({ | ||
| methodology, | ||
| isDisabled, | ||
| onChange, | ||
| }: TestMethodologyProps) => { | ||
| const classes = useStyles(); | ||
|
|
||
| const onSelectChange = (event: SelectChangeEvent<Methodology['name']>) => { | ||
| const value = event.target.value as Methodology['name']; | ||
| if (value === 'EpsilonGreedyBandit') { | ||
| onChange(defaultEpsilonGreedyBandit); | ||
| } else { | ||
| onChange({ name: 'ABTest' }); | ||
| } | ||
| }; | ||
| return ( | ||
| <div className={classes.methodologyContainer}> | ||
| <div> | ||
| <Select value={methodology.name} onChange={onSelectChange}> | ||
| <MenuItem value={'ABTest'} key={'ABTest'}> | ||
| AB test | ||
| </MenuItem> | ||
| <MenuItem value={'EpsilonGreedyBandit'} key={'EpsilonGreedyBandit'}> | ||
| Epsilon-greedy bandit | ||
| </MenuItem> | ||
| </Select> | ||
| </div> | ||
| <div> | ||
| {methodology.name === 'EpsilonGreedyBandit' && ( | ||
| <div> | ||
| <TextField | ||
| type={'number'} | ||
| InputProps={{ inputProps: { min: 0.1, max: 1, step: 0.1 } }} | ||
| value={methodology.epsilon} | ||
| label={'Epsilon'} | ||
| disabled={isDisabled} | ||
| onChange={event => { | ||
| const epsilon = parseFloat(event.target.value); | ||
| onChange({ ...methodology, epsilon }); | ||
| }} | ||
| /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| interface TestMethodologyEditorProps { | ||
| methodologies: Methodology[]; | ||
| onChange: (methodologies: Methodology[]) => void; | ||
| isDisabled: boolean; | ||
| } | ||
|
|
||
| export const TestMethodologyEditor: React.FC<TestMethodologyEditorProps> = ({ | ||
| methodologies, | ||
| onChange, | ||
| isDisabled, | ||
| }: TestMethodologyEditorProps) => { | ||
| const classes = useStyles(); | ||
|
|
||
| // For now we only support one methodology | ||
| const methodology = methodologies[0] ?? { name: 'ABTest' }; | ||
|
|
||
| return ( | ||
| <div className={classes.container}> | ||
| <TestMethodology | ||
| methodology={methodology} | ||
| isDisabled={isDisabled} | ||
| onChange={updatedMethodology => { | ||
| onChange([updatedMethodology]); | ||
| }} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.