Skip to content

Commit

Permalink
Merge pull request #22 from BoostV/feature/move_variable_creation_to_…
Browse files Browse the repository at this point in the history
…model

Move variable creation to model, adjust styling and layout, add app bar
  • Loading branch information
j-or authored Apr 22, 2021
2 parents b544709 + 3311422 commit 577804c
Show file tree
Hide file tree
Showing 13 changed files with 221 additions and 106 deletions.
30 changes: 18 additions & 12 deletions components/categorical-variable-options.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Button, TextField } from '@material-ui/core';
import { Button, Grid, IconButton, TextField } from '@material-ui/core';
import AddIcon from "@material-ui/icons/Add";
import { ChangeEvent, useState } from 'react';

type CategoricalVariableOptionProps = {
Expand All @@ -18,17 +19,22 @@ export default function CategoricalVariableOptions(props: CategoricalVariableOpt
}

return (
<>
<TextField
name="option"
label=""
value={option}
onChange={(e: ChangeEvent) => updateOption((e.target as HTMLInputElement).value)}
/>
<br />
<Button variant="outlined" onClick={() => {onOptionAdded()}} size="small">Add option</Button>
<br />
</>
<Grid container spacing={1}>
<Grid item xs={8}>
<TextField
fullWidth
name="option"
label=""
value={option}
onChange={(e: ChangeEvent) => updateOption((e.target as HTMLInputElement).value)}
/>
</Grid>
<Grid item xs={4}>
<IconButton size="small" onClick={() => onOptionAdded()}>
<AddIcon />
</IconButton>
</Grid>
</Grid>
)
}

Expand Down
4 changes: 3 additions & 1 deletion components/categorical-variable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,15 @@ export default function CategoricalVariable(props: CategoricalVariableProps) {
<>
<form onSubmit={handleSubmit(onSubmit)}>
<TextField
fullWidth
name="name"
label="Name"
inputRef={register}
/>
<br />
<br />
<TextField
fullWidth
name="description"
label="Description"
inputRef={register}
Expand All @@ -50,7 +52,7 @@ export default function CategoricalVariable(props: CategoricalVariableProps) {
{options.map((option, index) => (
<div key={index}>
<div className={classes.option}>
<Typography variant="body2">{option}</Typography>
<Typography variant="body1">{option}</Typography>
<IconButton onClick={() => deleteOption(index)} size="small" aria-label="delete" color="primary">
<DeleteIcon />
</IconButton>
Expand Down
2 changes: 1 addition & 1 deletion components/data-points.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export default function DataPoints(props: DataPointProps) {
<TableRow>
{variableNames.map((name, index) =>
<TableCell key={index}>
<TextField onChange={(e: ChangeEvent) => onNewPointChange(name, index, (e.target as HTMLInputElement).value)} />
<TextField fullWidth onChange={(e: ChangeEvent) => onNewPointChange(name, index, (e.target as HTMLInputElement).value)} />
</TableCell>
)}
</TableRow>
Expand Down
39 changes: 28 additions & 11 deletions components/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,33 @@
import { AppBar, Button, Toolbar, Typography } from '@material-ui/core'
import Link from 'next/link'
import useStyles from '../styles/layout.style'
import Image from 'next/image'

export default function Layout ( {children} ) {
const classes = useStyles()

export default function Layout ( {children}) {
return (
<div>
<Link href="/">
<a>Home</a>
</Link>
<span> | </span>
<Link href="/experiment/123">
<a>Experiment</a>
</Link>
{children}
</div>
<>
<AppBar>
<Toolbar variant="dense">
<div className={classes.logo}>
<Image src="/logo.png" alt="logo" width="32" height="32" />
</div>
<Typography variant="h6">
BrownieBee
</Typography>
<div className={classes.links}>
<Link href="/">
<Button className={classes.link}>
<a>Home</a>
</Button>
</Link>
</div>
</Toolbar>
</AppBar>
<div className={classes.mainContent}>
{children}
</div>
</>
)
}
46 changes: 5 additions & 41 deletions components/model-editor.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,22 @@
import { Card, CardContent, Grid, Radio, TextField, Typography } from '@material-ui/core'
import { ChangeEvent, useState } from 'react';
import { CategoricalVariableType, Info, ValueVariableType } from '../types/common';
import CategoricalVariable from './categorical-variable';
import ValueVariable from './value-variable';
import { Card, CardContent, TextField } from '@material-ui/core'
import { ChangeEvent } from 'react';
import { Info } from '../types/common';

type ModelEditorProps = {
info: Info
updateName: (name: string) => void
updateDescription: (description: string) => void
addValueVariable: (valueVariable: ValueVariableType) => void
addCategoricalVariable: (categoricalVariable: CategoricalVariableType) => void
}

export default function ModelEditor(props: ModelEditorProps) {
const { info } = props
const [radioIndex, setRadioIndex] = useState(0)

return (
<Card>
<CardContent>
<form>
<TextField
fullWidth
name="name"
label="Name"
value={info.name}
Expand All @@ -30,6 +26,7 @@ export default function ModelEditor(props: ModelEditorProps) {
<br/>
<br/>
<TextField
fullWidth
name="info.description"
label="Description"
value={info.description}
Expand All @@ -39,39 +36,6 @@ export default function ModelEditor(props: ModelEditorProps) {
<br />
<br />
</form>
<Card>
<CardContent>
<Typography variant="h6" gutterBottom>
Add new variable
</Typography>
<Grid container spacing={0}>
<Grid item xs={3}>
<Radio
checked={radioIndex === 0}
onChange={() => {setRadioIndex(0)}}
/>
<Typography>Value</Typography>
</Grid>
<Grid item xs={9}>
<Radio
checked={radioIndex === 1}
onChange={() => {setRadioIndex(1)}}
/>
<Typography>Categorical</Typography>
</Grid>
<Grid item xs={12}>
<br/>
<br/>
{radioIndex === 0 &&
<ValueVariable onAdded={(valueVariable: ValueVariableType) => props.addValueVariable(valueVariable)} />
}
{radioIndex === 1 &&
<CategoricalVariable onAdded={(categoricalVariable: CategoricalVariableType) => props.addCategoricalVariable(categoricalVariable)} />
}
</Grid>
</Grid>
</CardContent>
</Card>
</CardContent>
</Card>
)
Expand Down
32 changes: 23 additions & 9 deletions components/optimizer-model.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import { Button, Card, CardContent, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@material-ui/core'
import { Button, Card, CardContent, IconButton, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@material-ui/core'
import { CategoricalVariableType, ExperimentType, ValueVariableType } from '../types/common'
import DeleteIcon from '@material-ui/icons/Delete'
import { ReactNode } from 'react'
import { ReactNode, useState } from 'react'
import VariableEditor from './variable-editor'

type OptimizerModelProps = {
experiment: ExperimentType
onDeleteValueVariable: (valueVariable: ValueVariableType) => void
onDeleteCategoricalVariable: (categoricalVariable: CategoricalVariableType) => void
addValueVariable: (valueVariable: ValueVariableType) => void
addCategoricalVariable: (categoricalVariable: CategoricalVariableType) => void
}

export default function OptimizerModel(props: OptimizerModelProps) {

const { experiment: { valueVariables, categoricalVariables} } = props
const [isAddOpen, setAddOpen] = useState(false)

function renderCategoricalVariableOptions(options: string[]): ReactNode[] {
return options.map((option, optionIndex) => {
Expand Down Expand Up @@ -51,9 +54,9 @@ export default function OptimizerModel(props: OptimizerModelProps) {
<TableCell align="right">{valueVar.minVal}</TableCell>
<TableCell align="right">{valueVar.maxVal}</TableCell>
<TableCell align="right">
<Button size="small" onClick={() => {props.onDeleteValueVariable(valueVar)}}>
<DeleteIcon color="primary" fontSize="small"/>Delete
</Button>
<IconButton size="small" onClick={() => {props.onDeleteValueVariable(valueVar)}}>
<DeleteIcon color="primary" fontSize="small"/>
</IconButton>
</TableCell>
</TableRow>
))}
Expand Down Expand Up @@ -83,16 +86,27 @@ export default function OptimizerModel(props: OptimizerModelProps) {
{renderCategoricalVariableOptions(catVar.options)}
</TableCell>
<TableCell align="right">
<Button size="small" onClick={() => {props.onDeleteCategoricalVariable(catVar)}}>
<DeleteIcon color="primary" fontSize="small"/>Delete
</Button>
<IconButton size="small" onClick={() => {props.onDeleteCategoricalVariable(catVar)}}>
<DeleteIcon color="primary" fontSize="small"/>
</IconButton>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</>
}
<br/>
<br/>
{!isAddOpen &&
<Button variant="outlined" size="small" onClick={() => setAddOpen(true)}>Add variable</Button>
}
{isAddOpen &&
<VariableEditor
addCategoricalVariable={(categoricalVariable: CategoricalVariableType) => props.addCategoricalVariable(categoricalVariable)}
addValueVariable={(valueVariable: ValueVariableType) => props.addValueVariable(valueVariable)}
close={() => setAddOpen(false)} />
}
</CardContent>
</Card>
)
Expand Down
4 changes: 4 additions & 0 deletions components/value-variable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,27 +18,31 @@ export default function ValueVariable(props: ValueVariableProps) {
<>
<form onSubmit={handleSubmit(onSubmit)}>
<TextField
fullWidth
name="name"
label="Name"
inputRef={register}
/>
<br />
<br />
<TextField
fullWidth
name="description"
label="Description"
inputRef={register}
/>
<br />
<br />
<TextField
fullWidth
name="minVal"
label="minVal"
inputRef={register}
/>
<br />
<br />
<TextField
fullWidth
name="maxVal"
label="maxVal"
inputRef={register}
Expand Down
68 changes: 68 additions & 0 deletions components/variable-editor.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import CategoricalVariable from './categorical-variable';
import ValueVariable from './value-variable';
import { Card, CardContent, Grid, IconButton, Radio, Typography } from "@material-ui/core"
import CloseIcon from "@material-ui/icons/Close";
import { useState } from "react"
import { CategoricalVariableType, ValueVariableType } from '../types/common';
import useStyles from '../styles/variable-editor.style';

type VariableEditorProps = {
addValueVariable: (valueVariable: ValueVariableType) => void
addCategoricalVariable: (categoricalVariable: CategoricalVariableType) => void
close: () => void
}

export default function VariableEditor(props: VariableEditorProps) {
const [radioIndex, setRadioIndex] = useState(0)
const classes = useStyles()

return (
<Grid container spacing={0}>
<Grid item xs={6}>
<Card className={classes.main}>
<CardContent>
<Grid container spacing={0}>

<Grid item xs={11}>
<Typography variant="h6" gutterBottom>
Add variable
</Typography>
</Grid>

<Grid item xs={1}>
<IconButton size="small" onClick={() => props.close()}>
<CloseIcon/>
</IconButton>
</Grid>

<Grid item xs={3}>
<Radio
checked={radioIndex === 0}
onChange={() => {setRadioIndex(0)}}
/>
<Typography>Value</Typography>
</Grid>
<Grid item xs={9}>
<Radio
checked={radioIndex === 1}
onChange={() => {setRadioIndex(1)}}
/>
<Typography>Categorical</Typography>
</Grid>
<Grid item xs={12}>
<br/>
<br/>
{radioIndex === 0 &&
<ValueVariable onAdded={(valueVariable: ValueVariableType) => props.addValueVariable(valueVariable)} />
}
{radioIndex === 1 &&
<CategoricalVariable onAdded={(categoricalVariable: CategoricalVariableType) => props.addCategoricalVariable(categoricalVariable)} />
}
</Grid>
</Grid>
</CardContent>
</Card>
</Grid>
</Grid>
)
}
Loading

0 comments on commit 577804c

Please sign in to comment.