more phys code streamlining

3 files changed, 117 insertions, 308 deletions

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss
index b498296bf..2e6ad413f 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.scss
@@ -22,6 +22,12 @@
                 justify-content: space-between;
             }
         }
+        .rod {
+            pointer-events: none;
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
     }
 
     .coordinateSystem {
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index a0b47f13f..d3e1c6fd2 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -6,7 +6,7 @@ import QuestionMarkIcon from '@mui/icons-material/QuestionMark';
 import ReplayIcon from '@mui/icons-material/Replay';
 import { Box, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControl, FormControlLabel, FormGroup, IconButton, LinearProgress, Stack } from '@mui/material';
 import Typography from '@mui/material/Typography';
-import { computed, reaction } from 'mobx';
+import { computed, IReactionDisposer, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { NumListCast } from '../../../../fields/Doc';
 import { List } from '../../../../fields/List';
@@ -31,7 +31,6 @@ interface IForce {
     description: string;
     magnitude: number;
     directionInDegrees: number;
-    component: boolean;
 }
 interface VectorTemplate {
     top: number;
@@ -76,20 +75,23 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         return FieldView.LayoutString(PhysicsSimulationBox, fieldKey);
     }
 
+    _widthDisposer: IReactionDisposer | undefined;
+
+    // semi-Constants
+    xMin = 0;
+    yMin = 0;
+    xMax = this.props.PanelWidth() * 0.6;
+    yMax = this.props.PanelHeight();
+    color = `rgba(0,0,0,0.5)`;
+    radius = 50;
+    wallPositions: IWallProps[] = [];
+
     @computed get circularMotionRadius() {
         return NumCast(this.dataDoc.circularMotionRadius, 150);
     }
     @computed get gravity() {
         return NumCast(this.dataDoc.simulation_gravity, -9.81);
     }
-    gravityForce = (mass: number): IForce => {
-        return {
-            description: 'Gravity',
-            magnitude: mass * Math.abs(this.gravity),
-            directionInDegrees: 270,
-            component: false,
-        };
-    };
     @computed get simulationType() {
         return StrCast(this.dataDoc.simulation_type, 'Inclined Plane');
     }
@@ -138,13 +140,13 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
     }
 
     @computed get mass1Radius() {
-        return NumCast(this.dataDoc.mass1_radius, 60);
+        return NumCast(this.dataDoc.mass1_radius, 30);
     }
     @computed get mass1PosXStart() {
-        return NumCast(this.dataDoc.mass1_positionXstart, Math.round((this.xMax * 0.5 - 200) * 10) / 10);
+        return NumCast(this.dataDoc.mass1_positionXstart);
     }
     @computed get mass1PosYStart() {
-        return NumCast(this.dataDoc.mass1_positionYstart, this.getDisplayYPos((400 - 0.08 * this.props.PanelHeight()) * Math.tan((26 * Math.PI) / 180) + Math.sqrt(26)));
+        return NumCast(this.dataDoc.mass1_positionYstart);
     }
     @computed get mass1VelXStart() {
         return NumCast(this.dataDoc.mass1_velocityXstart);
@@ -157,7 +159,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         return NumCast(this.dataDoc.mass2_positionXstart);
     }
     @computed get mass2PosYStart() {
-        return NumCast(this.dataDoc.mass2_positionYstart, this.getDisplayYPos((400 - 0.08 * this.props.PanelHeight()) * Math.tan((26 * Math.PI) / 180) + Math.sqrt(26)));
+        return NumCast(this.dataDoc.mass2_positionYstart);
     }
     @computed get mass2VelXStart() {
         return NumCast(this.dataDoc.mass2_velocityXstart);
@@ -182,18 +184,13 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         return StrCast(this.dataDoc.questionPartTwo);
     }
 
-    // Constants
-    xMin = 0;
-    yMin = 0;
-    xMax = this.props.PanelWidth() * 0.6;
-    yMax = this.props.PanelHeight();
-    color = `rgba(0,0,0,0.5)`;
-    radius = 50;
-    wallPositions: IWallProps[] = [];
+    componentWillUnmount() {
+        this._widthDisposer?.();
+    }
 
     componentDidMount() {
         // Setup and update simulation
-        reaction(() => [this.props.PanelWidth(), this.props.PanelHeight()], this.setupSimulation, { fireImmediately: true });
+        this._widthDisposer = reaction(() => [this.props.PanelWidth(), this.props.PanelHeight()], this.setupSimulation, { fireImmediately: true });
 
         // Create walls
         this.wallPositions = [
@@ -212,6 +209,12 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         }
     }
 
+    gravityForce = (mass: number): IForce => ({
+        description: 'Gravity',
+        magnitude: mass * Math.abs(this.gravity),
+        directionInDegrees: 270,
+    });
+
     setupSimulation = () => {
         const simulationType = this.simulationType;
         const mode = this.simulationMode;
@@ -228,10 +231,10 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             switch (simulationType) {
                 case 'One Weight': 
                     this.dataDoc.simulation_showComponentForces = false;
-                    this.dataDoc.mass1_positionYstart = this.yMin + 0.08 * this.props.PanelHeight();
-                    this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
-                    this.dataDoc.mass1_positionY = this.getDisplayYPos(this.yMin + 0.08 * this.props.PanelHeight());
-                    this.dataDoc.mass1_positionX = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
+                    this.dataDoc.mass1_positionYstart = this.yMin + this.mass1Radius;
+                    this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - this.mass1Radius;
+                    this.dataDoc.mass1_positionY = this.getDisplayYPos(this.yMin + this.mass1Radius);
+                    this.dataDoc.mass1_positionX = (this.xMax + this.xMin) / 2 - this.mass1Radius;
                     this.dataDoc.mass1_forcesUpdated = JSON.stringify([this.gravityForce(this.mass1)]);
                     this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1)]);
                     this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
@@ -256,10 +259,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             switch (simulationType) {
                 case 'One Weight' : break;// TODO - one weight review problems
                 case 'Spring':  this.setupSpring(); break; // TODO - spring review problems
-                case 'Inclined Plane': 
-                    this.dataDoc.mass1_forcesUpdated = '';
-                    this.dataDoc.mass1_forcesStart = '';
-                    break;
+                case 'Inclined Plane': this.dataDoc.mass1_forcesUpdated =  this.dataDoc.mass1_forcesStart = ''; break;
                 case 'Pendulum':  this.setupPendulum(); break;  // TODO - pendulum review problems
                 case 'Circular Motion':  this.setupCircular(0); break;  // TODO - circular motion review problems
                 case 'Pulley':  this.setupPulley(); break; // TODO - pulley tutorial review problems
@@ -283,7 +283,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                 case 'One Weight':
                     this.dataDoc.simulation_showForces = true;
                     this.dataDoc.mass1_positionYstart = this.yMax - 100;
-                    this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
+                    this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - this.mass1Radius;
                     this.dataDoc.tutorial = JSON.stringify(tutorials.freeWeight);
                     this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.freeWeight.steps[0].forces);
                     this.dataDoc.simulation_showForceMagnitudes = tutorials.freeWeight.steps[0].showMagnitude;
@@ -292,7 +292,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                     this.dataDoc.simulation_showForces = true;
                     this.setupSpring();
                     this.dataDoc.mass1_positionYstart = this.yMin + 200 + 19.62;
-                    this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
+                    this.dataDoc.mass1_positionXstart = (this.xMax + this.xMin) / 2 - this.mass1Radius;
                     this.dataDoc.tutorial = JSON.stringify(tutorials.spring);
                     this.dataDoc.mass1_forcesStart = JSON.stringify(tutorials.spring.steps[0].forces);
                     this.dataDoc.simulation_showForceMagnitudes = tutorials.spring.steps[0].showMagnitude;
@@ -338,12 +338,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
     };
 
     // Helper function to go between display and real values
-    getDisplayYPos = (yPos: number) => {
-        return this.yMax - yPos - 2 * (0.08 * this.props.PanelHeight()) + 5;
-    };
-    getYPosFromDisplay = (yDisplay: number) => {
-        return this.yMax - yDisplay - 2 * (0.08 * this.props.PanelHeight()) + 5;
-    };
+    getDisplayYPos = (yPos: number) => this.yMax - yPos - 2 * this.mass1Radius + 5;
+    getYPosFromDisplay = (yDisplay: number) => this.yMax - yDisplay - 2 * this.mass1Radius + 5;
 
     // Update forces when coefficient of static friction changes in freeform mode
     updateForcesWithFriction = (coefficient: number, width = this.wedgeWidth, height = this.wedgeHeight) => {
@@ -351,13 +347,11 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             description: 'Normal Force',
             magnitude: Math.abs(this.gravity) * Math.cos(Math.atan(height / width)) * this.mass1,
             directionInDegrees: 180 - 90 - (Math.atan(height / width) * 180) / Math.PI,
-            component: false,
         };
         let frictionForce: IForce = {
             description: 'Static Friction Force',
             magnitude: coefficient * Math.abs(this.gravity) * Math.cos(Math.atan(height / width)) * this.mass1,
             directionInDegrees: 180 - (Math.atan(height / width) * 180) / Math.PI,
-            component: false,
         };
         // reduce magnitude or friction force if necessary such that block cannot slide up plane
         let yForce = -Math.abs(this.gravity) * this.mass1;
@@ -366,35 +360,27 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         if (yForce > 0) {
             frictionForce.magnitude = (-normalForce.magnitude * Math.sin((normalForce.directionInDegrees * Math.PI) / 180) + Math.abs(this.gravity) * this.mass1) / Math.sin((frictionForce.directionInDegrees * Math.PI) / 180);
         }
-        const frictionForceComponent: IForce = {
-            description: 'Static Friction Force',
-            magnitude: coefficient * Math.abs(this.gravity) * Math.cos(Math.atan(height / width)),
-            directionInDegrees: 180 - (Math.atan(height / width) * 180) / Math.PI,
-            component: true,
-        };
+
         const normalForceComponent: IForce = {
             description: 'Normal Force',
-            magnitude: Math.abs(this.gravity) * Math.cos(Math.atan(height / width)),
+            magnitude: this.mass1 * Math.abs(this.gravity) * Math.cos(Math.atan(height / width)),
             directionInDegrees: 180 - 90 - (Math.atan(height / width) * 180) / Math.PI,
-            component: true,
         };
         const gravityParallel: IForce = {
             description: 'Gravity Parallel Component',
             magnitude: this.mass1 * Math.abs(this.gravity) * Math.sin(Math.PI / 2 - Math.atan(height / width)),
             directionInDegrees: 180 - 90 - (Math.atan(height / width) * 180) / Math.PI + 180,
-            component: true,
         };
         const gravityPerpendicular: IForce = {
             description: 'Gravity Perpendicular Component',
             magnitude: this.mass1 * Math.abs(this.gravity) * Math.cos(Math.PI / 2 - Math.atan(height / width)),
             directionInDegrees: 360 - (Math.atan(height / width) * 180) / Math.PI,
-            component: true,
         };
         const gravityForce = this.gravityForce(this.mass1);
         if (coefficient != 0) {
             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]);
+            this.dataDoc.mass1_componentForces = JSON.stringify([frictionForce, normalForceComponent, gravityParallel, gravityPerpendicular]);
         } else {
             this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce, normalForce]);
             this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce, normalForce]);
@@ -549,24 +535,11 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             }
         }
         if (showAlert) {
-            if (!error) {
-                this.dataDoc.simulation_paused = false;
-                setTimeout(() => {
-                    this.dataDoc.simulation_paused = true;
-                }, 3000);
-            } else {
-                this.dataDoc.simulation_paused = false;
-                setTimeout(() => {
-                    this.dataDoc.simulation_paused = true;
-                }, 3000);
-            }
+            this.dataDoc.simulation_paused = false;
+            setTimeout(() => (this.dataDoc.simulation_paused = true), 3000);
         }
         if (this.selectedQuestion.goal == 'noMovement') {
-            if (!error) {
-                this.dataDoc.noMovement = true;
-            } else {
-                this.dataDoc.roMovement = false;
-            }
+            this.dataDoc.noMovement = !error;
         }
     };
 
@@ -590,11 +563,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         let question: QuestionTemplate = questions.inclinePlane[0];
 
         if (this.simulationType === 'Inclined Plane') {
-            if (this.dataDoc.questionNumber === questions.inclinePlane.length - 1) {
-                this.dataDoc.questionNumber = 0;
-            } else {
-                this.dataDoc.questionNumber = NumCast(this.dataDoc.questionNumber) + 1;
-            }
+            this.dataDoc.questionNumber = (NumCast(this.dataDoc.questionNumber) + 1) % questions.inclinePlane.length;
             question = questions.inclinePlane[NumCast(this.dataDoc.questionNumber)];
 
             let coefficient = 0;
@@ -639,15 +608,14 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         this.dataDoc.simulation_showComponentForces = false;
         this.dataDoc.mass1_velocityYstart = 0;
         this.dataDoc.mass1_velocityXstart = value;
-        let xPos = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
-        let yPos = (this.yMax + this.yMin) / 2 + this.circularMotionRadius - 0.08 * this.props.PanelHeight();
+        let xPos = (this.xMax + this.xMin) / 2 - this.mass1Radius;
+        let yPos = (this.yMax + this.yMin) / 2 + this.circularMotionRadius - this.mass1Radius;
         this.dataDoc.mass1_positionYstart = yPos;
         this.dataDoc.mass1_positionXstart = xPos;
         const tensionForce: IForce = {
             description: 'Centripetal Force',
             magnitude: (this.dataDoc.mass1_velocityXstart ** 2 * this.mass1) / this.circularMotionRadius,
             directionInDegrees: 90,
-            component: false,
         };
         this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce]);
         this.dataDoc.mass1_forcesStart = JSON.stringify([tensionForce]);
@@ -666,38 +634,27 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         const angle = 30;
         const x = length * Math.cos(((90 - angle) * Math.PI) / 180);
         const y = length * Math.sin(((90 - angle) * Math.PI) / 180);
-        const xPos = this.xMax / 2 - x - 0.08 * this.props.PanelHeight();
-        const yPos = y - 0.08 * this.props.PanelHeight() - 5;
+        const xPos = this.xMax / 2 - x - this.mass1Radius;
+        const yPos = y - this.mass1Radius - 5;
         this.dataDoc.mass1_positionXstart = xPos;
         this.dataDoc.mass1_positionYstart = yPos;
-        const mag = this.mass1 * Math.abs(this.gravity) * Math.sin((60 * Math.PI) / 180);
         const forceOfTension: IForce = {
             description: 'Tension',
-            magnitude: mag,
-            directionInDegrees: 90 - angle,
-            component: false,
-        };
-
-        const tensionComponent: IForce = {
-            description: 'Tension',
-            magnitude: mag,
+            magnitude: this.mass1 * Math.abs(this.gravity) * Math.sin((60 * Math.PI) / 180),
             directionInDegrees: 90 - angle,
-            component: true,
         };
         const gravityParallel: IForce = {
             description: 'Gravity Parallel Component',
             magnitude: this.mass1 * Math.abs(this.gravity) * Math.sin(((90 - angle) * Math.PI) / 180),
             directionInDegrees: -angle - 90,
-            component: true,
         };
         const gravityPerpendicular: IForce = {
             description: 'Gravity Perpendicular Component',
             magnitude: this.mass1 * Math.abs(this.gravity) * Math.cos(((90 - angle) * Math.PI) / 180),
             directionInDegrees: -angle,
-            component: true,
         };
 
-        this.dataDoc.mass1_componentForces = JSON.stringify([tensionComponent, gravityParallel, gravityPerpendicular]);
+        this.dataDoc.mass1_componentForces = JSON.stringify([forceOfTension, gravityParallel, gravityPerpendicular]);
         this.dataDoc.mass1_forcesUpdated = JSON.stringify([this.gravityForce(this.mass1)]);
         this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1), forceOfTension]);
         this.dataDoc.pendulum_angle = this.dataDoc.pendulum_angleStart = 30;
@@ -709,7 +666,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         this.dataDoc.simulation_showComponentForces = false;
         this.dataDoc.mass1_forcesUpdated = JSON.stringify([this.gravityForce(this.mass1)]);
         this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1)]);
-        this.dataDoc.mass1_positionXstart = this.xMax / 2 - 0.08 * this.props.PanelHeight();
+        this.dataDoc.mass1_positionXstart = this.xMax / 2 - this.mass1Radius;
         this.dataDoc.mass1_positionYstart = 200;
         this.dataDoc.spring_constant = 0.5;
         this.dataDoc.spring_lengthRest = 200;
@@ -719,7 +676,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
 
     // Default setup for suspension simulation
     setupSuspension = () => {
-        let xPos = (this.xMax + this.xMin) / 2 - 0.08 * this.props.PanelHeight();
+        let xPos = (this.xMax + this.xMin) / 2 - this.mass1Radius;
         let yPos = this.yMin + 200;
         this.dataDoc.mass1_positionYstart = yPos;
         this.dataDoc.mass1_positionXstart = xPos;
@@ -730,13 +687,11 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             description: 'Tension',
             magnitude: tensionMag,
             directionInDegrees: 45,
-            component: false,
         };
         const tensionForce2: IForce = {
             description: 'Tension',
             magnitude: tensionMag,
             directionInDegrees: 135,
-            component: false,
         };
         const gravity = this.gravityForce(this.mass1);
         this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce1, tensionForce2, gravity]);
@@ -757,7 +712,6 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             description: 'Tension',
             magnitude: this.mass1 * a + this.mass1 * Math.abs(this.gravity),
             directionInDegrees: 90,
-            component: false,
         };
         this.dataDoc.mass1_forcesUpdated = JSON.stringify([gravityForce1, tensionForce1]);
         this.dataDoc.mass1_forcesStart = JSON.stringify([gravityForce1, tensionForce1]);
@@ -767,7 +721,6 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             description: 'Tension',
             magnitude: -this.mass2 * a + this.mass2 * Math.abs(this.gravity),
             directionInDegrees: 90,
-            component: false,
         };
         this.dataDoc.mass2_positionYstart = (this.yMax + this.yMin) / 2;
         this.dataDoc.mass2_positionXstart = (this.xMin + this.xMax) / 2 + 5;
@@ -789,19 +742,16 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
             description: 'Gravity',
             magnitude: NumCast(this.dataDoc.review_GravityMagnitude),
             directionInDegrees: NumCast(this.dataDoc.review_GravityAngle),
-            component: false,
         };
         const normalForceReview: IForce = {
             description: 'Normal Force',
             magnitude: NumCast(this.dataDoc.review_NormalMagnitude),
             directionInDegrees: NumCast(this.dataDoc.review_NormalAngle),
-            component: false,
         };
         const staticFrictionForceReview: IForce = {
             description: 'Static Friction Force',
             magnitude: NumCast(this.dataDoc.review_StaticMagnitude),
             directionInDegrees: NumCast(this.dataDoc.review_StaticAngle),
-            component: false,
         };
         this.dataDoc.mass1_forcesStart = JSON.stringify([forceOfGravityReview, normalForceReview, staticFrictionForceReview]);
         this.dataDoc.mass1_forcesUpdated = JSON.stringify([forceOfGravityReview, normalForceReview, staticFrictionForceReview]);
@@ -1378,7 +1328,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                         />
                                         {(this.simulationType == 'Inclined Plane' || this.simulationType == 'Pendulum') && (
                                             <FormControlLabel
-                                                control={<Checkbox checked={BoolCast(this.dataDoc.simulation_showForces)} onChange={() => (this.dataDoc.simulation_showComponentForces = !this.dataDoc.simulation_showComponentForces)} />}
+                                                control={<Checkbox checked={BoolCast(this.dataDoc.simulation_showComponentForces)} onChange={() => (this.dataDoc.simulation_showComponentForces = !this.dataDoc.simulation_showComponentForces)} />}
                                                 label="Show component force vectors"
                                                 labelPlacement="start"
                                             />
@@ -1616,26 +1566,16 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                                         description: 'Tension',
                                                         magnitude: mag,
                                                         directionInDegrees: 90 - value,
-                                                        component: false,
-                                                    };
-
-                                                    const tensionComponent: IForce = {
-                                                        description: 'Tension',
-                                                        magnitude: mag,
-                                                        directionInDegrees: 90 - value,
-                                                        component: true,
                                                     };
                                                     const gravityParallel: IForce = {
                                                         description: 'Gravity Parallel Component',
                                                         magnitude: Math.abs(this.gravity) * Math.cos((value * Math.PI) / 180),
                                                         directionInDegrees: 270 - value,
-                                                        component: true,
                                                     };
                                                     const gravityPerpendicular: IForce = {
                                                         description: 'Gravity Perpendicular Component',
                                                         magnitude: Math.abs(this.gravity) * Math.sin((value * Math.PI) / 180),
                                                         directionInDegrees: -value,
-                                                        component: true,
                                                     };
 
                                                     const length = this.pendulumLength;
@@ -1648,7 +1588,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
 
                                                     this.dataDoc.mass1_forcesStart = JSON.stringify([this.gravityForce(this.mass1), forceOfTension]);
                                                     this.dataDoc.mass1_forcesUpdated = JSON.stringify([this.gravityForce(this.mass1), forceOfTension]);
-                                                    this.dataDoc.mass1_componentForces = JSON.stringify([tensionComponent, gravityParallel, gravityPerpendicular]);
+                                                    this.dataDoc.mass1_componentForces = JSON.stringify([forceOfTension, gravityParallel, gravityPerpendicular]);
                                                     this.dataDoc.simulation_reset = !this.dataDoc.simulation_reset;
                                                 }
                                             }}
@@ -1736,13 +1676,11 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                                                     description: 'Tension',
                                                                     magnitude: tensionMag1,
                                                                     directionInDegrees: dir1T,
-                                                                    component: false,
                                                                 };
                                                                 const tensionForce2: IForce = {
                                                                     description: 'Tension',
                                                                     magnitude: tensionMag2,
                                                                     directionInDegrees: dir2T,
-                                                                    component: false,
                                                                 };
                                                                 const gravity = this.gravityForce(this.mass1);
                                                                 this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce1, tensionForce2, gravity]);
@@ -1787,13 +1725,11 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                                                     description: 'Tension',
                                                                     magnitude: tensionMag1,
                                                                     directionInDegrees: dir1T,
-                                                                    component: false,
                                                                 };
                                                                 const tensionForce2: IForce = {
                                                                     description: 'Tension',
                                                                     magnitude: tensionMag2,
                                                                     directionInDegrees: dir2T,
-                                                                    component: false,
                                                                 };
                                                                 const gravity = this.gravityForce(this.mass1);
                                                                 this.dataDoc.mass1_forcesUpdated = JSON.stringify([tensionForce1, tensionForce2, gravity]);
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
index d062cc8c5..98b0e3f04 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -14,7 +14,6 @@ interface IForce {
     description: string;
     magnitude: number;
     directionInDegrees: number;
-    component: boolean;
 }
 export interface IWeightProps {
     pause: () => void;
@@ -250,13 +249,11 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                     description: 'Normal Force',
                     magnitude: this.props.mass * Math.abs(this.props.gravity) * Math.cos(Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
                     directionInDegrees: 180 - 90 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI,
-                    component: false,
                 };
                 const frictionForce: IForce = {
                     description: 'Kinetic Friction Force',
                     magnitude: this.props.mass * this.props.coefficientOfKineticFriction * Math.abs(this.props.gravity) * Math.cos(Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
                     directionInDegrees: 180 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI,
-                    component: false,
                 };
                 // reduce magnitude of friction force if necessary such that block cannot slide up plane
                 // prettier-ignore
@@ -271,31 +268,26 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                     description: 'Kinetic Friction Force',
                     magnitude: this.props.mass * this.props.coefficientOfKineticFriction * Math.abs(this.props.gravity) * Math.cos(Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
                     directionInDegrees: 180 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI,
-                    component: true,
                 };
                 const normalForceComponent: IForce = {
                     description: 'Normal Force',
                     magnitude: this.props.mass * Math.abs(this.props.gravity) * Math.cos(Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
                     directionInDegrees: 180 - 90 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI,
-                    component: true,
                 };
                 const gravityParallel: IForce = {
                     description: 'Gravity Parallel Component',
                     magnitude: this.props.mass * Math.abs(this.props.gravity) * Math.sin(Math.PI / 2 - Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
                     directionInDegrees: 180 - 90 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI + 180,
-                    component: true,
                 };
                 const gravityPerpendicular: IForce = {
                     description: 'Gravity Perpendicular Component',
                     magnitude: this.props.mass * Math.abs(this.props.gravity) * Math.cos(Math.PI / 2 - Math.atan(this.props.wedgeHeight / this.props.wedgeWidth)),
                     directionInDegrees: 360 - (Math.atan(this.props.wedgeHeight / this.props.wedgeWidth) * 180) / Math.PI,
-                    component: true,
                 };
                 const gravityForce: IForce = {
                     description: 'Gravity',
                     magnitude: this.props.mass * Math.abs(this.props.gravity),
                     directionInDegrees: 270,
-                    component: false,
                 };
                 const kineticFriction = this.props.coefficientOfKineticFriction != 0;
                 this.props.setForcesUpdated([gravityForce, normalForce, ...(kineticFriction ? [frictionForce] : [])]);
@@ -394,7 +386,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                 description: 'Centripetal Force',
                 magnitude: (this.props.startVelX ** 2 * this.props.mass) / this.props.circularMotionRadius,
                 directionInDegrees: (Math.atan2(deltaY, deltaX) * 180) / Math.PI,
-                component: false,
             },
         ];
     };
@@ -408,13 +399,11 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                 description: 'Gravity',
                 magnitude: Math.abs(this.props.gravity) * this.props.mass,
                 directionInDegrees: 270,
-                component: false,
             },
             {
                 description: 'Spring Force',
                 magnitude: this.props.springConstant * (yPos - this.props.springRestLength) * (yPosPlus ? 1 : yPosMinus ? -1 : 0),
                 directionInDegrees: yPosPlus ? 90 : 270,
-                component: false,
             },
         ];
     };
@@ -442,13 +431,11 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                 description: 'Gravity',
                 magnitude: Math.abs(this.props.gravity) * this.props.mass,
                 directionInDegrees: 270,
-                component: false,
             },
             {
                 description: 'Tension',
                 magnitude: mag,
                 directionInDegrees: angle,
-                component: false,
             },
         ];
     };
@@ -488,7 +475,6 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                         description: 'Gravity',
                         magnitude: Math.abs(this.props.gravity) * this.props.mass,
                         directionInDegrees: 270,
-                        component: false,
                     };
                     if (maxY > groundY) {
                         this.setState({ yPosition: groundY - 2 * this.props.radius - 0.01 });
@@ -500,11 +486,10 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                                 description: 'Normal force',
                                 magnitude: gravity.magnitude,
                                 directionInDegrees: -gravity.directionInDegrees,
-                                component: false,
                             };
                             this.props.setForcesUpdated([gravity, normalForce]);
                             if (this.props.simulationType === 'Inclined Plane') {
-                                this.props.setComponentForces([gravity, { ...normalForce, component: true }]);
+                                this.props.setComponentForces([gravity, normalForce]);
                             }
                         }
                         collision = true;
@@ -641,19 +626,16 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                 description: 'Tension',
                 magnitude: mag,
                 directionInDegrees: angle,
-                component: true,
             };
             const gravityParallel: IForce = {
                 description: 'Gravity Parallel Component',
                 magnitude: Math.abs(this.props.gravity) * Math.cos(((90 - angle) * Math.PI) / 180),
                 directionInDegrees: 270 - (90 - angle),
-                component: true,
             };
             const gravityPerpendicular: IForce = {
                 description: 'Gravity Perpendicular Component',
                 magnitude: Math.abs(this.props.gravity) * Math.sin(((90 - angle) * Math.PI) / 180),
                 directionInDegrees: -(90 - angle),
-                component: true,
             };
             if (Math.abs(this.props.gravity) * Math.sin(((90 - angle) * Math.PI) / 180) < 0) {
                 gravityPerpendicular.magnitude = Math.abs(Math.abs(this.props.gravity) * Math.sin(((90 - angle) * Math.PI) / 180));
@@ -663,6 +645,57 @@ export default class Weight extends React.Component<IWeightProps, IState> {
         }
     };
 
+    renderForce = (force: IForce, index: number, asComponent: boolean) => {
+        if (force.magnitude < this.epsilon) return;
+
+        const angle = (force.directionInDegrees * Math.PI) / 180;
+        const arrowStartY = this.state.yPosition + this.props.radius - this.props.radius * Math.sin(angle);
+        const arrowStartX = this.state.xPosition + this.props.radius + this.props.radius * Math.cos(angle);
+        const arrowEndY = arrowStartY - Math.abs(force.magnitude) * Math.sin(angle) - this.props.radius * Math.sin(angle);
+        const arrowEndX = arrowStartX + Math.abs(force.magnitude) * Math.cos(angle) + this.props.radius * Math.cos(angle);
+
+        const color = '#0d0d0d';
+
+        let labelTop = arrowEndY + (force.directionInDegrees >= 0 && force.directionInDegrees < 180 ? 40 : -40);
+        let labelLeft = arrowEndX + (force.directionInDegrees > 90 && force.directionInDegrees < 270 ? -120 : 30);
+
+        labelTop = Math.max(Math.min(labelTop, this.props.yMax + 50), this.props.yMin);
+        labelLeft = Math.max(Math.min(labelLeft, this.props.xMax - 60), this.props.xMin);
+
+        return (
+            <div key={index} style={{ zIndex: 6, position: 'absolute' }}>
+                <div
+                    style={{
+                        pointerEvents: 'none',
+                        position: 'absolute',
+                        left: this.props.xMin,
+                        top: this.props.yMin,
+                    }}>
+                    <svg width={this.props.xMax - this.props.xMin + 'px'} height={this.panelHeight}>
+                        <defs>
+                            <marker id="forceArrow" markerWidth="4" markerHeight="4" refX="0" refY="2" orient="auto" markerUnits="strokeWidth">
+                                <path d="M0,0 L0,4 L4,2 z" fill={color} />
+                            </marker>
+                        </defs>
+                        <line strokeDasharray={asComponent ? '10,10' : undefined} x1={arrowStartX} y1={arrowStartY} x2={arrowEndX} y2={arrowEndY} stroke={color} strokeWidth="5" markerEnd="url(#forceArrow)" />
+                    </svg>
+                </div>
+                <div
+                    style={{
+                        pointerEvents: 'none',
+                        position: 'absolute',
+                        left: labelLeft + 'px',
+                        top: labelTop + 'px',
+                        lineHeight: 1,
+                        backgroundColor: this.labelBackgroundColor,
+                    }}>
+                    <p>{force.description || 'Force'}</p>
+                    {this.props.showForceMagnitudes && <p>{Math.round(100 * force.magnitude) / 100} N</p>}
+                </div>
+            </div>
+        );
+    };
+
     // Render weight, spring, rod(s), vectors
     render() {
         return (
@@ -757,19 +790,16 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                                     description: 'Tension',
                                     magnitude: tensionMag1,
                                     directionInDegrees: (dir1T * 180) / Math.PI,
-                                    component: false,
                                 };
                                 const tensionForce2: IForce = {
                                     description: 'Tension',
                                     magnitude: tensionMag2,
                                     directionInDegrees: (dir2T * 180) / Math.PI,
-                                    component: false,
                                 };
                                 const grav: IForce = {
                                     description: 'Gravity',
                                     magnitude: this.props.mass * Math.abs(this.props.gravity),
                                     directionInDegrees: 270,
-                                    component: false,
                                 };
                                 this.props.setForcesUpdated([tensionForce1, tensionForce2, grav]);
                             }
@@ -802,14 +832,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                 )}
 
                 {this.props.simulationType == 'Pulley' && (
-                    <div
-                        className="rod"
-                        style={{
-                            pointerEvents: 'none',
-                            position: 'absolute',
-                            left: 0,
-                            top: 0,
-                        }}>
+                    <div className="rod">
                         <svg width={this.panelWidth} height={this.panelHeight}>
                             <line //
                                 x1={this.state.xPosition + this.props.radius}
@@ -837,14 +860,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                     </div>
                 )}
                 {this.props.simulationType == 'Suspension' && (
-                    <div
-                        className="rod"
-                        style={{
-                            pointerEvents: 'none',
-                            position: 'absolute',
-                            left: 0,
-                            top: 0,
-                        }}>
+                    <div className="rod">
                         <svg width={this.panelWidth} height={this.panelHeight}>
                             <line
                                 x1={this.state.xPosition + this.props.radius}
@@ -867,14 +883,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                             ) / 100}
                             °
                         </p>
-                        <div
-                            className="rod"
-                            style={{
-                                pointerEvents: 'none',
-                                position: 'absolute',
-                                left: 0,
-                                top: 0,
-                            }}>
+                        <div className="rod">
                             <svg width={this.props.panelWidth() + 'px'} height={this.panelHeight}>
                                 <line
                                     x1={this.state.xPosition + this.props.radius}
@@ -902,14 +911,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                     </div>
                 )}
                 {this.props.simulationType == 'Circular Motion' && (
-                    <div
-                        className="rod"
-                        style={{
-                            pointerEvents: 'none',
-                            position: 'absolute',
-                            left: 0,
-                            top: 0,
-                        }}>
+                    <div className="rod">
                         <svg width={this.panelWidth} height={this.panelHeight}>
                             <line
                                 x1={this.state.xPosition + this.props.radius}
@@ -923,14 +925,7 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                     </div>
                 )}
                 {this.props.simulationType == 'Pendulum' && (
-                    <div
-                        className="rod"
-                        style={{
-                            pointerEvents: 'none',
-                            position: 'absolute',
-                            left: 0,
-                            top: 0,
-                        }}>
+                    <div className="rod">
                         <svg width={this.panelWidth} height={this.panelHeight}>
                             <line x1={this.state.xPosition + this.props.radius} y1={this.state.yPosition + this.props.radius} x2={this.props.xMax / 2} y2={-5} stroke={'#deb887'} strokeWidth="10" />
                         </svg>
@@ -1056,136 +1051,8 @@ export default class Weight extends React.Component<IWeightProps, IState> {
                         </div>
                     </div>
                 )}
-                {!this.state.dragging &&
-                    this.props.showComponentForces &&
-                    this.props.componentForces().map((force, index) => {
-                        if (force.magnitude < this.epsilon) {
-                            return;
-                        }
-                        const arrowStartY = this.state.yPosition + this.props.radius;
-                        const arrowStartX = this.state.xPosition + this.props.radius;
-                        const arrowEndY = arrowStartY - Math.abs(force.magnitude) * 20 * Math.sin((force.directionInDegrees * Math.PI) / 180);
-                        const arrowEndX = arrowStartX + Math.abs(force.magnitude) * 20 * Math.cos((force.directionInDegrees * Math.PI) / 180);
-
-                        const color = '#0d0d0d';
-
-                        let labelTop = arrowEndY;
-                        let labelLeft = arrowEndX;
-                        if (force.directionInDegrees > 90 && force.directionInDegrees < 270) {
-                            labelLeft -= 120;
-                        } else {
-                            labelLeft += 30;
-                        }
-                        if (force.directionInDegrees >= 0 && force.directionInDegrees < 180) {
-                            labelTop += 40;
-                        } else {
-                            labelTop -= 40;
-                        }
-                        labelTop = Math.min(labelTop, this.props.yMax + 50);
-                        labelTop = Math.max(labelTop, this.props.yMin);
-                        labelLeft = Math.min(labelLeft, this.props.xMax - 60);
-                        labelLeft = Math.max(labelLeft, this.props.xMin);
-
-                        return (
-                            <div key={index}>
-                                <div
-                                    style={{
-                                        pointerEvents: 'none',
-                                        position: 'absolute',
-                                        left: this.props.xMin,
-                                        top: this.props.yMin,
-                                    }}>
-                                    <svg width={this.props.xMax - this.props.xMin + 'px'} height={this.panelHeight}>
-                                        <defs>
-                                            <marker id="forceArrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
-                                                <path d="M0,0 L0,6 L9,3 z" fill={color} />
-                                            </marker>
-                                        </defs>
-                                        {force.component == true && <line x1={arrowStartX} y1={arrowStartY} x2={arrowEndX} y2={arrowEndY} stroke={color} strokeWidth="5" strokeDasharray="10,10" markerEnd="url(#forceArrow)" />}
-                                        {force.component == false && <line x1={arrowStartX} y1={arrowStartY} x2={arrowEndX} y2={arrowEndY} stroke={color} strokeWidth="5" markerEnd="url(#forceArrow)" />}
-                                    </svg>
-                                </div>
-                                <div
-                                    style={{
-                                        pointerEvents: 'none',
-                                        position: 'absolute',
-                                        left: labelLeft + 'px',
-                                        top: labelTop + 'px',
-                                        lineHeight: 1,
-                                        backgroundColor: this.labelBackgroundColor,
-                                    }}>
-                                    {force.description && <p>{force.description}</p>}
-                                    {!force.description && <p>Force</p>}
-                                    {this.props.showForceMagnitudes && <p>{Math.round(100 * force.magnitude) / 100} N</p>}
-                                </div>
-                            </div>
-                        );
-                    })}
-                {!this.state.dragging &&
-                    this.props.showForces &&
-                    this.props.forcesUpdated().map((force, index) => {
-                        if (force.magnitude < this.epsilon) {
-                            return;
-                        }
-                        const arrowStartY = this.state.yPosition + this.props.radius;
-                        const arrowStartX = this.state.xPosition + this.props.radius;
-                        const arrowEndY = arrowStartY - Math.abs(force.magnitude) * 20 * Math.sin((force.directionInDegrees * Math.PI) / 180);
-                        const arrowEndX = arrowStartX + Math.abs(force.magnitude) * 20 * Math.cos((force.directionInDegrees * Math.PI) / 180);
-
-                        const color = '#0d0d0d';
-
-                        let labelTop = arrowEndY;
-                        let labelLeft = arrowEndX;
-                        if (force.directionInDegrees > 90 && force.directionInDegrees < 270) {
-                            labelLeft -= 120;
-                        } else {
-                            labelLeft += 30;
-                        }
-                        if (force.directionInDegrees >= 0 && force.directionInDegrees < 180) {
-                            labelTop += 40;
-                        } else {
-                            labelTop -= 40;
-                        }
-                        labelTop = Math.min(labelTop, this.props.yMax + 50);
-                        labelTop = Math.max(labelTop, this.props.yMin);
-                        labelLeft = Math.min(labelLeft, this.props.xMax - 60);
-                        labelLeft = Math.max(labelLeft, this.props.xMin);
-
-                        return (
-                            <div key={index}>
-                                <div
-                                    style={{
-                                        pointerEvents: 'none',
-                                        position: 'absolute',
-                                        left: this.props.xMin,
-                                        top: this.props.yMin,
-                                    }}>
-                                    <svg width={this.props.xMax - this.props.xMin + 'px'} height={this.panelHeight}>
-                                        <defs>
-                                            <marker id="forceArrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
-                                                <path d="M0,0 L0,6 L9,3 z" fill={color} />
-                                            </marker>
-                                        </defs>
-                                        {force.component == true && <line x1={arrowStartX} y1={arrowStartY} x2={arrowEndX} y2={arrowEndY} stroke={color} strokeWidth="5" strokeDasharray="10,10" markerEnd="url(#forceArrow)" />}
-                                        {force.component == false && <line x1={arrowStartX} y1={arrowStartY} x2={arrowEndX} y2={arrowEndY} stroke={color} strokeWidth="5" markerEnd="url(#forceArrow)" />}
-                                    </svg>
-                                </div>
-                                <div
-                                    style={{
-                                        pointerEvents: 'none',
-                                        position: 'absolute',
-                                        left: labelLeft + 'px',
-                                        top: labelTop + 'px',
-                                        lineHeight: 1,
-                                        backgroundColor: this.labelBackgroundColor,
-                                    }}>
-                                    {force.description && <p>{force.description}</p>}
-                                    {!force.description && <p>Force</p>}
-                                    {this.props.showForceMagnitudes && <p>{Math.round(100 * force.magnitude) / 100} N</p>}
-                                </div>
-                            </div>
-                        );
-                    })}
+                {!this.state.dragging && this.props.showComponentForces && this.props.componentForces().map((force, index) => this.renderForce(force, index, true))}
+                {!this.state.dragging && this.props.showForces && this.props.forcesUpdated().map((force, index) => this.renderForce(force, index, false))}
             </div>
         );
     }