fixed physics force assignment to fields

2 files changed, 107 insertions, 123 deletions

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index 0f5bdf316..9d75944f4 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -102,26 +102,21 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         this.layoutDoc._height = 800;
         this.xMax = this.layoutDoc._width * 0.6;
         this.yMax = this.layoutDoc._height * 0.9;
-        this.dataDoc.componentForces = this.dataDoc.componentForces ?? [];
         this.dataDoc.simulation_gravity = NumCast(this.dataDoc.simulation_gravity, -9.81);
         this.dataDoc.mass1 = NumCast(this.dataDoc.mass1, 1);
         this.dataDoc.simulation_mode = 'Freeform';
         this.dataDoc.simulation_showComponentForces = this.dataDoc.simulation_showComponentForces ?? false;
         this.dataDoc.simulation_speed = NumCast(this.dataDoc.simulation_speed, 2);
         this.dataDoc.simulation_type = StrCast(this.dataDoc.simulation_type, 'Inclined Plane');
-        this.dataDoc.mass1_forcesStart = this.dataDoc.mass1_forcesStart ?? [];
         this.dataDoc.mass1_positionXstart = this.dataDoc.mass1_positionXstart ?? Math.round((this.xMax * 0.5 - 200) * 10) / 10;
         this.dataDoc.mass1_positionYstart = this.dataDoc.mass1_positionYstart ?? this.getDisplayYPos((400 - 0.08 * this.layoutDoc._height) * Math.tan((26 * Math.PI) / 180) + Math.sqrt(26));
-        this.dataDoc.mass1_forcesUpdated = this.dataDoc.mass1_forcesUpdated ?? [];
 
         // Used for review mode
         // this.dataDoc.currentForceSketch = this.dataDoc.currentForceSketch ?? null;
         // this.dataDoc.deleteMode = this.dataDoc.deleteMode ?? false;
         // this.dataDoc.forceSketches = this.dataDoc.forceSketches ?? [];
-        this.dataDoc.answers = new List<number>();
         this.dataDoc.questionPartOne = '';
         this.dataDoc.questionPartTwo = '';
-        this.dataDoc.selectedSolutions = [];
         this.dataDoc.selectedQuestion = this.dataDoc.selectedQuestion ?? questions.inclinePlane[0];
         // this.dataDoc.sketching = this.dataDoc.sketching ?? false;
 
@@ -182,33 +177,33 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.layoutDoc[HeightSym]();
                 this.dataDoc.mass1_positionY = this.getDisplayYPos(this.yMin + 0.08 * this.layoutDoc[HeightSym]());
                 this.dataDoc.mass1_positionX = (this.xMax + this.xMin) / 2 - 0.08 * this.layoutDoc[HeightSym]();
-                this.dataDoc.mass1_forcesUpdated = [
+                this.dataDoc.mass1_forcesUpdated = JSON.stringify([
                     {
                         description: 'Gravity',
                         magnitude: Math.abs(this.gravity) * NumCast(this.dataDoc.mass1),
                         directionInDegrees: 270,
                         component: false,
                     },
-                ];
-                this.dataDoc.mass1_forcesStart = [
+                ]);
+                this.dataDoc.mass1_forcesStart = JSON.stringify([
                     {
                         description: 'Gravity',
                         magnitude: Math.abs(this.gravity) * NumCast(this.dataDoc.mass1),
                         directionInDegrees: 270,
                         component: false,
                     },
-                ];
+                ]);
                 this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
             } else if (simulationType == 'Inclined Plane') {
                 this.changeWedgeBasedOnNewAngle(26);
-                this.dataDoc.mass1_forcesStart = [
+                this.dataDoc.mass1_forcesStart = JSON.stringify([
                     {
                         description: 'Gravity',
                         magnitude: Math.abs(this.gravity) * NumCast(this.dataDoc.mass1),
                         directionInDegrees: 270,
                         component: false,
                     },
-                ];
+                ]);
                 this.updateForcesWithFriction(NumCast(this.dataDoc.coefficientOfStaticFriction));
             } else if (simulationType == 'Pendulum') {
                 this.setupPendulum();
@@ -234,8 +229,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 this.setupSpring();
                 // TODO - spring review problems
             } else if (simulationType == 'Inclined Plane') {
-                this.dataDoc.mass1_forcesUpdated = [];
-                this.dataDoc.mass1_forcesStart = [];
+                this.dataDoc.mass1_forcesUpdated = '';
+                this.dataDoc.mass1_forcesStart = '';
             } else if (simulationType == 'Pendulum') {
                 this.setupPendulum();
                 // TODO - pendulum review problems
@@ -268,7 +263,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 this.dataDoc.mass1_positionYstart = this.yMax - 100;
                 this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.layoutDoc[HeightSym]();
                 this.dataDoc.tutorial = tutorials.freeWeight;
-                this.dataDoc.mass1_forcesStart = this.getForceFromJSON(tutorials.freeWeight.steps[0].forces);
+                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.freeWeight.steps[0].forces);
                 this.dataDoc.simulation_showForceMagnitudes = tutorials.freeWeight.steps[0].showMagnitude;
             } else if (this.dataDoc.simulation_type == 'Spring') {
                 this.dataDoc.simulation_showForces = true;
@@ -276,7 +271,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 this.dataDoc.mass1_positionYstart = this.yMin + 200 + 19.62;
                 this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.layoutDoc[HeightSym]();
                 this.dataDoc.tutorial = tutorials.spring;
-                this.dataDoc.mass1_forcesStart = this.getForceFromJSON(tutorials.spring.steps[0].forces);
+                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.spring.steps[0].forces);
                 this.dataDoc.simulation_showForceMagnitudes = tutorials.spring.steps[0].showMagnitude;
             } else if (this.dataDoc.simulation_type == 'Pendulum') {
                 this.dataDoc.simulation_showForces = true;
@@ -289,7 +284,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 this.dataDoc.mass1_positionXstart = xPos;
                 this.dataDoc.mass1_positionYstart = yPos;
                 this.dataDoc.tutorial = tutorials.pendulum;
-                this.dataDoc.mass1_forcesStart = this.getForceFromJSON(tutorials.pendulum.steps[0].forces);
+                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.pendulum.steps[0].forces);
                 this.dataDoc.simulation_showForceMagnitudes = tutorials.pendulum.steps[0].showMagnitude;
                 this.dataDoc.pendulum_angle = 30;
                 this.dataDoc.pendulum_length = 300;
@@ -300,25 +295,25 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 this.dataDoc.wedge_angle = 26;
                 this.changeWedgeBasedOnNewAngle(26);
                 this.dataDoc.tutorial = tutorials.inclinePlane;
-                this.dataDoc.mass1_forcesStart = this.getForceFromJSON(tutorials.inclinePlane.steps[0].forces);
+                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.inclinePlane.steps[0].forces);
                 this.dataDoc.simulation_showForceMagnitudes = tutorials.inclinePlane.steps[0].showMagnitude;
             } else if (this.dataDoc.simulation_type == 'Circular Motion') {
                 this.dataDoc.simulation_showForces = true;
                 this.setupCircular(40);
                 this.dataDoc.tutorial = tutorials.circular;
-                this.dataDoc.mass1_forcesStart = this.getForceFromJSON(tutorials.circular.steps[0].forces);
+                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.circular.steps[0].forces);
                 this.dataDoc.simulation_showForceMagnitudes = tutorials.circular.steps[0].showMagnitude;
             } else if (this.dataDoc.simulation_type == 'Pulley') {
                 this.dataDoc.simulation_showForces = true;
                 this.setupPulley();
                 this.dataDoc.tutorial = tutorials.pulley;
-                this.dataDoc.mass1_forcesStart = this.getForceFromJSON(tutorials.pulley.steps[0].forces);
+                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.pulley.steps[0].forces);
                 this.dataDoc.simulation_showForceMagnitudes = tutorials.pulley.steps[0].showMagnitude;
             } else if (this.dataDoc.simulation_type == 'Suspension') {
                 this.dataDoc.simulation_showForces = true;
                 this.setupSuspension();
                 this.dataDoc.tutorial = tutorials.suspension;
-                this.dataDoc.mass1_forcesStart = this.getForceFromJSON(tutorials.suspension.steps[0].forces);
+                this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.suspension.steps[0].forces);
                 this.dataDoc.simulation_showForceMagnitudes = tutorials.suspension.steps[0].showMagnitude;
             }
             this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
@@ -385,13 +380,13 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             component: false,
         };
         if (coefficient != 0) {
-            this.dataDoc.mass1_forcesStart = [gravityForce, normalForce, frictionForce];
-            this.dataDoc.mass1_forcesUpdated = [gravityForce, normalForce, frictionForce];
-            this.dataDoc.componentForces = [frictionForceComponent, normalForceComponent, gravityParallel, gravityPerpendicular];
+            this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce, normalForce, frictionForce]);
+            this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce, normalForce, frictionForce]);
+            this.dataDoc.mass1_componentForces = JSON.stringify([frictionForceComponent, normalForceComponent, gravityParallel, gravityPerpendicular]);
         } else {
-            this.dataDoc.mass1_forcesStart = [gravityForce, normalForce];
-            this.dataDoc.mass1_forcesUpdated = [gravityForce, normalForce];
-            this.dataDoc.componentForces = [normalForceComponent, gravityParallel, gravityPerpendicular];
+            this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce, normalForce]);
+            this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce, normalForce]);
+            this.dataDoc.mass1_componentForces = JSON.stringify([normalForceComponent, gravityParallel, gravityPerpendicular]);
         }
     };
 
@@ -661,8 +656,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             directionInDegrees: 90,
             component: false,
         };
-        this.dataDoc.mass1_forcesUpdated = [tensionForce];
-        this.dataDoc.mass1_forcesStart = [tensionForce];
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce]);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([tensionForce]);
         this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
     };
 
@@ -703,8 +698,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             component: true,
         };
 
-        this.dataDoc.componentForces = [tensionComponent, gravityParallel, gravityPerpendicular];
-        this.dataDoc.mass1_forcesUpdated = [
+        this.dataDoc.mass1_componentForces = JSON.stringify([tensionComponent, gravityParallel, gravityPerpendicular]);
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([
             {
                 description: 'Gravity',
                 magnitude: NumCast(this.dataDoc.mass1) * Math.abs(this.gravity),
@@ -712,8 +707,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 component: false,
             },
             forceOfTension,
-        ];
-        this.dataDoc.mass1_forcesStart = [
+        ]);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([
             {
                 description: 'Gravity',
                 magnitude: NumCast(this.dataDoc.mass1) * Math.abs(this.gravity),
@@ -721,7 +716,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 component: false,
             },
             forceOfTension,
-        ];
+        ]);
         this.dataDoc.pendulum_angleStart = 30;
         this.dataDoc.pendulum_angle = 30;
         this.dataDoc.pendulum_length = 300;
@@ -738,8 +733,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             directionInDegrees: 270,
             component: false,
         };
-        this.dataDoc.mass1_forcesUpdated = [gravityForce];
-        this.dataDoc.mass1_forcesStart = [gravityForce];
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce]);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce]);
         this.dataDoc.mass1_positionXstart = this.xMax / 2 - 0.08 * this.layoutDoc[HeightSym]();
         this.dataDoc.mass1_positionYstart = 200;
         this.dataDoc.spring_constant = 0.5;
@@ -775,8 +770,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             directionInDegrees: 270,
             component: false,
         };
-        this.dataDoc.mass1_forcesUpdated = [tensionForce1, tensionForce2, grav];
-        this.dataDoc.mass1_forcesStart = [tensionForce1, tensionForce2, grav];
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce1, tensionForce2, grav]);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([tensionForce1, tensionForce2, grav]);
         this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
     };
 
@@ -814,39 +809,21 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             component: false,
         };
 
-        this.dataDoc.mass1_forcesUpdated = [gravityForce1, tensionForce1];
-        this.dataDoc.mass1_forcesStart = [gravityForce1, tensionForce1];
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce1, tensionForce1]);
+        this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce1, tensionForce1]);
         this.dataDoc.mass2_positionYstart = (this.yMax + this.yMin) / 2;
         this.dataDoc.mass2_positionXstart = (this.xMin + this.xMax) / 2 + 5;
         this.dataDoc.mass2_positionY = this.getDisplayYPos((this.yMax + this.yMin) / 2);
         this.dataDoc.mass2_positionX = (this.xMin + this.xMax) / 2 + 5;
-        this.dataDoc.mass2_forcesUpdated = [gravityForce2, tensionForce2];
-        this.dataDoc.mass2_forcesStart = [gravityForce2, tensionForce2];
+        this.dataDoc.mass2_forcesUpdated = JSON.stringify([gravityForce2, tensionForce2]);
+        this.dataDoc.mass2_forcesStart = JSON.stringify([gravityForce2, tensionForce2]);
 
         this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
     };
 
-    // Helper function used for tutorial and review mode
-    getForceFromJSON = (
-        json: {
-            description: string;
-            magnitude: number;
-            directionInDegrees: number;
-            component: boolean;
-        }[]
-    ): IForce[] => {
-        const forces: IForce[] = [];
-        for (let i = 0; i < json.length; i++) {
-            const force: IForce = {
-                description: json[i].description,
-                magnitude: json[i].magnitude,
-                directionInDegrees: json[i].directionInDegrees,
-                component: json[i].component,
-            };
-            forces.push(force);
-        }
-        return forces;
-    };
+    public static parseJSON(json: string) {
+        return !json ? [] : (JSON.parse(json) as IForce[]);
+    }
 
     // Handle force change in review mode
     updateReviewModeValues = () => {
@@ -868,10 +845,21 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             directionInDegrees: NumCast(this.dataDoc.review_StaticAngle),
             component: false,
         };
-        this.dataDoc.mass1_forcesStart = [forceOfGravityReview, normalForceReview, staticFrictionForceReview];
-        this.dataDoc.mass1_forcesUpdated = [forceOfGravityReview, normalForceReview, staticFrictionForceReview];
+        this.dataDoc.mass1_forcesStart = JSON.stringify([forceOfGravityReview, normalForceReview, staticFrictionForceReview]);
+        this.dataDoc.mass1_forcesUpdated = JSON.stringify([forceOfGravityReview, normalForceReview, staticFrictionForceReview]);
     };
 
+    componentForces1 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass1_componentForces));
+    setComponentForces1 = (forces: IForce[]) => (this.dataDoc.mass1_componentForces = JSON.stringify(forces));
+    componentForces2 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass2_componentForces));
+    setComponentForces2 = (forces: IForce[]) => (this.dataDoc.mass2_componentForces = JSON.stringify(forces));
+    startForces1 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass1_forcesStart));
+    startForces2 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass2_forcesStart));
+    forcesUpdated1 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass1_forcesUpdated));
+    setForcesUpdated1 = (forces: IForce[]) => (this.dataDoc.mass1_forcesUpdated = JSON.stringify(forces));
+    forcesUpdated2 = () => PhysicsSimulationBox.parseJSON(StrCast(this.dataDoc.mass2_forcesUpdated));
+    setForcesUpdated2 = (forces: IForce[]) => (this.dataDoc.mass2_forcesUpdated = JSON.stringify(forces));
+
     render() {
         return (
             <div className="physicsSimApp">
@@ -900,7 +888,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                     adjustPendulumLength={NumCast(this.dataDoc.pendulum_length_adjust)}
                                     gravity={this.gravity}
                                     circularMotionRadius={this.circularMotionRadius}
-                                    componentForces={this.dataDoc.componentForces}
+                                    componentForces={this.componentForces1}
+                                    setComponentForces={this.setComponentForces1}
                                     showComponentForces={BoolCast(this.dataDoc.simulation_showComponentForces)}
                                     color={'red'}
                                     coefficientOfKineticFriction={NumCast(this.dataDoc.coefficientOfKineticFriction)}
@@ -925,15 +914,16 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                     springConstant={NumCast(this.dataDoc.spring_constant)}
                                     springStartLength={NumCast(this.dataDoc.spring_lengthStart)}
                                     springRestLength={NumCast(this.dataDoc.spring_lengthRest)}
-                                    startForces={this.dataDoc.mass1_forcesStart}
+                                    startForces={this.startForces1}
                                     startPosX={NumCast(this.dataDoc.mass1_positionXstart)}
                                     startPosY={NumCast(this.dataDoc.mass1_positionYstart)}
                                     startVelX={NumCast(this.dataDoc.mass1_velocityXstart)}
                                     startVelY={NumCast(this.dataDoc.mass1_velocityYstart)}
                                     timestepSize={0.05}
-                                    updateXmass={NumCast(this.dataDoc.mass1_xChange)}
-                                    updateYmass={NumCast(this.dataDoc.mass1_yChange)}
-                                    forcesUpdated={this.dataDoc.mass1_forcesUpdated}
+                                    updateXDisplay={NumCast(this.dataDoc.mass1_xChange)}
+                                    updateYDisplay={NumCast(this.dataDoc.mass1_yChange)}
+                                    forcesUpdated={this.forcesUpdated1}
+                                    setForcesUpdated={this.setForcesUpdated1}
                                     wedgeHeight={NumCast(this.dataDoc.wedge_height)}
                                     wedgeWidth={NumCast(this.dataDoc.wedge_width)}
                                     xMax={this.xMax}
@@ -950,7 +940,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                         adjustPendulumLength={NumCast(this.dataDoc.pendulum_length_adjust)}
                                         circularMotionRadius={this.circularMotionRadius}
                                         gravity={this.gravity}
-                                        componentForces={this.dataDoc.componentForces}
+                                        componentForces={this.componentForces2}
+                                        setComponentForces={this.setComponentForces2}
                                         showComponentForces={BoolCast(this.dataDoc.simulation_showComponentForces)}
                                         color={'blue'}
                                         coefficientOfKineticFriction={NumCast(this.dataDoc.coefficientOfKineticFriction)}
@@ -975,15 +966,16 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                         springConstant={NumCast(this.dataDoc.spring_constant)}
                                         springStartLength={NumCast(this.dataDoc.spring_lengthStart)}
                                         springRestLength={NumCast(this.dataDoc.spring_lengthRest)}
-                                        startForces={this.dataDoc.mass2_forcesStart}
+                                        startForces={this.startForces2}
                                         startPosX={NumCast(this.dataDoc.mass2_positionXstart)}
                                         startPosY={NumCast(this.dataDoc.mass2_positionYstart)}
-                                        startVelX={NumCast(this.dataDoc.mass1_velocityXstart)}
-                                        startVelY={NumCast(this.dataDoc.mass1_velocityYstart)}
+                                        startVelX={NumCast(this.dataDoc.mass2_velocityXstart)}
+                                        startVelY={NumCast(this.dataDoc.mass2_velocityYstart)}
                                         timestepSize={0.05}
-                                        updateXmass={NumCast(this.dataDoc.mass2_xChange)}
-                                        updateYmass={NumCast(this.dataDoc.mass2_yChange)}
-                                        forcesUpdated={this.dataDoc.mass2_forcesUpdated}
+                                        updateXDisplay={NumCast(this.dataDoc.mass2_xChange)}
+                                        updateYDisplay={NumCast(this.dataDoc.mass2_yChange)}
+                                        forcesUpdated={this.forcesUpdated2}
+                                        setForcesUpdated={this.setForcesUpdated2}
                                         wedgeHeight={NumCast(this.dataDoc.wedge_height)}
                                         wedgeWidth={NumCast(this.dataDoc.wedge_width)}
                                         xMax={this.xMax}
@@ -1270,8 +1262,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                             step = Math.max(step, 0);
                                             step = Math.min(step, this.dataDoc.tutorial.steps.length - 1);
                                             this.dataDoc.tutorial_stepNumber = step;
-                                            this.dataDoc.mass1_forcesStart = this.getForceFromJSON(this.dataDoc.tutorial.steps[step].forces);
-                                            this.dataDoc.mass1_forcesUpdated = this.getForceFromJSON(this.dataDoc.tutorial.steps[step].forces);
+                                            this.dataDoc.mass1_forcesStart = this.dataDoc.tutorial.steps[step].forces;
+                                            this.dataDoc.mass1_forcesUpdated = this.dataDoc.tutorial.steps[step].forces;
                                             this.dataDoc.simulation_showForceMagnitudes = this.dataDoc.tutorial.steps[step].show_Magnitude;
                                         }}
                                         disabled={this.dataDoc.tutorial_stepNumber == 0}>
@@ -1289,11 +1281,11 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                             step = Math.max(step, 0);
                                             step = Math.min(step, this.dataDoc.tutorial.steps.length - 1);
                                             this.dataDoc.tutorial_stepNumber = step;
-                                            this.dataDoc.mass1_forcesStart = this.getForceFromJSON(this.dataDoc.tutorial.steps[step].forces);
-                                            this.dataDoc.mass1_forcesUpdated = this.getForceFromJSON(this.dataDoc.tutorial.steps[step].forces);
+                                            this.dataDoc.mass1_forcesStart = this.dataDoc.tutorial.steps[step].forces;
+                                            this.dataDoc.mass1_forcesUpdated = this.dataDoc.tutorial.steps[step].forces;
                                             this.dataDoc.simulation_showForceMagnitudes = this.dataDoc.tutorial.steps[step].show_Magnitude;
                                         }}
-                                        disabled={this.dataDoc.tutorial_stepNumber == this.dataDoc.tutorial.steps.length - 1}>
+                                        disabled={this.dataDoc.tutorial_stepNumber === this.dataDoc.tutorial.steps.length - 1}>
                                         <ArrowRightIcon />
                                     </IconButton>
                                 </div>
@@ -1709,7 +1701,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                                     this.dataDoc.mass1_positionXstart = xPos;
                                                     this.dataDoc.mass1_positionYstart = yPos;
 
-                                                    this.dataDoc.mass1_forcesStart = [
+                                                    this.dataDoc.mass1_forcesStart = JSON.stringify([
                                                         {
                                                             description: 'Gravity',
                                                             magnitude: Math.abs(this.gravity) * NumCast(this.dataDoc.mass1),
@@ -1717,8 +1709,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                                             component: false,
                                                         },
                                                         forceOfTension,
-                                                    ];
-                                                    this.dataDoc.mass1_forcesUpdated = [
+                                                    ]);
+                                                    this.dataDoc.mass1_forcesUpdated = JSON.stringify([
                                                         {
                                                             description: 'Gravity',
                                                             magnitude: Math.abs(this.gravity) * NumCast(this.dataDoc.mass1),
@@ -1726,8 +1718,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                                             component: false,
                                                         },
                                                         forceOfTension,
-                                                    ];
-                                                    this.dataDoc.componentForces = [tensionComponent, gravityParallel, gravityPerpendicular];
+                                                    ]);
+                                                    this.dataDoc.mass1_componentForces = JSON.stringify([tensionComponent, gravityParallel, gravityPerpendicular]);
                                                     this.dataDoc.pendulum_angle_adjust = value;
                                                     this.dataDoc.pendulum_length_adjust = this.dataDoc.pendulum_length;
                                                     this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
index 1d980ebf4..94e101490 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -1,7 +1,6 @@
 import { Doc, HeightSym, WidthSym } from '../../../../fields/Doc';
 import React = require('react');
 import './PhysicsSimulationBox.scss';
-import { NumCast } from '../../../../fields/Types';
 import { computed } from 'mobx';
 
 interface IWallProps {
@@ -24,7 +23,8 @@ export interface IWeightProps {
     circularMotionRadius: number;
     coefficientOfKineticFriction: number;
     color: string;
-    componentForces: IForce[];
+    componentForces: () => IForce[];
+    setComponentForces: (x: IForce[]) => {};
     displayXVelocity: number;
     displayYVelocity: number;
     elasticCollisions: boolean;
@@ -47,7 +47,7 @@ export interface IWeightProps {
     springConstant: number;
     springRestLength: number;
     springStartLength: number;
-    startForces: IForce[];
+    startForces: () => IForce[];
     startPendulumAngle: number;
     startPosX: number;
     startPosY: number;
@@ -56,7 +56,8 @@ export interface IWeightProps {
     timestepSize: number;
     updateXDisplay: number;
     updateYDisplay: number;
-    forcesUpdated: IForce[];
+    forcesUpdated: () => IForce[];
+    setForcesUpdated: (x: IForce[]) => {};
     wallPositions: IWallProps[];
     wedgeHeight: number;
     wedgeWidth: number;
@@ -188,15 +189,15 @@ export default class Weight extends React.Component<IWeightProps, IState> {
         this.setYVelDisplay(yVel);
         this.setXVelDisplay(xVel);
         if (this.props.color == 'red') {
-            this.props.dataDoc.mass1_accelerationY = (-1 * Math.round(this.getNewAccelerationY(this.props.forcesUpdated) * 100)) / 100;
-            this.props.dataDoc.mass1_accelerationX = Math.round(this.getNewAccelerationX(this.props.forcesUpdated) * 100) / 100;
+            this.props.dataDoc.mass1_accelerationY = (-1 * Math.round(this.getNewAccelerationY(this.props.forcesUpdated()) * 100)) / 100;
+            this.props.dataDoc.mass1_accelerationX = Math.round(this.getNewAccelerationX(this.props.forcesUpdated()) * 100) / 100;
         } else {
-            this.props.dataDoc.mass2_accelerationY = (-1 * Math.round(this.getNewAccelerationY(this.props.forcesUpdated) * 100)) / 100;
-            this.props.dataDoc.mass2_accelerationX = Math.round(this.getNewAccelerationX(this.props.forcesUpdated) * 100) / 100;
+            this.props.dataDoc.mass2_accelerationY = (-1 * Math.round(this.getNewAccelerationY(this.props.forcesUpdated()) * 100)) / 100;
+            this.props.dataDoc.mass2_accelerationX = Math.round(this.getNewAccelerationX(this.props.forcesUpdated()) * 100) / 100;
         }
 
-        this.setState({ xAccel: Math.round(this.getNewAccelerationX(this.props.forcesUpdated) * 100) / 100 });
-        this.setState({ yAccel: (-1 * Math.round(this.getNewAccelerationY(this.props.forcesUpdated) * 100)) / 100 });
+        this.setState({ xAccel: Math.round(this.getNewAccelerationX(this.props.forcesUpdated()) * 100) / 100 });
+        this.setState({ yAccel: (-1 * Math.round(this.getNewAccelerationY(this.props.forcesUpdated()) * 100)) / 100 });
     };
 
     componentDidUpdate(prevProps: Readonly<IWeightProps>, prevState: Readonly<IState>, snapshot?: any): void {
@@ -265,13 +266,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
             }
         }
 
-        // Prevent bug when switching between sims
-        if (prevProps.startForces != this.props.startForces) {
-            this.setState({ xVelocity: this.props.startVelX });
-            this.setState({ yVelocity: this.props.startVelY });
-            this.setDisplayValues();
-        }
-
         // Make sure weight doesn't go above max height
         if ((prevState.updatedStartPosY != this.state.updatedStartPosY || prevProps.startVelY != this.props.startVelY) && !isNaN(this.state.updatedStartPosY) && !isNaN(this.props.startVelY)) {
             if (this.props.simulationType == 'One Weight') {
@@ -370,11 +364,11 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                     component: false,
                 };
                 if (this.props.coefficientOfKineticFriction != 0) {
-                    this.props.dataDoc.mass1_forcesUpdated = [gravityForce, normalForce, frictionForce];
-                    this.props.dataDoc.componentForces = [frictionForceComponent, normalForceComponent, gravityParallel, gravityPerpendicular];
+                    this.props.setForcesUpdated([gravityForce, normalForce, frictionForce]);
+                    this.props.setComponentForces([frictionForceComponent, normalForceComponent, gravityParallel, gravityPerpendicular]);
                 } else {
-                    this.props.dataDoc.mass1_forcesUpdated = [gravityForce, normalForce];
-                    this.props.dataDoc.componentForces = [normalForceComponent, gravityParallel, gravityPerpendicular];
+                    this.props.setForcesUpdated([gravityForce, normalForce]);
+                    this.props.setComponentForces([normalForceComponent, gravityParallel, gravityPerpendicular]);
                 }
             }
         }
@@ -444,8 +438,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
         this.setState({ xVelocity: this.props.startVelX });
         this.setState({ yVelocity: this.props.startVelY });
         this.props.dataDoc.pendulum_angle = this.props.startPendulumAngle;
-        this.props.dataDoc.mass1_forcesUpdated = this.props.dataDoc.mass1_forcesStart;
-        this.props.dataDoc.mass2_forcesUpdated = this.props.dataDoc.mass2_forcesStart;
+        this.props.setForcesUpdated(this.props.startForces());
         if (this.props.color == 'red') {
             this.props.dataDoc.mass1_positionX = this.state.updatedStartPosX;
             this.props.dataDoc.mass1_positionY = this.state.updatedStartPosY;
@@ -634,7 +627,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                                     directionInDegrees: wall.angleInDegrees + 90,
                                     component: false,
                                 };
-                                this.props.dataDoc.mass1_forcesUpdated = [forceOfGravity, normalForce];
+                                this.props.setForcesUpdated([forceOfGravity, normalForce]);
                                 if (this.props.simulationType == 'Inclined Plane') {
                                     const forceOfGravityC: IForce = {
                                         description: 'Gravity',
@@ -648,7 +641,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                                         directionInDegrees: wall.angleInDegrees + 90,
                                         component: true,
                                     };
-                                    this.props.dataDoc.componentForces = [forceOfGravityC, normalForceC];
+                                    this.props.setComponentForces([forceOfGravityC, normalForceC]);
                                 }
                             }
                         }
@@ -684,7 +677,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
         const newYVel = currentYVel + deltaYVel * dt;
         const newDeltaXPos = newXVel;
         const newDeltaYPos = newYVel;
-        let forces = this.props.forcesUpdated;
+        let forces = this.props.forcesUpdated();
         if (this.props.simulationType == 'Pendulum') {
             forces = this.getNewPendulumForces(newXPos, newYPos, newXVel, newYVel);
         } else if (this.props.simulationType == 'Spring') {
@@ -714,7 +707,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
         let yPos = this.state.yPosition;
         let xVel = this.state.xVelocity;
         let yVel = this.state.yVelocity;
-        let forces: IForce[] = this.props.dataDoc.mass1_forcesUpdated;
+        let forces = this.props.forcesUpdated();
         if (this.props.simulationType == 'Pendulum') {
             forces = this.getNewPendulumForces(xPos, yPos, xVel, yVel);
         } else if (this.props.simulationType == 'Spring') {
@@ -772,7 +765,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
         this.setState({ yVelocity: yVel });
         this.setState({ xPosition: xPos });
         this.setState({ yPosition: yPos });
-        let forcesn = this.props.dataDoc.mass1_forcesUpdated;
+        let forcesn = this.props.forcesUpdated();
         if (this.props.simulationType == 'Pendulum') {
             forcesn = this.getNewPendulumForces(xPos, yPos, xVel, yVel);
         } else if (this.props.simulationType == 'Spring') {
@@ -780,7 +773,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
         } else if (this.props.simulationType == 'Circular Motion') {
             forcesn = this.getNewCircularMotionForces(xPos, yPos);
         }
-        this.props.dataDoc.mass1_forcesUpdated = forcesn;
+        this.props.setForcesUpdated(forcesn);
 
         // set component forces if they change
         if (this.props.simulationType == 'Pendulum') {
@@ -821,7 +814,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                 gravityPerpendicular.magnitude = Math.abs(Math.abs(this.props.gravity) * Math.sin(((90 - angle) * Math.PI) / 180));
                 gravityPerpendicular.directionInDegrees = 180 - (90 - angle);
             }
-            this.props.dataDoc.componentForces = [tensionComponent, gravityParallel, gravityPerpendicular];
+            this.props.setComponentForces([tensionComponent, gravityParallel, gravityPerpendicular]);
         }
     };
 
@@ -931,7 +924,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                                     directionInDegrees: 270,
                                     component: false,
                                 };
-                                this.props.dataDoc.mass1_forcesUpdated = [tensionForce1, tensionForce2, grav];
+                                this.props.setForcesUpdated([tensionForce1, tensionForce2, grav]);
                             }
                         }
                     }}>
@@ -1115,7 +1108,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                                         top: 30 + 'px',
                                         backgroundColor: this.labelBackgroundColor,
                                     }}>
-                                    {Math.round(this.props.pendulum_angle * 100) / 100}°
+                                    {Math.round(this.props.pendulumAngle * 100) / 100}°
                                 </p>
                             </div>
                         )}
@@ -1157,8 +1150,8 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                                 <line
                                     x1={this.state.xPosition + this.props.radius}
                                     y1={this.state.yPosition + this.props.radius}
-                                    x2={this.state.xPosition + this.props.radius + this.getNewAccelerationX(this.props.forcesUpdated) * 15}
-                                    y2={this.state.yPosition + this.props.radius + this.getNewAccelerationY(this.props.forcesUpdated) * 15}
+                                    x2={this.state.xPosition + this.props.radius + this.getNewAccelerationX(this.props.forcesUpdated()) * 15}
+                                    y2={this.state.yPosition + this.props.radius + this.getNewAccelerationY(this.props.forcesUpdated()) * 15}
                                     stroke={'green'}
                                     strokeWidth="5"
                                     markerEnd="url(#accArrow)"
@@ -1220,7 +1213,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                 )}
                 {!this.state.dragging &&
                     this.props.showComponentForces &&
-                    this.props.componentForces.map((force, index) => {
+                    this.props.componentForces().map((force, index) => {
                         if (force.magnitude < this.epsilon) {
                             return;
                         }
@@ -1285,8 +1278,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                     })}
                 {!this.state.dragging &&
                     this.props.showForces &&
-                    this.props.forcesUpdated &&
-                    this.props.forcesUpdated.map((force, index) => {
+                    this.props.forcesUpdated().map((force, index) => {
                         if (force.magnitude < this.epsilon) {
                             return;
                         }