156 lines
4.5 KiB
JavaScript
156 lines
4.5 KiB
JavaScript
import React from "react";
|
|
import {
|
|
ButtonGroup,
|
|
Button,
|
|
Slider,
|
|
Select,
|
|
ListSubheader,
|
|
MenuItem as SelectItem,
|
|
Typography,
|
|
Switch,
|
|
Grid,
|
|
IconButton
|
|
} from "@material-ui/core";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import {
|
|
faPlay,
|
|
faStop,
|
|
faRedo,
|
|
faFastForward,
|
|
faPause
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import { MenuSection } from "./MenuSection";
|
|
import { MenuItem } from "./MenuItem";
|
|
import { useAlgorithmInfo } from "../hooks";
|
|
import * as actions from "../store/actions";
|
|
import * as selectors from "../store/selectors";
|
|
|
|
export const MenuSolverControls = ({
|
|
onStart,
|
|
onPause,
|
|
onUnPause,
|
|
onFullSpeed,
|
|
onStop
|
|
}) => {
|
|
const dispatch = useDispatch();
|
|
const algorithms = useAlgorithmInfo();
|
|
const selectedAlgorithm = useSelector(selectors.selectAlgorithm);
|
|
const delay = useSelector(selectors.selectDelay);
|
|
const evaluatingDetailLevel = useSelector(
|
|
selectors.selectEvaluatingDetailLevel
|
|
);
|
|
const maxEvaluatingDetailLevel = useSelector(
|
|
selectors.selectMaxEvaluatingDetailLevel
|
|
);
|
|
const showBestPath = useSelector(selectors.selectShowBestPath);
|
|
const running = useSelector(selectors.selectRunning);
|
|
const fullSpeed = useSelector(selectors.selectFullSpeed);
|
|
const paused = useSelector(selectors.selectPaused);
|
|
const definingPoints = useSelector(selectors.selectDefiningPoints);
|
|
|
|
const onAlgorithmChange = event => {
|
|
event.persist();
|
|
onStop();
|
|
const solverKey = event.target.value;
|
|
const { defaults } = algorithms.find(alg => alg.solverKey === solverKey);
|
|
dispatch(actions.setAlgorithm(solverKey, defaults));
|
|
};
|
|
|
|
const onDelayChange = (_, newDelay) => {
|
|
dispatch(actions.setDelay(newDelay));
|
|
};
|
|
|
|
const onEvaluatingDetailLevelChange = (onLevel, offLevel) => event => {
|
|
const level = event.target.checked ? onLevel : offLevel;
|
|
dispatch(actions.setEvaluatingDetailLevel(level));
|
|
};
|
|
|
|
const onShowBestPathChange = event => {
|
|
dispatch(actions.setShowBestPath(event.target.checked));
|
|
};
|
|
|
|
const onReset = () => {
|
|
onStop();
|
|
dispatch(actions.resetSolverState());
|
|
};
|
|
|
|
const onShowAlgInfo = () => {
|
|
dispatch(actions.toggleAlgInfoOpen());
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<MenuSection highlight>
|
|
<MenuItem title="Algorithm">
|
|
<Grid container alignItems="center">
|
|
<Grid item xs={11}>
|
|
<Select
|
|
value={selectedAlgorithm}
|
|
onChange={onAlgorithmChange}
|
|
disabled={running || paused || 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>Exhaustive</ListSubheader>
|
|
{algorithms
|
|
.filter(alg => alg.type === "exhaustive")
|
|
.map(alg => (
|
|
<SelectItem value={alg.solverKey} key={alg.solverKey}>
|
|
{alg.friendlyName}
|
|
</SelectItem>
|
|
))}
|
|
</Select>
|
|
</Grid>
|
|
</Grid>
|
|
</MenuItem>
|
|
|
|
<MenuItem title="Controls">
|
|
<ButtonGroup
|
|
fullWidth
|
|
variant="outlined"
|
|
color="secondary"
|
|
size="large"
|
|
>
|
|
<Button
|
|
onClick={paused ? onUnPause : running ? onPause : onStart}
|
|
disabled={definingPoints || fullSpeed}
|
|
>
|
|
<FontAwesomeIcon
|
|
icon={paused ? faPlay : running ? faPause : faPlay}
|
|
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>
|
|
</MenuSection>
|
|
|
|
</>
|
|
);
|
|
};
|