Merge pull request #22 from BoostV/feature/move_variable_creation_to_…

…model Move variable creation to model, adjust styling and layout, add app bar
BoostV · Apr 22, 2021 · 577804c · 577804c
2 parents b544709 + 3311422
commit 577804c
Show file tree

Hide file tree

Showing 13 changed files with 221 additions and 106 deletions.
diff --git a/components/categorical-variable-options.tsx b/components/categorical-variable-options.tsx
@@ -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 = {
@@ -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>
   )
 }
 

diff --git a/components/categorical-variable.tsx b/components/categorical-variable.tsx
@@ -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}
@@ -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>

diff --git a/components/data-points.tsx b/components/data-points.tsx
@@ -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>

diff --git a/components/layout.tsx b/components/layout.tsx
@@ -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>
+  </>
   )
 }
diff --git a/components/model-editor.tsx b/components/model-editor.tsx
@@ -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}
@@ -30,6 +26,7 @@ export default function ModelEditor(props: ModelEditorProps) {
           <br/>
           <br/>
           <TextField
+            fullWidth
             name="info.description"
             label="Description"
             value={info.description}
@@ -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>
   )

diff --git a/components/optimizer-model.tsx b/components/optimizer-model.tsx
@@ -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) => {
@@ -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>
               ))}
@@ -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>
   )

diff --git a/components/value-variable.tsx b/components/value-variable.tsx
@@ -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}

diff --git a/components/variable-editor.tsx b/components/variable-editor.tsx
@@ -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>
+  )
+}