diff --git a/src/components/experiment/configurationTab.tsx b/src/components/experiment/configurationTab.tsx index 4f79f5bb..0ca5bec7 100644 --- a/src/components/experiment/configurationTab.tsx +++ b/src/components/experiment/configurationTab.tsx @@ -1,5 +1,6 @@ import { Grid } from '@mui/material' import { useExperiment } from '../../context/experiment-context' +import { useGlobal } from '../../context/global-context' import { ValueVariableType, CategoricalVariableType, @@ -14,13 +15,18 @@ export const ConfigurationTab = () => { state: { experiment }, dispatch, } = useExperiment() + const { + state: { + flags: { advancedConfiguration }, + }, + } = useGlobal() const valueVariables = experiment.valueVariables const categoricalVariables = experiment.categoricalVariables return ( - +
@@ -73,17 +79,19 @@ export const ConfigurationTab = () => { } /> - - - dispatch({ - type: 'updateConfiguration', - payload: config, - }) - } - /> - + {advancedConfiguration && ( + + + dispatch({ + type: 'updateConfiguration', + payload: config, + }) + } + /> + + )} ) } diff --git a/src/components/experiment/dataEntryTab.tsx b/src/components/experiment/dataEntryTab.tsx index efa918a4..daf41be7 100644 --- a/src/components/experiment/dataEntryTab.tsx +++ b/src/components/experiment/dataEntryTab.tsx @@ -2,7 +2,7 @@ import { Grid } from '@mui/material' import { useExperiment } from '../../context/experiment-context' import { DataPointType } from '../../types/common' import DataPoints from '../data-points/data-points' -import { ResultData } from '../result-data/result-data' +import { ExperimentationGuide } from '../result-data/experimentation-guide' export const DataEntryTab = () => { const { @@ -29,7 +29,7 @@ export const DataEntryTab = () => { return ( - { loading, } = useExperiment() const { - state: { debug, uiSizes }, + state: { + debug, + uiSizes, + flags: { advancedConfiguration }, + }, } = useGlobal() const [isSnackbarOpen, setSnackbarOpen] = useState(false) @@ -212,17 +216,19 @@ const LegacyExperiment = () => { /> - - - dispatch({ - type: 'updateConfiguration', - payload: config, - }) - } - /> - + {advancedConfiguration && ( + + + dispatch({ + type: 'updateConfiguration', + payload: config, + }) + } + /> + + )} @@ -241,7 +247,7 @@ const LegacyExperiment = () => { } > - + dispatch({ type: 'global/toggleAdvancedConfiguration' }) + return ( <> @@ -78,6 +81,19 @@ export default function Layout({ children }: Props) { label="Use tabs" /> )} + {showDebug && ( + + } + label="Advanced configuration" + /> + )} { // eslint-disable-next-line @next/next/no-img-element void } -export const ResultData = (props: ResultDataProps) => { +export const ExperimentationGuide = (props: ResultDataProps) => { const { nextValues, headers, @@ -34,8 +34,6 @@ export const ResultData = (props: ResultDataProps) => { state: { uiSizes }, dispatch, } = useGlobal() - const suggestionCount: number = - (experiment.extras['experimentSuggestionCount'] as number) ?? 1 const isInitializing = experiment.optimizerConfig.initialPoints === 0 || @@ -58,7 +56,7 @@ export const ResultData = (props: ResultDataProps) => { padding={0} title={ <> - Result data + Experimentation guide { } > - {!isInitializing && ( - - )} + {!isInitializing && } {!nextValues || (nextValues.length === 0 && (
Please run experiment to calculate suggestions
diff --git a/src/components/result-data/next-experiments.tsx b/src/components/result-data/next-experiments.tsx index d0451b47..1b66fb5d 100644 --- a/src/components/result-data/next-experiments.tsx +++ b/src/components/result-data/next-experiments.tsx @@ -1,26 +1,55 @@ -import { TextField } from '@mui/material' +import { Divider, Stack, TextField } from '@mui/material' +import { ChangeEvent } from 'react' import { useExperiment } from '../../context/experiment-context' -interface NextExperimentsProps { - suggestionCount: number -} +export const NextExperiments = () => { + const { + state: { experiment }, + dispatch, + } = useExperiment() + const suggestionCount: number = + (experiment.extras['experimentSuggestionCount'] as number) ?? 1 + + const handleSuggestionChange = ( + e: ChangeEvent + ) => { + dispatch({ type: 'updateSuggestionCount', payload: e.target.value }) + } -export const NextExperiments = ({ suggestionCount }: NextExperimentsProps) => { - const { dispatch } = useExperiment() + const handleXiChange = ( + e: ChangeEvent + ) => { + dispatch({ + type: 'updateConfiguration', + payload: { + ...experiment.optimizerConfig, + xi: Number(e.target.value), + }, + }) + } return ( - <> + } + > - dispatch({ type: 'updateSuggestionCount', payload: e.target.value }) - } + onChange={handleSuggestionChange} + /> + - + ) } diff --git a/src/reducers/global-reducer.test.ts b/src/reducers/global-reducer.test.ts index fc0fd79d..e175487d 100644 --- a/src/reducers/global-reducer.test.ts +++ b/src/reducers/global-reducer.test.ts @@ -1,15 +1,7 @@ import { ThemeName } from '../theme/theme' -import { reducer, State, UISizeValue } from './global-reducer' +import { initialState, reducer, State, UISizeValue } from './global-reducer' -const initState: State = { - debug: false, - experimentsInLocalStorage: [], - theme: 'BlueGreen', - dataPointsNewestFirst: false, - showJsonEditor: false, - uiSizes: [{ key: 'plots', value: 12 }], - focus: 'legacy', -} +const initState = initialState describe('storeExperimentId', () => { it('should store id', async () => { @@ -98,8 +90,26 @@ describe('toggleUISize', () => { ...initState, uiSizes: [{ key: payload, value: UISizeValue.Small }], } - expect(reducer(initState, { type: 'toggleUISize', payload })).toEqual( + const testState: State = { + ...initState, + uiSizes: [{ key: 'plots', value: 12 }], + } + expect(reducer(testState, { type: 'toggleUISize', payload })).toEqual( expectedState ) }) }) + +describe('toggleAdvancedConfiguration', () => { + it('should toggle advanced configuration flag', () => { + let state = reducer(initState, { + type: 'global/toggleAdvancedConfiguration', + }) + expect(state.flags.advancedConfiguration).toBeTruthy() + + state = reducer(state, { + type: 'global/toggleAdvancedConfiguration', + }) + expect(state.flags.advancedConfiguration).toBeFalsy() + }) +}) diff --git a/src/reducers/global-reducer.ts b/src/reducers/global-reducer.ts index 3dd86f75..b752b7a5 100644 --- a/src/reducers/global-reducer.ts +++ b/src/reducers/global-reducer.ts @@ -10,6 +10,9 @@ export type State = { showJsonEditor: boolean uiSizes: UISize[] focus: 'configuration' | 'data-entry' | 'results' | 'legacy' + flags: { + advancedConfiguration: boolean + } } export enum UISizeValue { @@ -57,6 +60,7 @@ export type Action = type: 'global/setFocus' payload: State['focus'] } + | { type: 'global/toggleAdvancedConfiguration' } export type Dispatch = (action: Action) => void export const initialState: State = { @@ -67,6 +71,9 @@ export const initialState: State = { showJsonEditor: false, uiSizes: [], focus: 'legacy', + flags: { + advancedConfiguration: false, + }, } export const reducer = produce((state: State, action: Action) => { @@ -124,6 +131,9 @@ export const reducer = produce((state: State, action: Action) => { case 'global/setFocus': state.focus = action.payload break + case 'global/toggleAdvancedConfiguration': + state.flags.advancedConfiguration = !state.flags.advancedConfiguration + break default: assertUnreachable(action) }