Skip to content

Commit

Permalink
highlight most important controls
Browse files Browse the repository at this point in the history
  • Loading branch information
@jhackshaw
jhackshaw committed Apr 6, 2020
1 parent d0fc24d commit 4a4234d
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 137 deletions.
1 change: 0 additions & 1 deletion src/components/Menu.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ const Menu = ({ onStart, onFullSpeed, onStop, onRandomizePoints }) => {
<MenuHeader />
<Divider />
<MenuMetrics />
<Divider />
<MenuSolverControls
onStart={onStart}
onStop={onStop}
Expand Down
11 changes: 8 additions & 3 deletions src/components/MenuSection.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,17 @@ import { Grid } from "@material-ui/core"

const useStyles = makeStyles(theme => ({
section: {
padding: theme.spacing(2)
padding: theme.spacing(2),
// backgroundColor: ({ highlight = false }) =>
// highlight ? theme.palette.grey[100] : theme.palette.paper,
border: ({ highlight = false }) =>
highlight ? `2px solid ${theme.palette.secondary.main}` : "none",
borderRadius: "10px"
}
}))

const MenuSection = ({ children }) => {
const classes = useStyles()
const MenuSection = ({ children, ...rest }) => {
const classes = useStyles(rest)

return (
<div className={classes.section}>
Expand Down
268 changes: 135 additions & 133 deletions src/components/MenuSolverControls.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,147 +71,149 @@ const MenuSolverControls = ({ onStart, onFullSpeed, onStop }) => {
}

return (
<MenuSection>
<MenuItem title="Algorithm">
<Grid container alignItems="center">
<Grid item xs={11}>
<Select
value={selectedAlgorithm}
onChange={onAlgorithmChange}
disabled={running || definingPoints}
variant="outlined"
fullWidth
margin="dense"
>
<ListSubheader>Heuristic Construction</ListSubheader>
{algorithms
.filter(alg => alg.type === "heuristic-construction")
.map(alg => (
<SelectItem value={alg.solverKey} key={alg.solverKey}>
{alg.friendlyName}
</SelectItem>
))}
<ListSubheader>Heuristic Improvement</ListSubheader>
{algorithms
.filter(alg => alg.type === "heuristic-improvement")
.map(alg => (
<SelectItem value={alg.solverKey} key={alg.solverKey}>
{alg.friendlyName}
</SelectItem>
))}
<ListSubheader>Exhaustive</ListSubheader>
{algorithms
.filter(alg => alg.type === "exhaustive")
.map(alg => (
<SelectItem value={alg.solverKey} key={alg.solverKey}>
{alg.friendlyName}
</SelectItem>
))}
</Select>
</Grid>
<Grid item xs={1}>
<Typography align="right" color="textSecondary">
<IconButton edge="end" onClick={onShowAlgInfo}>
<FontAwesomeIcon icon={faQuestion} size="xs" />
</IconButton>
</Typography>
<>
<MenuSection highlight>
<MenuItem title="Algorithm">
<Grid container alignItems="center">
<Grid item xs={11}>
<Select
value={selectedAlgorithm}
onChange={onAlgorithmChange}
disabled={running || definingPoints}
variant="outlined"
fullWidth
margin="dense"
>
<ListSubheader>Heuristic Construction</ListSubheader>
{algorithms
.filter(alg => alg.type === "heuristic-construction")
.map(alg => (
<SelectItem value={alg.solverKey} key={alg.solverKey}>
{alg.friendlyName}
</SelectItem>
))}
<ListSubheader>Heuristic Improvement</ListSubheader>
{algorithms
.filter(alg => alg.type === "heuristic-improvement")
.map(alg => (
<SelectItem value={alg.solverKey} key={alg.solverKey}>
{alg.friendlyName}
</SelectItem>
))}
<ListSubheader>Exhaustive</ListSubheader>
{algorithms
.filter(alg => alg.type === "exhaustive")
.map(alg => (
<SelectItem value={alg.solverKey} key={alg.solverKey}>
{alg.friendlyName}
</SelectItem>
))}
</Select>
</Grid>
<Grid item xs={1}>
<Typography align="right" color="textSecondary">
<IconButton edge="end" onClick={onShowAlgInfo}>
<FontAwesomeIcon icon={faQuestion} size="xs" />
</IconButton>
</Typography>
</Grid>
</Grid>
</Grid>
</MenuItem>
</MenuItem>

<MenuItem title="Controls">
<ButtonGroup
fullWidth
variant="outlined"
color="secondary"
size="large"
>
<Button
onClick={running ? onFullSpeed : onStart}
disabled={definingPoints || fullSpeed}
<MenuItem title="Controls">
<ButtonGroup
fullWidth
variant="outlined"
color="secondary"
size="large"
>
<FontAwesomeIcon
icon={running ? faFastForward : faPlay}
width="0"
/>
</Button>
<Button onClick={onStop} disabled={!running || definingPoints}>
<FontAwesomeIcon icon={faStop} width="0" />
</Button>
<Button onClick={onReset} disabled={running || definingPoints}>
<FontAwesomeIcon icon={faRedo} width="0" />
</Button>
</ButtonGroup>
</MenuItem>

<MenuItem title="Delay">
<Slider
value={delay}
onChange={onDelayChange}
step={25}
min={0}
max={250}
valueLabelDisplay="auto"
color="secondary"
disabled={definingPoints || fullSpeed}
/>
</MenuItem>

<MenuItem row>
<Grid item xs={10}>
<Typography variant="button" color="textSecondary" component="div">
Show Best Path
</Typography>
</Grid>
<Grid item xs={2}>
<Switch
checked={showBestPath}
onChange={onShowBestPathChange}
<Button
onClick={running ? onFullSpeed : onStart}
disabled={definingPoints || fullSpeed}
>
<FontAwesomeIcon
icon={running ? faFastForward : faPlay}
width="0"
/>
</Button>
<Button onClick={onStop} disabled={!running || definingPoints}>
<FontAwesomeIcon icon={faStop} width="0" />
</Button>
<Button onClick={onReset} disabled={running || definingPoints}>
<FontAwesomeIcon icon={faRedo} width="0" />
</Button>
</ButtonGroup>
</MenuItem>
<MenuItem title="Delay">
<Slider
value={delay}
onChange={onDelayChange}
step={25}
min={0}
max={250}
valueLabelDisplay="auto"
color="secondary"
disabled={definingPoints || fullSpeed}
id="show-best-path"
/>
</Grid>
</MenuItem>
</MenuSection>
<MenuSection>
<MenuItem row>
<Grid item xs={10}>
<Typography variant="button" color="textSecondary" component="div">
Show Best Path
</Typography>
</Grid>
<Grid item xs={2}>
<Switch
checked={showBestPath}
onChange={onShowBestPathChange}
color="secondary"
disabled={definingPoints || fullSpeed}
id="show-best-path"
/>
</Grid>

<Grid item xs={10}>
<Typography variant="button" color="textSecondary" component="div">
Show Evaluated Paths
</Typography>
</Grid>
<Grid item xs={2}>
<Switch
checked={evaluatingDetailLevel > 0}
onChange={onEvaluatingDetailLevelChange(1, 0)}
color="secondary"
disabled={definingPoints || fullSpeed}
id="show-evaluating-paths"
/>
</Grid>
<Grid item xs={10}>
<Typography variant="button" color="textSecondary" component="div">
Show Evaluated Paths
</Typography>
</Grid>
<Grid item xs={2}>
<Switch
checked={evaluatingDetailLevel > 0}
onChange={onEvaluatingDetailLevelChange(1, 0)}
color="secondary"
disabled={definingPoints || fullSpeed}
id="show-evaluating-paths"
/>
</Grid>

{maxEvaluatingDetailLevel > 1 && (
<>
<Grid item xs={10}>
<Typography
variant="button"
color="textSecondary"
component="div"
>
Show Evaluated Steps
</Typography>
</Grid>
<Grid item xs={2}>
<Switch
checked={evaluatingDetailLevel > 1}
onChange={onEvaluatingDetailLevelChange(2, 1)}
color="secondary"
disabled={definingPoints || fullSpeed}
id="show-evaluating-steps"
/>
</Grid>
</>
)}
</MenuItem>
</MenuSection>
{maxEvaluatingDetailLevel > 1 && (
<>
<Grid item xs={10}>
<Typography
variant="button"
color="textSecondary"
component="div"
>
Show Evaluated Steps
</Typography>
</Grid>
<Grid item xs={2}>
<Switch
checked={evaluatingDetailLevel > 1}
onChange={onEvaluatingDetailLevelChange(2, 1)}
color="secondary"
disabled={definingPoints || fullSpeed}
id="show-evaluating-steps"
/>
</Grid>
</>
)}
</MenuItem>
</MenuSection>
</>
)
}

Expand Down

0 comments on commit 4a4234d

Please sign in to comment.