diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx index c14ae89..3b352ed 100644 --- a/src/components/Menu.jsx +++ b/src/components/Menu.jsx @@ -1,10 +1,9 @@ import React from "react"; import { makeStyles } from "@material-ui/styles"; import { Paper, Divider } from "@material-ui/core"; -import { MenuHeader } from "./MenuHeader"; + import { MenuSolverControls } from "./MenuSolverControls"; import { MenuMetrics } from "./MenuMetrics"; -import { MenuPointControls } from "./MenuPointControls"; import { OtherControls } from "./OtherControls"; import { MemoryUsage } from "./MemoryUsage"; @@ -28,9 +27,9 @@ export const Menu = ({ onStart, onPause, onUnPause, - onFullSpeed, + onStop, - onRandomizePoints + }) => { const classes = useStyles(); @@ -38,22 +37,21 @@ export const Menu = ({ - + diff --git a/src/components/MenuHeader.jsx b/src/components/MenuHeader.jsx deleted file mode 100644 index f72797d..0000000 --- a/src/components/MenuHeader.jsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from "react"; -import { useDispatch } from "react-redux"; -import { Grid, Typography, IconButton, Tooltip } from "@material-ui/core"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faInfoCircle, - faBriefcase, - faDonate -} from "@fortawesome/free-solid-svg-icons"; -import { faGithub } from "@fortawesome/free-brands-svg-icons"; -import { makeStyles } from "@material-ui/styles"; -import { MenuSection } from "./MenuSection"; - -import * as actions from "../store/actions"; - -const useStyles = makeStyles(theme => ({ - root: { - paddingTop: theme.spacing(3), - paddingBottom: theme.spacing(3) - }, - title: { - fontSize: "1.2rem" - } -})); - -export const MenuHeader = props => { - const classes = useStyles(); - const dispatch = useDispatch(); - - const onOpenSiteInfo = () => { - dispatch(actions.toggleSiteInfoOpen()); - }; - - return ( - - - - TSPVIS - - - - - - - - - - - - - - - - - Visualize algorithms for the traveling salesman problem. Use the - controls below to plot points, choose an algorithm, and control - execution. -
- (Hint: try a construction alogorithm followed by an improvement - algorithm) -
-
- ); -}; diff --git a/src/components/MenuPointControls.jsx b/src/components/MenuPointControls.jsx deleted file mode 100644 index f97959a..0000000 --- a/src/components/MenuPointControls.jsx +++ /dev/null @@ -1,141 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { useSelector, useDispatch } from "react-redux"; -import { - ButtonGroup, - Button, - Slider, - Grid, - Typography, - makeStyles -} from "@material-ui/core"; -import { - faRandom, - faSave, - faMousePointer, - faMapMarked -} from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; - -import { MenuSection } from "./MenuSection"; -import { MenuItem } from "./MenuItem"; -import * as selectors from "../store/selectors"; -import * as actions from "../store/actions"; - -const useStyles = makeStyles(theme => ({ - grow: { - flexGrow: 1 - } -})); - -// [0, 1/2, 1, 3, 12] -let cache = ["1e+0", "1e+0"]; -const possRoutes = n => { - if (n <= 2) { - return "1e+0"; - } - if (typeof cache[n - 1] !== "undefined") { - return cache[n - 1]; - } - - let result = 1; - - for (let i = 1; i <= n; i++) { - result *= i; - cache[i] = (result / 2).toExponential(3); - } - - return cache[n - 1]; -}; - -export const MenuPointControls = ({ onRandomizePoints }) => { - const classes = useStyles(); - const [possiblePaths, setPossiblePaths] = useState("0"); - const dispatch = useDispatch(); - const pointCount = useSelector(selectors.selectPointCount); - const running = useSelector(selectors.selectRunning); - const definingPoints = useSelector(selectors.selectDefiningPoints); - - const onDefaultMap = () => { - dispatch(actions.setDefaultMap()); - }; - - const onToggleDefiningPoints = () => { - const action = definingPoints - ? actions.stopDefiningPoints() - : actions.startDefiningPoints(); - dispatch(action); - }; - - const onPointCountChange = (_, newCount) => { - dispatch(actions.setPointCount(newCount)); - }; - - useEffect(() => { - setPossiblePaths(possRoutes(pointCount)); - }, [pointCount]); - - const [num, exp] = possiblePaths.split("e+"); - - return ( - - - - - - - - - - - - - - - - Possible Paths:{" "} - - - {num} x 10{exp} - - - - - ); -}; diff --git a/src/components/MenuSolverControls.jsx b/src/components/MenuSolverControls.jsx index fa267ba..37fa237 100644 --- a/src/components/MenuSolverControls.jsx +++ b/src/components/MenuSolverControls.jsx @@ -30,20 +30,12 @@ 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); @@ -61,24 +53,11 @@ export const MenuSolverControls = ({ 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 ( <> diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index f942a27..31748af 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -20,7 +20,7 @@ export const Navbar = () => { const leftStyle = { display: 'flex', alignItems: 'center', - gap: '15px', // Increased spacing between the logo and text + gap: '15px', fontSize: '20px', fontWeight: 'bold', }; @@ -57,7 +57,7 @@ export const Navbar = () => { About e.target.style.textDecoration = 'underline'} onMouseOut={(e) => e.target.style.textDecoration = 'none'}> diff --git a/src/components/index.js b/src/components/index.js index 978efe7..799a595 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -4,10 +4,8 @@ export * from "./IntroductionModal"; export * from "./Layout"; export * from "./MapPlot"; export * from "./Menu"; -export * from "./MenuHeader"; export * from "./MenuItem"; export * from "./MenuMetrics"; -export * from "./MenuPointControls"; export * from "./MenuSection"; export * from "./MenuSolverControls"; export * from "../context/PreSetTheme"; diff --git a/src/pages/index.js b/src/pages/index.js index edcfe8f..94f0831 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -32,17 +32,8 @@ const IndexPage = () => { selectors.selectEvaluatingDetailLevel ); const points = useSelector(selectors.selectPoints); - const pointCount = useSelector(selectors.selectPointCount); - const definingPoints = useSelector(selectors.selectDefiningPoints); - const solver = useSolverWorker(dispatch, algorithm); - const onRandomizePoints = useCallback(() => { - if (!definingPoints) { - const bounds = mapRef.current.getBounds(); - dispatch(actions.randomizePoints(bounds, pointCount)); - } - }, [mapRef, dispatch, pointCount, definingPoints]); const start = useCallback(() => { dispatch(actions.startSolving(points, delay, evaluatingDetailLevel)); @@ -51,10 +42,6 @@ const IndexPage = () => { ); }, [solver, dispatch, delay, points, evaluatingDetailLevel]); - const fullSpeed = useCallback(() => { - dispatch(actions.goFullSpeed()); - solver.postMessage(actions.goFullSpeed()); - }, [solver, dispatch]); const pause = useCallback(() => { dispatch(actions.pause()); @@ -94,9 +81,7 @@ const IndexPage = () => { onStart={start} onPause={pause} onUnPause={unpause} - onFullSpeed={fullSpeed} onStop={stop} - onRandomizePoints={onRandomizePoints} />