Merge pull request #176 from BoostV/feature/advanced-configuration

Feature/advanced configuration

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 (
     <Grid container spacing={3}>
-      <Grid item xs>
+      <Grid item xs="auto">
         <Details
           info={experiment.info}
           updateName={(name: string) =>
@@ -73,17 +79,19 @@ export const ConfigurationTab = () => {
           }
         />
       </Grid>
-      <Grid item xs>
-        <OptimizerConfigurator
-          config={experiment.optimizerConfig}
-          onConfigUpdated={(config: OptimizerConfig) =>
-            dispatch({
-              type: 'updateConfiguration',
-              payload: config,
-            })
-          }
-        />
-      </Grid>
+      {advancedConfiguration && (
+        <Grid item xs>
+          <OptimizerConfigurator
+            config={experiment.optimizerConfig}
+            onConfigUpdated={(config: OptimizerConfig) =>
+              dispatch({
+                type: 'updateConfiguration',
+                payload: config,
+              })
+            }
+          />
+        </Grid>
+      )}
     </Grid>
   )
 }

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 (
     <Grid container spacing={3}>
       <Grid item xs={12}>
-        <ResultData
+        <ExperimentationGuide
           nextValues={nextValues}
           headers={headers}
           expectedMinimum={expectedMinimum}

src/components/experiment/experiment.tsx

@@ -24,7 +24,7 @@ import {
   DataPointType,
 } from '../../types/common'
 import LoadingExperiment from './loading-experiment'
-import { ResultData } from '../result-data/result-data'
+import { ExperimentationGuide } from '../result-data/experimentation-guide'
 import LoadingButton from '../loading-button/loading-button'
 import { Plots } from '../plots/plots'
 import { saveObjectToLocalFile } from '../../utility/save-to-local-file'
@@ -46,7 +46,11 @@ const LegacyExperiment = () => {
     loading,
   } = useExperiment()
   const {
-    state: { debug, uiSizes },
+    state: {
+      debug,
+      uiSizes,
+      flags: { advancedConfiguration },
+    },
   } = useGlobal()
 
   const [isSnackbarOpen, setSnackbarOpen] = useState(false)
@@ -212,17 +216,19 @@ const LegacyExperiment = () => {
                     />
                   </Grid>
 
-                  <Grid item xs={12}>
-                    <OptimizerConfigurator
-                      config={experiment.optimizerConfig}
-                      onConfigUpdated={(config: OptimizerConfig) =>
-                        dispatch({
-                          type: 'updateConfiguration',
-                          payload: config,
-                        })
-                      }
-                    />
-                  </Grid>
+                  {advancedConfiguration && (
+                    <Grid item xs={12}>
+                      <OptimizerConfigurator
+                        config={experiment.optimizerConfig}
+                        onConfigUpdated={(config: OptimizerConfig) =>
+                          dispatch({
+                            type: 'updateConfiguration',
+                            payload: config,
+                          })
+                        }
+                      />
+                    </Grid>
+                  )}
                 </Grid>
               </Grid>
 
@@ -241,7 +247,7 @@ const LegacyExperiment = () => {
                       }
                     >
                       <Grid item xs={12}>
-                        <ResultData
+                        <ExperimentationGuide
                           nextValues={nextValues}
                           headers={headers}
                           expectedMinimum={expectedMinimum}

src/components/layout/layout.tsx

@@ -35,6 +35,9 @@ export default function Layout({ children }: Props) {
     }
   }
 
+  const toggleAdvancedConfiguration = () =>
+    dispatch({ type: 'global/toggleAdvancedConfiguration' })
+
   return (
     <>
       <AppBar>
@@ -78,6 +81,19 @@ export default function Layout({ children }: Props) {
               label="Use tabs"
             />
           )}
+          {showDebug && (
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={state.flags.advancedConfiguration}
+                  onChange={toggleAdvancedConfiguration}
+                  name="showJsonEditor"
+                  color="secondary"
+                />
+              }
+              label="Advanced configuration"
+            />
+          )}
           {
             // eslint-disable-next-line @next/next/no-img-element
             <img

src/components/result-data/result-data.tsx → src/components/result-data/experimentation-guide.tsx

@@ -5,7 +5,7 @@ import { Tooltip, IconButton, Hidden, Box } from '@mui/material'
 import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap'
 import { useGlobal } from '../../context/global-context'
 import { isUIBig } from '../../utility/ui-util'
-import useStyles from './result-data.style'
+import useStyles from './experimentation-guide.style'
 import { SingleDataPoint } from './single-data-point'
 import { NextExperiments } from './next-experiments'
 import { InitializationProgress } from './initialization-progress'
@@ -18,7 +18,7 @@ interface ResultDataProps {
   onMouseLeaveExpand?: () => 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
           <Hidden xlDown>
             <Tooltip
               title={
@@ -89,9 +87,7 @@ export const ResultData = (props: ResultDataProps) => {
       }
     >
       <Box p={2}>
-        {!isInitializing && (
-          <NextExperiments suggestionCount={suggestionCount} />
-        )}
+        {!isInitializing && <NextExperiments />}
         {!nextValues ||
           (nextValues.length === 0 && (
             <div>Please run experiment to calculate suggestions</div>

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<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    dispatch({ type: 'updateSuggestionCount', payload: e.target.value })
+  }
 
-export const NextExperiments = ({ suggestionCount }: NextExperimentsProps) => {
-  const { dispatch } = useExperiment()
+  const handleXiChange = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    dispatch({
+      type: 'updateConfiguration',
+      payload: {
+        ...experiment.optimizerConfig,
+        xi: Number(e.target.value),
+      },
+    })
+  }
 
   return (
-    <>
+    <Stack
+      direction="row"
+      spacing={2}
+      divider={<Divider orientation="vertical" flexItem />}
+    >
       <TextField
         fullWidth
         type="number"
-        margin="dense"
-        defaultValue={suggestionCount}
+        value={suggestionCount}
         name="numberOfSuggestions"
         label="Number of suggested experiments"
-        onChange={e =>
-          dispatch({ type: 'updateSuggestionCount', payload: e.target.value })
-        }
+        onChange={handleSuggestionChange}
+      />
+      <TextField
+        fullWidth
+        type="number"
+        value={experiment.optimizerConfig.xi}
+        name="Xi"
+        label="Xi"
+        onChange={handleXiChange}
       />
-    </>
+    </Stack>
   )
 }

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()
+  })
+})

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)
   }