cleaned up warnings and errors, working with typescript 20.10

46 files changed, 184 insertions, 192 deletions

diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index dacdbe986..8b9c5ae67 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
 import { action, computed, IReactionDisposer, observable, runInAction } from 'mobx';
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 6195a155d..624f28413 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -14,7 +14,7 @@ import { DocComponent } from '../DocComponent';
 import { StyleProp } from '../StyleProvider';
 import './CollectionFreeFormDocumentView.scss';
 import { DocumentView, DocumentViewProps, OpenWhere } from './DocumentView';
-import React = require('react');
+import * as React from 'react';
 import { ScriptingGlobals } from '../../util/ScriptingGlobals';
 
 export interface CollectionFreeFormDocumentViewWrapperProps extends DocumentViewProps {
diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx
index 2a20d935b..852d39800 100644
--- a/src/client/views/nodes/ColorBox.tsx
+++ b/src/client/views/nodes/ColorBox.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { action } from 'mobx';
 import { observer } from 'mobx-react';
 import { ColorState, SketchPicker } from 'react-color';
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 9fd4fbcaa..72a473114 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -13,7 +13,7 @@ import './ComparisonBox.scss';
 import { DocumentView, DocumentViewProps } from './DocumentView';
 import { FieldView, FieldViewProps } from './FieldView';
 import { PinProps, PresBox } from './trails';
-import React = require('react');
+import * as React from 'react';
 
 @observer
 export class ComparisonBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps>() {
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 4dbd67485..f9e7a4617 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -277,6 +277,7 @@ export class PieChart extends React.Component<PieChartProps> {
                           return 'slice';
                       }
             )
+            // @ts-ignore
             .attr('d', arc)
             .on('click', onPointClick)
             .on('mouseover', onHover)
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 4b58bfe48..b0c94a06a 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -46,7 +46,7 @@ import { ScriptingBox } from './ScriptingBox';
 import { PresBox } from './trails/PresBox';
 import { VideoBox } from './VideoBox';
 import { WebBox } from './WebBox';
-import React = require('react');
+import * as React from 'react';
 import XRegExp = require('xregexp');
 
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index ce3650749..9d233ead5 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -15,7 +15,7 @@ import { DocumentView } from './DocumentView';
 import { LinkDescriptionPopup } from './LinkDescriptionPopup';
 import { TaskCompletionBox } from './TaskCompletedBox';
 import { PinProps } from './trails';
-import React = require('react');
+import * as React from 'react';
 import _ = require('lodash');
 
 interface DocumentLinksButtonProps {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index bfbe3389f..f6a14eab1 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -51,7 +51,7 @@ import { KeyValueBox } from './KeyValueBox';
 import { LinkAnchorBox } from './LinkAnchorBox';
 import { PresEffect, PresEffectDirection } from './trails';
 import { PinProps, PresBox } from './trails/PresBox';
-import React = require('react');
+import * as React from 'react';
 const { Howl } = require('howler');
 
 interface Window {
diff --git a/src/client/views/nodes/FaceRectangle.tsx b/src/client/views/nodes/FaceRectangle.tsx
index 20afa4565..8d03bf57a 100644
--- a/src/client/views/nodes/FaceRectangle.tsx
+++ b/src/client/views/nodes/FaceRectangle.tsx
@@ -1,14 +1,14 @@
-import React = require("react");
-import { observer } from "mobx-react";
-import { observable, runInAction } from "mobx";
-import { RectangleTemplate } from "./FaceRectangles";
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { observable, runInAction } from 'mobx';
+import { RectangleTemplate } from './FaceRectangles';
 
 @observer
 export default class FaceRectangle extends React.Component<{ rectangle: RectangleTemplate }> {
     @observable private opacity = 0;
 
     componentDidMount() {
-        setTimeout(() => runInAction(() => this.opacity = 1), 500);
+        setTimeout(() => runInAction(() => (this.opacity = 1)), 500);
     }
 
     render() {
@@ -18,12 +18,11 @@ export default class FaceRectangle extends React.Component<{ rectangle: Rectangl
                 style={{
                     ...rectangle.style,
                     opacity: this.opacity,
-                    transition: "1s ease opacity",
-                    position: "absolute",
-                    borderRadius: 5
+                    transition: '1s ease opacity',
+                    position: 'absolute',
+                    borderRadius: 5,
                 }}
             />
         );
     }
-
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/FaceRectangles.tsx b/src/client/views/nodes/FaceRectangles.tsx
index 0d1e063af..26e720c0d 100644
--- a/src/client/views/nodes/FaceRectangles.tsx
+++ b/src/client/views/nodes/FaceRectangles.tsx
@@ -1,9 +1,9 @@
-import React = require("react");
-import { Doc, DocListCast } from "../../../fields/Doc";
-import { Cast, NumCast } from "../../../fields/Types";
-import { observer } from "mobx-react";
-import { Id } from "../../../fields/FieldSymbols";
-import FaceRectangle from "./FaceRectangle";
+import * as React from 'react';
+import { Doc, DocListCast } from '../../../fields/Doc';
+import { Cast, NumCast } from '../../../fields/Types';
+import { observer } from 'mobx-react';
+import { Id } from '../../../fields/FieldSymbols';
+import FaceRectangle from './FaceRectangle';
 
 interface FaceRectanglesProps {
     document: Doc;
@@ -18,7 +18,6 @@ export interface RectangleTemplate {
 
 @observer
 export class FaceRectangles extends React.Component<FaceRectanglesProps> {
-
     render() {
         const faces = DocListCast(this.props.document.faces);
         const templates: RectangleTemplate[] = faces.map(faceDoc => {
@@ -33,14 +32,15 @@ export class FaceRectangles extends React.Component<FaceRectanglesProps> {
             } as React.CSSProperties;
             return {
                 id: rectangle[Id],
-                style: style
+                style: style,
             };
         });
         return (
             <div>
-                {templates.map(rectangle => <FaceRectangle key={rectangle.id} rectangle={rectangle} />)}
+                {templates.map(rectangle => (
+                    <FaceRectangle key={rectangle.id} rectangle={rectangle} />
+                ))}
             </div>
         );
     }
-
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 219e3025a..f4c5167a5 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { computed } from 'mobx';
 import { observer } from 'mobx-react';
 import { DateField } from '../../../fields/DateField';
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index d28d71fe3..336891a18 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -35,7 +35,7 @@ import { FaceRectangles } from './FaceRectangles';
 import { FieldView, FieldViewProps } from './FieldView';
 import './ImageBox.scss';
 import { PinProps, PresBox } from './trails';
-import React = require('react');
+import * as React from 'react';
 
 export const pageSchema = createSchema({
     googlePhotosUrl: 'string',
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index 0c6377c3a..d2325a807 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -20,7 +20,7 @@ import { FormattedTextBox } from './formattedText/FormattedTextBox';
 import { ImageBox } from './ImageBox';
 import './KeyValueBox.scss';
 import { KeyValuePair } from './KeyValuePair';
-import React = require('react');
+import * as React from 'react';
 
 export type KVPScript = {
     script: CompiledScript;
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index 577685636..8f3c75f54 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -12,7 +12,7 @@ import { FieldView, FieldViewProps } from './FieldView';
 import { KeyValueBox } from './KeyValueBox';
 import './KeyValueBox.scss';
 import './KeyValuePair.scss';
-import React = require('react');
+import * as React from 'react';
 import { DocCast } from '../../../fields/Types';
 import { Tooltip } from '@material-ui/core';
 import { DocumentOptions, FInfo } from '../../documents/Documents';
diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx
index cf157c3a9..d10cbac5e 100644
--- a/src/client/views/nodes/LinkAnchorBox.tsx
+++ b/src/client/views/nodes/LinkAnchorBox.tsx
@@ -12,7 +12,7 @@ import { StyleProp } from '../StyleProvider';
 import { FieldView, FieldViewProps } from './FieldView';
 import './LinkAnchorBox.scss';
 import { LinkDocPreview } from './LinkDocPreview';
-import React = require('react');
+import * as React from 'react';
 import globalCssVariables = require('../global/globalCssVariables.scss');
 
 @observer
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 743075c89..ed448ecfb 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { Bezier } from 'bezier-js';
 import { computed, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
diff --git a/src/client/views/nodes/LinkDescriptionPopup.tsx b/src/client/views/nodes/LinkDescriptionPopup.tsx
index c45045a8a..32300d60a 100644
--- a/src/client/views/nodes/LinkDescriptionPopup.tsx
+++ b/src/client/views/nodes/LinkDescriptionPopup.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { action, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc } from '../../../fields/Doc';
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index ad5324b3e..b5fb6db86 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -18,7 +18,7 @@ import { SettingsManager } from '../../util/SettingsManager';
 import { Transform } from '../../util/Transform';
 import { DocumentView, DocumentViewSharedProps, OpenWhere } from './DocumentView';
 import './LinkDocPreview.scss';
-import React = require('react');
+import * as React from 'react';
 
 interface LinkDocPreviewProps {
     linkDoc?: Doc;
diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
index f6680aac0..e6c1db0af 100644
--- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
+++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IReactionDisposer, ObservableMap, reaction } from 'mobx';
 import { observer } from 'mobx-react';
diff --git a/src/client/views/nodes/MapBox/MapPushpinBox.tsx b/src/client/views/nodes/MapBox/MapPushpinBox.tsx
index 56f0a49b8..590f8735c 100644
--- a/src/client/views/nodes/MapBox/MapPushpinBox.tsx
+++ b/src/client/views/nodes/MapBox/MapPushpinBox.tsx
@@ -2,7 +2,7 @@ import { observer } from 'mobx-react';
 // import { SettingsManager } from '../../../util/SettingsManager';
 import { ViewBoxBaseComponent } from '../../DocComponent';
 import { FieldView, FieldViewProps } from '../FieldView';
-import React = require('react');
+import * as React from 'react';
 import { computed } from 'mobx';
 import { MapBox } from './MapBox';
 
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 9787de0ab..8de8498d7 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -31,7 +31,7 @@ import { FieldView, FieldViewProps } from './FieldView';
 import { ImageBox } from './ImageBox';
 import './PDFBox.scss';
 import { PinProps, PresBox } from './trails';
-import React = require('react');
+import * as React from 'react';
 
 @observer
 export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps>() {
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index cd1ff17dd..c498a58d6 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;
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..99333991f 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 { observer } from 'mobx-react';
 import './PhysicsSimulationBox.scss';
-import React = require('react');
+import * as React from 'react';
 
 interface IWallProps {
     length: number;
diff --git a/src/client/views/nodes/RadialMenu.tsx b/src/client/views/nodes/RadialMenu.tsx
index 7f0956e51..191877cb5 100644
--- a/src/client/views/nodes/RadialMenu.tsx
+++ b/src/client/views/nodes/RadialMenu.tsx
@@ -1,8 +1,8 @@
-import React = require("react");
-import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx";
-import { observer } from "mobx-react";
-import "./RadialMenu.scss";
-import { RadialMenuItem, RadialMenuProps } from "./RadialMenuItem";
+import * as React from 'react';
+import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
+import './RadialMenu.scss';
+import { RadialMenuItem, RadialMenuProps } from './RadialMenuItem';
 
 @observer
 export class RadialMenu extends React.Component {
@@ -23,11 +23,10 @@ export class RadialMenu extends React.Component {
 
     public used: boolean = false;
 
-
     catchTouch = (te: React.TouchEvent) => {
         te.stopPropagation();
         te.preventDefault();
-    }
+    };
 
     @action
     onPointerDown = (e: PointerEvent) => {
@@ -35,8 +34,8 @@ export class RadialMenu extends React.Component {
         this._mouseX = e.clientX;
         this._mouseY = e.clientY;
         this.used = false;
-        document.addEventListener("pointermove", this.onPointerMove);
-    }
+        document.addEventListener('pointermove', this.onPointerMove);
+    };
 
     @observable
     private _closest: number = -1;
@@ -60,11 +59,10 @@ export class RadialMenu extends React.Component {
                 }
             }
             this._closest = closest;
-        }
-        else {
+        } else {
             this._closest = -1;
         }
-    }
+    };
     @action
     onPointerUp = (e: PointerEvent) => {
         this.used = true;
@@ -75,43 +73,41 @@ export class RadialMenu extends React.Component {
             this._shouldDisplay = false;
         }
         this._shouldDisplay && (this._display = true);
-        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener('pointermove', this.onPointerMove);
         if (this._closest !== -1 && this._items?.length > this._closest) {
             this._items[this._closest].event();
         }
-    }
+    };
     componentWillUnmount() {
-        document.removeEventListener("pointerdown", this.onPointerDown);
+        document.removeEventListener('pointerdown', this.onPointerDown);
 
-        document.removeEventListener("pointerup", this.onPointerUp);
+        document.removeEventListener('pointerup', this.onPointerUp);
         this._reactionDisposer && this._reactionDisposer();
     }
 
     @action
     componentDidMount = () => {
-        document.addEventListener("pointerdown", this.onPointerDown);
-        document.addEventListener("pointerup", this.onPointerUp);
+        document.addEventListener('pointerdown', this.onPointerDown);
+        document.addEventListener('pointerup', this.onPointerUp);
         this.previewcircle();
         this._reactionDisposer = reaction(
             () => this._shouldDisplay,
-            () => this._shouldDisplay && !this._mouseDown && runInAction(() => this._display = true)
+            () => this._shouldDisplay && !this._mouseDown && runInAction(() => (this._display = true))
         );
-    }
+    };
 
     componentDidUpdate = () => {
         this.previewcircle();
-    }
+    };
 
     @observable private _pageX: number = 0;
     @observable private _pageY: number = 0;
     @observable _display: boolean = false;
     @observable private _yRelativeToTop: boolean = true;
 
-
     @observable private _width: number = 0;
     @observable private _height: number = 0;
 
-
     getItems() {
         return this._items;
     }
@@ -133,7 +129,7 @@ export class RadialMenu extends React.Component {
         this._mouseX = x;
         this._mouseY = y;
         this._shouldDisplay = true;
-    }
+    };
     // @computed
     // get pageX() {
     //     const x = this._pageX;
@@ -168,7 +164,7 @@ export class RadialMenu extends React.Component {
         this.clearItems();
         this._display = false;
         this._shouldDisplay = false;
-    }
+    };
 
     @action
     openMenu = (x: number, y: number) => {
@@ -176,56 +172,52 @@ export class RadialMenu extends React.Component {
         this._pageY = y;
         this._shouldDisplay;
         this._display = true;
-    }
+    };
 
     @action
     clearItems() {
         this._items = [];
     }
 
-
     previewcircle() {
-        if (document.getElementById("newCanvas") !== null) {
-            const c: any = document.getElementById("newCanvas");
+        if (document.getElementById('newCanvas') !== null) {
+            const c: any = document.getElementById('newCanvas');
             if (c.getContext) {
-                const ctx = c.getContext("2d");
+                const ctx = c.getContext('2d');
                 ctx.beginPath();
                 ctx.arc(150, 150, 50, 0, 2 * Math.PI);
-                ctx.fillStyle = "white";
+                ctx.fillStyle = 'white';
                 ctx.fill();
-                ctx.font = "12px Arial";
-                ctx.fillStyle = "black";
-                ctx.textAlign = "center";
-                let description = "";
+                ctx.font = '12px Arial';
+                ctx.fillStyle = 'black';
+                ctx.textAlign = 'center';
+                let description = '';
                 if (this._closest !== -1) {
                     description = this._items[this._closest].description;
                 }
                 if (description.length > 15) {
                     description = description.slice(0, 12);
-                    description += "...";
+                    description += '...';
                 }
                 ctx.fillText(description, 150, 150, 90);
             }
         }
     }
 
-
     render() {
         if (!this._display) {
             return null;
         }
-        const style = this._yRelativeToTop ? { left: this._pageX - 130, top: this._pageY - 130 } :
-            { left: this._pageX - 130, top: this._pageY - 130 };
+        const style = this._yRelativeToTop ? { left: this._pageX - 130, top: this._pageY - 130 } : { left: this._pageX - 130, top: this._pageY - 130 };
 
         return (
-
             <div className="radialMenu-cont" onTouchStart={this.catchTouch} style={style}>
-                <canvas id="newCanvas" style={{ position: "absolute" }} height="300" width="300"> Your browser does not support the HTML5 canvas tag.</canvas>
+                <canvas id="newCanvas" style={{ position: 'absolute' }} height="300" width="300">
+                    {' '}
+                    Your browser does not support the HTML5 canvas tag.
+                </canvas>
                 {this.menuItems}
             </div>
-
         );
     }
-
-
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/RadialMenuItem.tsx b/src/client/views/nodes/RadialMenuItem.tsx
index 8876b4879..c931202f1 100644
--- a/src/client/views/nodes/RadialMenuItem.tsx
+++ b/src/client/views/nodes/RadialMenuItem.tsx
@@ -1,8 +1,8 @@
-import React = require("react");
+import * as React from 'react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { observer } from "mobx-react";
-import { UndoManager } from "../../util/UndoManager";
+import { observer } from 'mobx-react';
+import { UndoManager } from '../../util/UndoManager';
 
 export interface RadialMenuProps {
     description: string;
@@ -15,17 +15,15 @@ export interface RadialMenuProps {
     selected: number;
 }
 
-
 @observer
 export class RadialMenuItem extends React.Component<RadialMenuProps> {
-
     componentDidMount = () => {
         this.setcircle();
-    }
+    };
 
     componentDidUpdate = () => {
         this.setcircle();
-    }
+    };
 
     handleEvent = async (e: React.PointerEvent) => {
         this.props.closeMenu && this.props.closeMenu();
@@ -35,38 +33,36 @@ export class RadialMenuItem extends React.Component<RadialMenuProps> {
         }
         await this.props.event({ x: e.clientX, y: e.clientY });
         batch && batch.end();
-    }
-
+    };
 
     setcircle() {
         let circlemin = 0;
         let circlemax = 1;
-        this.props.min ? circlemin = this.props.min : null;
-        this.props.max ? circlemax = this.props.max : null;
-        if (document.getElementById("myCanvas") !== null) {
-            const c: any = document.getElementById("myCanvas");
-            let color = "white";
+        this.props.min ? (circlemin = this.props.min) : null;
+        this.props.max ? (circlemax = this.props.max) : null;
+        if (document.getElementById('myCanvas') !== null) {
+            const c: any = document.getElementById('myCanvas');
+            let color = 'white';
             switch (circlemin % 3) {
                 case 1:
-                    color = "#c2c2c5";
+                    color = '#c2c2c5';
                     break;
                 case 0:
-                    color = "#f1efeb";
+                    color = '#f1efeb';
                     break;
                 case 2:
-                    color = "lightgray";
+                    color = 'lightgray';
                     break;
             }
             if (circlemax % 3 === 1 && circlemin === circlemax - 1) {
-                color = "#c2c2c5";
+                color = '#c2c2c5';
             }
 
             if (this.props.selected === this.props.min) {
-                color = "#808080";
-
+                color = '#808080';
             }
             if (c.getContext) {
-                const ctx = c.getContext("2d");
+                const ctx = c.getContext('2d');
                 ctx.beginPath();
                 ctx.arc(150, 150, 150, (circlemin / circlemax) * 2 * Math.PI, ((circlemin + 1) / circlemax) * 2 * Math.PI);
                 ctx.arc(150, 150, 50, ((circlemin + 1) / circlemax) * 2 * Math.PI, (circlemin / circlemax) * 2 * Math.PI, true);
@@ -79,35 +75,36 @@ export class RadialMenuItem extends React.Component<RadialMenuProps> {
     calculatorx() {
         let circlemin = 0;
         let circlemax = 1;
-        this.props.min ? circlemin = this.props.min : null;
-        this.props.max ? circlemax = this.props.max : null;
-        const avg = ((circlemin / circlemax) + ((circlemin + 1) / circlemax)) / 2;
+        this.props.min ? (circlemin = this.props.min) : null;
+        this.props.max ? (circlemax = this.props.max) : null;
+        const avg = (circlemin / circlemax + (circlemin + 1) / circlemax) / 2;
         const degrees = 360 * avg;
-        const x = 100 * Math.cos(degrees * Math.PI / 180);
-        const y = -125 * Math.sin(degrees * Math.PI / 180);
+        const x = 100 * Math.cos((degrees * Math.PI) / 180);
+        const y = -125 * Math.sin((degrees * Math.PI) / 180);
         return x;
     }
 
     calculatory() {
-
         let circlemin = 0;
         let circlemax = 1;
-        this.props.min ? circlemin = this.props.min : null;
-        this.props.max ? circlemax = this.props.max : null;
-        const avg = ((circlemin / circlemax) + ((circlemin + 1) / circlemax)) / 2;
+        this.props.min ? (circlemin = this.props.min) : null;
+        this.props.max ? (circlemax = this.props.max) : null;
+        const avg = (circlemin / circlemax + (circlemin + 1) / circlemax) / 2;
         const degrees = 360 * avg;
-        const x = 125 * Math.cos(degrees * Math.PI / 180);
-        const y = -100 * Math.sin(degrees * Math.PI / 180);
+        const x = 125 * Math.cos((degrees * Math.PI) / 180);
+        const y = -100 * Math.sin((degrees * Math.PI) / 180);
         return y;
     }
 
-
     render() {
         return (
-            <div className={"radialMenu-item" + (this.props.selected ? " radialMenu-itemSelected" : "")} onPointerUp={this.handleEvent}>
-                <canvas id="myCanvas" height="300" width="300"> Your browser does not support the HTML5 canvas tag.</canvas>
-                <FontAwesomeIcon icon={this.props.icon} size="3x" style={{ position: "absolute", left: this.calculatorx() + 150 - 19, top: this.calculatory() + 150 - 19 }} />
+            <div className={'radialMenu-item' + (this.props.selected ? ' radialMenu-itemSelected' : '')} onPointerUp={this.handleEvent}>
+                <canvas id="myCanvas" height="300" width="300">
+                    {' '}
+                    Your browser does not support the HTML5 canvas tag.
+                </canvas>
+                <FontAwesomeIcon icon={this.props.icon} size="3x" style={{ position: 'absolute', left: this.calculatorx() + 150 - 19, top: this.calculatory() + 150 - 19 }} />
             </div>
         );
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx
index c2e204eab..7c21b1893 100644
--- a/src/client/views/nodes/ScreenshotBox.tsx
+++ b/src/client/views/nodes/ScreenshotBox.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 // import { Canvas } from '@react-three/fiber';
 import { computed, observable, runInAction } from 'mobx';
diff --git a/src/client/views/nodes/ScriptingBox.scss b/src/client/views/nodes/ScriptingBox.scss
index 8d76f2b1d..9789da55a 100644
--- a/src/client/views/nodes/ScriptingBox.scss
+++ b/src/client/views/nodes/ScriptingBox.scss
@@ -32,7 +32,7 @@
         .scriptingBox-wrapper {
             width: 100%;
             height: 100%;
-            max-height: calc(100%-30px);
+            max-height: calc(100% - 30px);
             display: flex;
             flex-direction: row;
             overflow: auto;
@@ -42,7 +42,8 @@
                 overflow: hidden;
             }
 
-            .scriptingBox-textArea, .scriptingBox-textArea-inputs {
+            .scriptingBox-textArea,
+            .scriptingBox-textArea-inputs {
                 flex: 70;
                 height: 100%;
                 max-width: 95%;
@@ -110,7 +111,7 @@
                     cursor: pointer;
                 }
 
-                .rta__entity>* {
+                .rta__entity > * {
                     padding-left: 4px;
                     padding-right: 4px;
                 }
@@ -125,7 +126,7 @@
             .scriptingBox-textArea-inputs {
                 max-width: 100%;
                 height: 40%;
-                width: 100%; 
+                width: 100%;
                 resize: none;
             }
             .scriptingBox-textArea-script {
@@ -194,8 +195,8 @@
 
         .scriptingBox-errorMessage {
             overflow: auto;
-            background: "red";
-            background-color: "red";
+            background: 'red';
+            background-color: 'red';
             height: 45px;
         }
 
@@ -221,4 +222,4 @@
             width: 25%;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/TaskCompletedBox.tsx b/src/client/views/nodes/TaskCompletedBox.tsx
index 2a3dd8d2d..a17b1dee9 100644
--- a/src/client/views/nodes/TaskCompletedBox.tsx
+++ b/src/client/views/nodes/TaskCompletedBox.tsx
@@ -1,13 +1,11 @@
-import React = require("react");
-import { observer } from "mobx-react";
-import "./TaskCompletedBox.scss";
-import { observable, action } from "mobx";
-import { Fade } from "@material-ui/core";
-
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import './TaskCompletedBox.scss';
+import { observable, action } from 'mobx';
+import { Fade } from '@material-ui/core';
 
 @observer
 export class TaskCompletionBox extends React.Component<{}> {
-
     @observable public static taskCompleted: boolean = false;
     @observable public static popupX: number = 500;
     @observable public static popupY: number = 150;
@@ -16,15 +14,20 @@ export class TaskCompletionBox extends React.Component<{}> {
     @action
     public static toggleTaskCompleted = () => {
         TaskCompletionBox.taskCompleted = !TaskCompletionBox.taskCompleted;
-    }
+    };
 
     render() {
-        return <Fade in={TaskCompletionBox.taskCompleted}>
-            <div className="taskCompletedBox-fade"
-                style={{
-                    left: TaskCompletionBox.popupX ? TaskCompletionBox.popupX : 500,
-                    top: TaskCompletionBox.popupY ? TaskCompletionBox.popupY : 150,
-                }}>{TaskCompletionBox.textDisplayed}</div>
-        </Fade>;
+        return (
+            <Fade in={TaskCompletionBox.taskCompleted}>
+                <div
+                    className="taskCompletedBox-fade"
+                    style={{
+                        left: TaskCompletionBox.popupX ? TaskCompletionBox.popupX : 500,
+                        top: TaskCompletionBox.popupY ? TaskCompletionBox.popupY : 150,
+                    }}>
+                    {TaskCompletionBox.textDisplayed}
+                </div>
+            </Fade>
+        );
     }
-} 
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 0f6c6724a..04780155d 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction, untracked } from 'mobx';
 import { observer } from 'mobx-react';
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index b3afe6ba0..d02e5f3e8 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -36,7 +36,7 @@ import { FieldView, FieldViewProps } from './FieldView';
 import { LinkDocPreview } from './LinkDocPreview';
 import { PinProps, PresBox } from './trails';
 import './WebBox.scss';
-import React = require('react');
+import * as React from 'react';
 const { CreateImage } = require('./WebBoxRenderer');
 const _global = (window /* browser */ || global) /* node */ as any;
 const htmlToText = require('html-to-text');
diff --git a/src/client/views/nodes/formattedText/DashDocCommentView.tsx b/src/client/views/nodes/formattedText/DashDocCommentView.tsx
index aa269d8d6..d6b053c8e 100644
--- a/src/client/views/nodes/formattedText/DashDocCommentView.tsx
+++ b/src/client/views/nodes/formattedText/DashDocCommentView.tsx
@@ -2,7 +2,7 @@ import { TextSelection } from 'prosemirror-state';
 import * as ReactDOM from 'react-dom/client';
 import { Doc } from '../../../../fields/Doc';
 import { DocServer } from '../../../DocServer';
-import React = require('react');
+import * as React from 'react';
 
 // creates an inline comment in a note when '>>' is typed.
 // the comment sits on the right side of the note and vertically aligns with its anchor in the text.
diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx
index 95743a036..4384c8958 100644
--- a/src/client/views/nodes/formattedText/DashDocView.tsx
+++ b/src/client/views/nodes/formattedText/DashDocView.tsx
@@ -11,7 +11,7 @@ import { Docs, DocUtils } from '../../../documents/Documents';
 import { Transform } from '../../../util/Transform';
 import { DocFocusOptions, DocumentView } from '../DocumentView';
 import { FormattedTextBox } from './FormattedTextBox';
-import React = require('react');
+import * as React from 'react';
 
 export class DashDocView {
     dom: HTMLSpanElement; // container for label and value
diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx
index a914084f9..16622c258 100644
--- a/src/client/views/nodes/formattedText/DashFieldView.tsx
+++ b/src/client/views/nodes/formattedText/DashFieldView.tsx
@@ -16,7 +16,7 @@ import { SchemaTableCell } from '../../collections/collectionSchema/SchemaTableC
 import { OpenWhere } from '../DocumentView';
 import './DashFieldView.scss';
 import { FormattedTextBox } from './FormattedTextBox';
-import React = require('react');
+import * as React from 'react';
 import { Transform } from '../../../util/Transform';
 
 export class DashFieldView {
diff --git a/src/client/views/nodes/formattedText/EquationView.tsx b/src/client/views/nodes/formattedText/EquationView.tsx
index 5e62d94c2..85a33614c 100644
--- a/src/client/views/nodes/formattedText/EquationView.tsx
+++ b/src/client/views/nodes/formattedText/EquationView.tsx
@@ -7,7 +7,7 @@ import { Doc } from '../../../../fields/Doc';
 import { StrCast } from '../../../../fields/Types';
 import './DashFieldView.scss';
 import { FormattedTextBox } from './FormattedTextBox';
-import React = require('react');
+import * as React from 'react';
 
 export class EquationView {
     dom: HTMLDivElement; // container for label and value
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 42e8ace6e..2315cdccb 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -72,7 +72,7 @@ import { RichTextRules } from './RichTextRules';
 import { schema } from './schema_rts';
 import { SummaryView } from './SummaryView';
 import applyDevTools = require('prosemirror-dev-tools');
-import React = require('react');
+import * as React from 'react';
 // setting up cors-anywhere server address
 const translate = setCORS('http://cors-anywhere.herokuapp.com/');
 export const GoogleRef = 'googleDocId';
@@ -1954,7 +1954,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     }
     @computed get sidebarCollection() {
         const renderComponent = (tag: string) => {
-            const ComponentTag = tag === CollectionViewType.Freeform ? CollectionFreeFormView : tag === CollectionViewType.Tree ? CollectionTreeView : tag === 'translation' ? FormattedTextBox : CollectionStackingView;
+            const ComponentTag: any = tag === CollectionViewType.Freeform ? CollectionFreeFormView : tag === CollectionViewType.Tree ? CollectionTreeView : tag === 'translation' ? FormattedTextBox : CollectionStackingView;
             return ComponentTag === CollectionStackingView ? (
                 <SidebarAnnos
                     ref={this._sidebarRef}
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 791a1bfe7..206d96923 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
 import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
diff --git a/src/client/views/nodes/formattedText/SummaryView.tsx b/src/client/views/nodes/formattedText/SummaryView.tsx
index 3355e4529..7ec296ed2 100644
--- a/src/client/views/nodes/formattedText/SummaryView.tsx
+++ b/src/client/views/nodes/formattedText/SummaryView.tsx
@@ -1,7 +1,7 @@
 import { TextSelection } from 'prosemirror-state';
 import { Fragment, Node, Slice } from 'prosemirror-model';
 import * as ReactDOM from 'react-dom/client';
-import React = require('react');
+import * as React from 'react';
 
 // an elidable textblock that collapses when its '<-' is clicked and expands when its '...' anchor is clicked.
 // this node actively edits prosemirror (as opposed to just changing how things are rendered) and thus doesn't
diff --git a/src/client/views/nodes/formattedText/marks_rts.ts b/src/client/views/nodes/formattedText/marks_rts.ts
index 4faef26e2..a342285b0 100644
--- a/src/client/views/nodes/formattedText/marks_rts.ts
+++ b/src/client/views/nodes/formattedText/marks_rts.ts
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { DOMOutputSpec, Fragment, MarkSpec, Node, NodeSpec, Schema, Slice } from 'prosemirror-model';
 import { Doc } from '../../../../fields/Doc';
 
diff --git a/src/client/views/nodes/formattedText/nodes_rts.ts b/src/client/views/nodes/formattedText/nodes_rts.ts
index 4cd2cee52..d023020e1 100644
--- a/src/client/views/nodes/formattedText/nodes_rts.ts
+++ b/src/client/views/nodes/formattedText/nodes_rts.ts
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { DOMOutputSpec, Node, NodeSpec } from 'prosemirror-model';
 import { listItem, orderedList } from 'prosemirror-schema-list';
 import { ParagraphNodeSpec, toParagraphDOM, getParagraphNodeAttrs } from './ParagraphNodeSpec';
diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.tsx b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
index 2b0927148..6753d5051 100644
--- a/src/client/views/nodes/generativeFill/GenerativeFill.tsx
+++ b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
@@ -21,7 +21,7 @@ import { activeColor, canvasSize, eraserColor, freeformRenderSize, newCollection
 import { CursorData, ImageDimensions, Point } from './generativeFillUtils/generativeFillInterfaces';
 import { APISuccess, ImageUtility } from './generativeFillUtils/ImageHandler';
 import { PointerHandler } from './generativeFillUtils/PointerHandler';
-import React = require('react');
+import * as React from 'react';
 
 enum BrushStyle {
     ADD,
diff --git a/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx b/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx
index 10eca358e..185ba2280 100644
--- a/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx
+++ b/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx
@@ -1,5 +1,5 @@
 import './GenerativeFillButtons.scss';
-import React = require('react');
+import * as React from 'react';
 import ReactLoading from 'react-loading';
 import { activeColor } from './generativeFillUtils/generativeFillConstants';
 import { Button, IconButton, Type } from 'browndash-components';
diff --git a/src/client/views/nodes/importBox/ImportElementBox.tsx b/src/client/views/nodes/importBox/ImportElementBox.tsx
index c4c89d8b1..9dc0c5180 100644
--- a/src/client/views/nodes/importBox/ImportElementBox.tsx
+++ b/src/client/views/nodes/importBox/ImportElementBox.tsx
@@ -7,7 +7,7 @@ import { ViewBoxBaseComponent } from '../../DocComponent';
 import { DefaultStyleProvider } from '../../StyleProvider';
 import { DocumentView, DocumentViewInternal } from '../DocumentView';
 import { FieldView, FieldViewProps } from '../FieldView';
-import React = require('react');
+import * as React from 'react';
 
 @observer
 export class ImportElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 2303e4126..786988d8b 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
 import { action, computed, IReactionDisposer, observable, ObservableSet, reaction, runInAction } from 'mobx';
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index f8aebd021..0effb2ccc 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -24,7 +24,7 @@ import { StyleProp } from '../../StyleProvider';
 import { PresBox } from './PresBox';
 import './PresElementBox.scss';
 import { PresMovement } from './PresEnums';
-import React = require('react');
+import * as React from 'react';
 /**
  * This class models the view a document added to presentation will have in the presentation.
  * It involves some functionality for its buttons and options.