Merge branch 'moreUpgrading' into dataViz-annotations

4 files changed, 33 insertions, 32 deletions

diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index cd1ff17dd..e75b1ab6f 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -15,11 +15,11 @@ import { ViewBoxAnnotatableComponent } from '../../DocComponent';
 import { FieldView, FieldViewProps } from './../FieldView';
 import './PhysicsSimulationBox.scss';
 import InputField from './PhysicsSimulationInputField';
-import * as questions from './PhysicsSimulationQuestions.json';
-import * as tutorials from './PhysicsSimulationTutorial.json';
+import questions from './PhysicsSimulationQuestions.json';
+import tutorials from './PhysicsSimulationTutorial.json';
 import Wall from './PhysicsSimulationWall';
 import Weight from './PhysicsSimulationWeight';
-import React = require('react');
+import * as React from 'react';
 
 interface IWallProps {
     length: number;
@@ -202,7 +202,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         ];
     }
 
-    componentDidUpdate() {
+    componentDidUpdate(prevProps: Readonly<React.PropsWithChildren<FieldViewProps>>) {
+        super.componentDidUpdate(prevProps);
         if (this.xMax !== this.props.PanelWidth() * 0.6 || this.yMax != this.props.PanelHeight()) {
             this.xMax = this.props.PanelWidth() * 0.6;
             this.yMax = this.props.PanelHeight();
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
index d595a499e..c704863f5 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx
@@ -1,6 +1,6 @@
 import { TextField, InputAdornment } from '@mui/material';
 import { Doc } from '../../../../fields/Doc';
-import React = require('react');
+import * as React from 'react';
 import TaskAltIcon from '@mui/icons-material/TaskAlt';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import { isNumber } from 'lodash';
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx
index 8cc1d0fbf..696352296 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx
@@ -1,34 +1,33 @@
-import React = require('react');
+import * as React from 'react';
 
 export interface Force {
-  magnitude: number;
-  directionInDegrees: number;
+    magnitude: number;
+    directionInDegrees: number;
 }
 export interface IWallProps {
-  length: number;
-  xPos: number;
-  yPos: number;
-  angleInDegrees: number;
+    length: number;
+    xPos: number;
+    yPos: number;
+    angleInDegrees: number;
 }
 
 export default class Wall extends React.Component<IWallProps> {
+    constructor(props: any) {
+        super(props);
+    }
 
-  constructor(props: any) {
-    super(props)
-  }
+    wallStyle = {
+        width: this.props.angleInDegrees == 0 ? this.props.length + '%' : '5px',
+        height: this.props.angleInDegrees == 0 ? '5px' : this.props.length + '%',
+        position: 'absolute' as 'absolute',
+        left: this.props.xPos + '%',
+        top: this.props.yPos + '%',
+        backgroundColor: '#6c7b8b',
+        margin: 0,
+        padding: 0,
+    };
 
-  wallStyle = {
-    width: this.props.angleInDegrees == 0 ? this.props.length + "%" : "5px",
-    height: this.props.angleInDegrees == 0 ? "5px" : this.props.length + "%",
-    position: "absolute" as "absolute",
-    left: this.props.xPos + "%",
-    top: this.props.yPos + "%",
-    backgroundColor: "#6c7b8b",
-    margin: 0,
-    padding: 0,
-  };
-
-  render () {
-    return (<div style={this.wallStyle}></div>);
-  }
-};
+    render() {
+        return <div style={this.wallStyle}></div>;
+    }
+}
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
index 2165c8ba9..f5077a07e 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx
@@ -1,7 +1,7 @@
-import { computed, IReactionDisposer, reaction } from 'mobx';
+import { computed, IReactionDisposer, makeObservable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import './PhysicsSimulationBox.scss';
-import React = require('react');
+import * as React from 'react';
 
 interface IWallProps {
     length: number;
@@ -93,6 +93,7 @@ interface IState {
 export default class Weight extends React.Component<IWeightProps, IState> {
     constructor(props: any) {
         super(props);
+        makeObservable(this);
         this.state = {
             angleLabel: 0,
             clickPositionX: 0,