done for now

Author: ProjectsByJackHe

react-frontend/.gitignore

@@ -0,0 +1,66 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+firebase-debug.log*
+firebase-debug.*.log*
+
+# Firebase cache
+.firebase/
+
+# Firebase config
+
+# Uncomment this if you'd like others to create their own Firebase project.
+# For a team working on the same Firebase project(s), it is recommended to leave
+# it commented so all members can deploy to the same project(s) in .firebaserc.
+# .firebaserc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env

react-frontend/src/App.tsx

@@ -6,7 +6,7 @@ import Visualizer from './components/visualizer'
 function App() {
   const [arrOfCalls, setArrOfCalls] = useState([]) 
   const [funcName, setFuncName] = useState("")
-  const [renderSpeed, setRenderSpeed] = useState(500) 
+  const [renderSpeed, setRenderSpeed] = useState(600) 
   const [isRunning, setIsRunning] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [jelly, setJelly] = useState(false)

react-frontend/src/components/controls.tsx

@@ -1,6 +1,6 @@
  /* eslint-disable */ 
 import React from "react";
-import { Button } from "@material-ui/core";
+import { Button, Slider } from "@material-ui/core";
 import Switch from '@material-ui/core/Switch';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import "./controls.css";
@@ -11,6 +11,10 @@ const Controls = (props: any) => {
     props.setJelly(!props.jelly)
   }
 
+  const onSlide = (e: any, newValue: number | number[]) => {
+    props.setRenderSpeed(newValue)
+  }
+
   return (
       <div className="ControlPanel">
         <Button
@@ -33,7 +37,6 @@ const Controls = (props: any) => {
           {" "}
           Instructions + Reset{" "}
         </Button>
-        
 
          <FormControlLabel
           style={{marginLeft: "10px", marginTop: "10px"}}
@@ -44,6 +47,15 @@ const Controls = (props: any) => {
           />}
           label="Jelly"
         />
+
+        <Slider
+          defaultValue={50}
+          aria-labelledby="discrete-slider-always"
+          step={1}
+          valueLabelDisplay="on"
+          onChange={onSlide}
+          min={10}
+        />
       </div>
   );
 };

react-frontend/src/components/placeholder.tsx

@@ -6,7 +6,7 @@ import Typography from "@material-ui/core/Typography";
 
 const useStyles = makeStyles({
   root: {
-    maxWidth: 593
+    maxWidth: 593,
   },
   bullet: {
     display: "inline-block",
@@ -25,7 +25,11 @@ export default function OutlinedCard() {
   const classes = useStyles();
 
   return (
-    <Card className={classes.root} variant="outlined" style={{marginLeft: "auto", marginRight: "auto", marginTop: "50px"}}>
+    <Card
+      className={classes.root}
+      variant="outlined"
+      style={{ marginLeft: "auto", marginRight: "auto", marginTop: "50px" }}
+    >
       <CardContent>
         <Typography variant="h4" component="h2">
           Instructions
@@ -68,7 +72,8 @@ export default function OutlinedCard() {
         >
           - If all goes well, you will see a nice recursive visualization of
           your function <br />
-          - Green node == initial call. Red node == recursive call. Blue node == base case. <br />
+          - Green node == initial call. Red node == recursive call. Blue node ==
+          base case. <br />
           - Turn 'Jelly' off for a static graph <br />- Click on any Node and
           view it's return value
         </Typography>
@@ -77,10 +82,10 @@ export default function OutlinedCard() {
         <iframe
           width="560"
           height="315"
-          src="https://www.youtube.com/embed/QwUZxCBtfLw"
+          src="https://www.youtube.com/embed/-7rJv-yiTzc"
+          frameBorder="0"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
           allowFullScreen
-          frameBorder = "0"
         ></iframe>
       </CardContent>
     </Card>

react-frontend/src/components/userinput.tsx

@@ -9,7 +9,7 @@ import {
 
 const UserInput = (props: any) => {
   const [submittedCode, setCode] = useState(
-    "# DO NOT include any 'print(...)' statements!"
+    "# DO NOT include any 'print(...)' statements! \n\ndef fib(x):\n    if x == 1 or x == 2:\n        return 1\n    return fib(x - 1) + fib(x - 2)\n\nfib(10)"
   );
 
   const runCode = async () => {
@@ -46,7 +46,7 @@ const UserInput = (props: any) => {
     try {
       // send HTTP request to flask server and store
       // response inside callTrace
-      const domain = "https://recursion0r94s8df984.herokuapp.com";
+      const domain = "<BACKEND URL REMOTE CODE RUNNER>";
 
       const options = `/execute?funcName=${functionName}&funcCall=${functionCall[0]}`;
       const fetchConfig = {
@@ -92,6 +92,7 @@ const UserInput = (props: any) => {
         setArrOfCalls={props.setArrOfCalls} 
         jelly={props.jelly}
         setJelly={props.setJelly}
+        setRenderSpeed={props.setRenderSpeed}
       />
     </Fragment>
   );

react-frontend/src/components/visualizer.js

@@ -12,7 +12,7 @@ const Visualizer = (props) => {
     */
    const funcName = props.name 
    const callTrace = props.callTrace
-   const ANIMATION_SPEED = props.renderSpeed; // milliseconds per interval
+   const ANIMATION_SPEED = 1100 - props.renderSpeed * 10; // milliseconds per interval
    const [graphState, setGraphState] = useState({
        nodes: [], 
        links: []

remote-code-runner/app.py

@@ -20,6 +20,8 @@ def execute():
         funcName = request.args['funcName'] 
         funcCall = request.args['funcCall']
         if funcName != funcCall[:len(funcName)]:
+            print(funcName)
+            print(funcCall[:len(funcName)] != funcName)
             return "Check and make sure you defined EXACTLY one function.", 400
         body = str(request.data)
         inputCode = pi.parseInput(body)

remote-code-runner/tryget.py

@@ -4,7 +4,7 @@
 import json 
 
 
-API_KEY = os.environ.get('API_KEY')
+API_KEY = os.environ.get('API_KEY') 
 
 def tryGet(token):
     time.sleep(10)