cleaned up warnings and errors, working with typescript 20.10

122 files changed, 462 insertions, 491 deletions

diff --git a/src/Utils.ts b/src/Utils.ts
index 4e4414a93..53f02d64d 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -1,12 +1,12 @@
-import v4 = require('uuid/v4');
-import v5 = require('uuid/v5');
+import * as v4 from 'uuid/v4';
+import * as v5 from 'uuid/v5';
 import { ColorState } from 'react-color';
 import * as rp from 'request-promise';
 import { Socket } from 'socket.io';
 import { DocumentType } from './client/documents/DocumentTypes';
 import { Colors } from './client/views/global/globalEnums';
 import { Message } from './server/Message';
-import Color = require('color');
+import * as Color from 'color';
 
 export namespace Utils {
     export let CLICK_TIME = 300;
diff --git a/src/client/Network.ts b/src/client/Network.ts
index 89b31fdca..cdcd5225a 100644
--- a/src/client/Network.ts
+++ b/src/client/Network.ts
@@ -1,5 +1,5 @@
 import { Utils } from '../Utils';
-import requestPromise = require('request-promise');
+import * as requestPromise from 'request-promise';
 import { Upload } from '../server/SharedMediaTypes';
 
 /**
diff --git a/src/client/apis/youtube/YoutubeBox.tsx b/src/client/apis/youtube/YoutubeBox.tsx
index 2da9927c0..ceb80acbc 100644
--- a/src/client/apis/youtube/YoutubeBox.tsx
+++ b/src/client/apis/youtube/YoutubeBox.tsx
@@ -10,7 +10,7 @@ import { DocumentView } from '../../views/nodes/DocumentView';
 import { FieldView, FieldViewProps } from '../../views/nodes/FieldView';
 import '../../views/nodes/WebBox.scss';
 import './YoutubeBox.scss';
-import React = require('react');
+import * as React from 'react';
 
 interface VideoTemplate {
     thumbnailUrl: string;
diff --git a/src/client/util/Import & Export/DirectoryImportBox.tsx b/src/client/util/Import & Export/DirectoryImportBox.tsx
index c45143f43..9113fd832 100644
--- a/src/client/util/Import & Export/DirectoryImportBox.tsx
+++ b/src/client/util/Import & Export/DirectoryImportBox.tsx
@@ -20,7 +20,7 @@ import { FieldView, FieldViewProps } from '../../views/nodes/FieldView';
 import { DocumentManager } from '../DocumentManager';
 import './DirectoryImportBox.scss';
 import ImportMetadataEntry, { keyPlaceholder, valuePlaceholder } from './ImportMetadataEntry';
-import React = require('react');
+import * as React from 'react';
 import _ = require('lodash');
 
 const unsupported = ['text/html', 'text/plain'];
diff --git a/src/client/util/Import & Export/ImportMetadataEntry.tsx b/src/client/util/Import & Export/ImportMetadataEntry.tsx
index 45d8c0c63..58a09b9c9 100644
--- a/src/client/util/Import & Export/ImportMetadataEntry.tsx
+++ b/src/client/util/Import & Export/ImportMetadataEntry.tsx
@@ -1,10 +1,10 @@
-import React = require("react");
-import { observer } from "mobx-react";
-import { EditableView } from "../../views/EditableView";
-import { action, computed } from "mobx";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Doc } from "../../../fields/Doc";
-import { StrCast, BoolCast } from "../../../fields/Types";
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { EditableView } from '../../views/EditableView';
+import { action, computed } from 'mobx';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Doc } from '../../../fields/Doc';
+import { StrCast, BoolCast } from '../../../fields/Types';
 
 interface KeyValueProps {
     Document: Doc;
@@ -12,19 +12,18 @@ interface KeyValueProps {
     next: () => void;
 }
 
-export const keyPlaceholder = "Key";
-export const valuePlaceholder = "Value";
+export const keyPlaceholder = 'Key';
+export const valuePlaceholder = 'Value';
 
 @observer
 export default class ImportMetadataEntry extends React.Component<KeyValueProps> {
-
     private keyRef = React.createRef<EditableView>();
     private valueRef = React.createRef<EditableView>();
     private checkRef = React.createRef<HTMLInputElement>();
 
     @computed
     public get valid() {
-        return (this.key.length > 0 && this.key !== keyPlaceholder) && (this.value.length > 0 && this.value !== valuePlaceholder);
+        return this.key.length > 0 && this.key !== keyPlaceholder && this.value.length > 0 && this.value !== valuePlaceholder;
     }
 
     @computed
@@ -66,7 +65,7 @@ export default class ImportMetadataEntry extends React.Component<KeyValueProps>
         this.valueRef.current && this.valueRef.current.setIsFocused(true);
         this.key.length === 0 && (this.key = keyPlaceholder);
         return true;
-    }
+    };
 
     @action
     updateValue = (newValue: string, shiftDown: boolean) => {
@@ -75,68 +74,45 @@ export default class ImportMetadataEntry extends React.Component<KeyValueProps>
         this.value.length > 0 && shiftDown && this.props.next();
         this.value.length === 0 && (this.value = valuePlaceholder);
         return true;
-    }
+    };
 
     render() {
         const keyValueStyle: React.CSSProperties = {
             paddingLeft: 10,
-            width: "50%",
+            width: '50%',
             opacity: this.valid ? 1 : 0.5,
         };
         return (
             <div
                 style={{
-                    display: "flex",
-                    flexDirection: "row",
+                    display: 'flex',
+                    flexDirection: 'row',
                     paddingBottom: 5,
                     paddingRight: 5,
-                    justifyContent: "center",
-                    alignItems: "center",
-                    alignContent: "center"
-                }}
-            >
-                <input
-                    onChange={e => this.onDataDoc = e.target.checked}
-                    ref={this.checkRef}
-                    style={{ margin: "0 10px 0 15px" }}
-                    type="checkbox"
-                    title={"Add to Data Document?"}
-                    checked={this.onDataDoc}
-                />
-                <div className={"key_container"} style={keyValueStyle}>
-                    <EditableView
-                        ref={this.keyRef}
-                        contents={this.key}
-                        SetValue={this.updateKey}
-                        GetValue={() => ""}
-                        oneLine={true}
-                    />
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    alignContent: 'center',
+                }}>
+                <input onChange={e => (this.onDataDoc = e.target.checked)} ref={this.checkRef} style={{ margin: '0 10px 0 15px' }} type="checkbox" title={'Add to Data Document?'} checked={this.onDataDoc} />
+                <div className={'key_container'} style={keyValueStyle}>
+                    <EditableView ref={this.keyRef} contents={this.key} SetValue={this.updateKey} GetValue={() => ''} oneLine={true} />
                 </div>
-                <div
-                    className={"value_container"}
-                    style={keyValueStyle}>
-                    <EditableView
-                        ref={this.valueRef}
-                        contents={this.value}
-                        SetValue={this.updateValue}
-                        GetValue={() => ""}
-                        oneLine={true}
-                    />
+                <div className={'value_container'} style={keyValueStyle}>
+                    <EditableView ref={this.valueRef} contents={this.value} SetValue={this.updateValue} GetValue={() => ''} oneLine={true} />
                 </div>
-                <div onClick={() => this.props.remove(this)} title={"Delete Entry"}>
+                <div onClick={() => this.props.remove(this)} title={'Delete Entry'}>
                     <FontAwesomeIcon
-                        icon={"plus"}
-                        color={"red"}
-                        size={"1x"}
+                        icon={'plus'}
+                        color={'red'}
+                        size={'1x'}
                         style={{
                             marginLeft: 15,
                             marginRight: 15,
-                            transform: "rotate(45deg)"
+                            transform: 'rotate(45deg)',
                         }}
                     />
                 </div>
             </div>
         );
     }
-
-}
\ No newline at end of file
+}
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index be885312d..a2f5826fe 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { GestureUtils } from '../../pen-gestures/GestureUtils';
 import { Utils } from '../../Utils';
 import './InteractionUtils.scss';
diff --git a/src/client/util/ScrollBox.tsx b/src/client/util/ScrollBox.tsx
index d4620ae3f..785526ab3 100644
--- a/src/client/util/ScrollBox.tsx
+++ b/src/client/util/ScrollBox.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 
 export class ScrollBox extends React.Component<React.PropsWithChildren<{}>> {
     onWheel = (e: React.WheelEvent) => {
diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx
index 16e76694d..412b8ba6e 100644
--- a/src/client/views/AntimodeMenu.tsx
+++ b/src/client/views/AntimodeMenu.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { observable, action, runInAction } from 'mobx';
 import './AntimodeMenu.scss';
 import { StrCast } from '../../fields/Types';
diff --git a/src/client/views/AudioWaveform.tsx b/src/client/views/AudioWaveform.tsx
index c779ce8c4..1fd2fedc3 100644
--- a/src/client/views/AudioWaveform.tsx
+++ b/src/client/views/AudioWaveform.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import axios from 'axios';
 import { action, computed, IReactionDisposer, reaction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -102,7 +102,15 @@ export class AudioWaveform extends React.Component<AudioWaveformProps> {
     render() {
         return (
             <div className="audioWaveform">
-                <Waveform color={Colors.MEDIUM_BLUE_ALT} height={this.waveHeight} barWidth={200 / this.audioBuckets.length} pos={this.props.duration} duration={this.props.duration} peaks={Array.from(this.audioBuckets)} progressColor={Colors.MEDIUM_BLUE_ALT} />
+                <Waveform
+                    color={Colors.MEDIUM_BLUE_ALT}
+                    height={this.waveHeight}
+                    barWidth={200 / this.audioBuckets.length}
+                    pos={this.props.duration}
+                    duration={this.props.duration}
+                    peaks={Array.from(this.audioBuckets)}
+                    progressColor={Colors.MEDIUM_BLUE_ALT}
+                />
             </div>
         );
     }
diff --git a/src/client/views/ComponentDecorations.tsx b/src/client/views/ComponentDecorations.tsx
index 66d1bd63d..0a34b283b 100644
--- a/src/client/views/ComponentDecorations.tsx
+++ b/src/client/views/ComponentDecorations.tsx
@@ -1,14 +1,14 @@
-import { observer } from "mobx-react";
-import { SelectionManager } from "../util/SelectionManager";
+import { observer } from 'mobx-react';
+import { SelectionManager } from '../util/SelectionManager';
 import './ComponentDecorations.scss';
-import React = require("react");
+import * as React from 'react';
 
 @observer
-export class ComponentDecorations extends React.Component<{ boundsTop: number, boundsLeft: number }, { value: string }> {
+export class ComponentDecorations extends React.Component<{ boundsTop: number; boundsLeft: number }, { value: string }> {
     static Instance: ComponentDecorations;
 
     render() {
         const seldoc = SelectionManager.Views().lastElement();
-        return seldoc?.ComponentView?.componentUI?.(this.props.boundsLeft, this.props.boundsTop) ?? (null);
+        return seldoc?.ComponentView?.componentUI?.(this.props.boundsLeft, this.props.boundsTop) ?? null;
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index adefc7e9c..57bc11385 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.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 } from 'mobx';
 import { observer } from 'mobx-react';
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index c2cbca3e1..6d97d965e 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { observable, action, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 59d7e75da..58e30b284 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -27,10 +27,7 @@ import { DashFieldView } from './nodes/formattedText/DashFieldView';
 import { GoogleRef } from './nodes/formattedText/FormattedTextBox';
 import { PinProps } from './nodes/trails';
 import { TemplateMenu } from './TemplateMenu';
-import React = require('react');
-const higflyout = require('@hig/flyout');
-export const { anchorPoints } = higflyout;
-export const Flyout = higflyout.default;
+import * as React from 'react';
 
 const cloud: IconProp = 'cloud-upload-alt';
 const fetch: IconProp = 'sync-alt';
@@ -423,7 +420,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         return !view0 ? null : (
             <Tooltip title={<div className="dash-tooltip">Show metadata panel</div>}>
                 <div className="documentButtonBar-linkFlyout">
-                    <Flyout
+                    {/* <Flyout
                         anchorPoint={anchorPoints.LEFT_TOP}
                         content={
                             <MetadataEntryMenu
@@ -432,12 +429,12 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
                                     .filter(dv => dv)
                                     .map(dv => dv!.props.Document)}
                                 suggestWithFunction
-                            /> /* tfs: @bcz This might need to be the data document? */
+                            /> // tfs: @bcz This might need to be the data document?
                         }>
                         <div className={'documentButtonBar-linkButton-' + 'empty'} onPointerDown={e => e.stopPropagation()}>
                             {<FontAwesomeIcon className="documentdecorations-icon" icon="tag" />}
                         </div>
-                    </Flyout>
+                    </Flyout> */}
                 </div>
             </Tooltip>
         );
@@ -501,7 +498,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         return !view0 ? null : (
             <Tooltip title={<div className="dash-tooltip">Tap to Customize Layout. Drag an embedding</div>} open={this._tooltipOpen} onClose={action(() => (this._tooltipOpen = false))} placement="bottom">
                 <div className="documentButtonBar-linkFlyout" ref={this._dragRef} onPointerEnter={action(() => !this._ref.current?.getBoundingClientRect().width && (this._tooltipOpen = true))}>
-                    <Flyout
+                    {/* <Flyout
                         anchorPoint={anchorPoints.LEFT_TOP}
                         onOpen={action(() => (this._embedDown = true))}
                         onClose={action(() => (this._embedDown = false))}
@@ -516,7 +513,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
                         <div className={'documentButtonBar-linkButton-empty'} ref={this._dragRef} onPointerDown={this.onTemplateButton}>
                             <FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="sm" />
                         </div>
-                    </Flyout>
+                    </Flyout> */}
                 </div>
             </Tooltip>
         );
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index b9fcf5360..b8c77d8d5 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -33,7 +33,7 @@ import { LightboxView } from './LightboxView';
 import { DocumentView, OpenWhereMod } from './nodes/DocumentView';
 import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
 import { ImageBox } from './nodes/ImageBox';
-import React = require('react');
+import * as React from 'react';
 import _ = require('lodash');
 
 @observer
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index abb7ed7ee..edc35047f 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { action, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as Autosuggest from 'react-autosuggest';
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 1deca401d..a3c4350d9 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { action, computed, observable, ObservableMap } from 'mobx';
 import { observer } from 'mobx-react';
 import { Handles, Rail, Slider, Ticks, Tracks } from 'react-compound-slider';
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 559f245d9..9f0a257ca 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import * as fitCurve from 'fit-curve';
 import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
diff --git a/src/client/views/InkControlPtHandles.tsx b/src/client/views/InkControlPtHandles.tsx
index e5141b7f4..b835a3798 100644
--- a/src/client/views/InkControlPtHandles.tsx
+++ b/src/client/views/InkControlPtHandles.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/InkTangentHandles.tsx b/src/client/views/InkTangentHandles.tsx
index 65f6a6dfa..a00c26a07 100644
--- a/src/client/views/InkTangentHandles.tsx
+++ b/src/client/views/InkTangentHandles.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { action } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc } from '../../fields/Doc';
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index e081961e5..13df352e3 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -20,7 +20,7 @@
     
     Most of the operations that can be performed on an InkStroke (eg delete a point, rotate, stretch) are implemented in the InkStrokeProperties helper class
 */
-import React = require('react');
+import * as React from 'react';
 import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc } from '../../fields/Doc';
diff --git a/src/client/views/KeyphraseQueryView.tsx b/src/client/views/KeyphraseQueryView.tsx
index 13d52db88..e996fc946 100644
--- a/src/client/views/KeyphraseQueryView.tsx
+++ b/src/client/views/KeyphraseQueryView.tsx
@@ -1,6 +1,6 @@
-import { observer } from "mobx-react";
-import React = require("react");
-import "./KeyphraseQueryView.scss";
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import './KeyphraseQueryView.scss';
 
 // tslint:disable-next-line: class-name
 export interface KP_Props {
@@ -8,7 +8,7 @@ export interface KP_Props {
 }
 
 @observer
-export class KeyphraseQueryView extends React.Component<KP_Props>{
+export class KeyphraseQueryView extends React.Component<KP_Props> {
     constructor(props: KP_Props) {
         super(props);
     }
@@ -22,13 +22,17 @@ export class KeyphraseQueryView extends React.Component<KP_Props>{
                 <form>
                     {keyterms.map((kp: string) => {
                         //return (<p>{"-" + kp}</p>);
-                        return (<p><label>
-                            <input name="query" type="radio" />
-                            <span>{kp}</span>
-                        </label></p>);
+                        return (
+                            <p>
+                                <label>
+                                    <input name="query" type="radio" />
+                                    <span>{kp}</span>
+                                </label>
+                            </p>
+                        );
                     })}
                 </form>
             </div>
         );
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 58c1570b2..53182497c 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -3,7 +3,7 @@ import { faBuffer, faHireAHelper } from '@fortawesome/free-brands-svg-icons';
 import * as far from '@fortawesome/free-regular-svg-icons';
 import * as fa from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import 'browndash-components/dist/styles/global.min.css';
+import '../../../node_modules/browndash-components/dist/styles/global.min.css';
 import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import 'normalize.css';
diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx
index 70a44a08a..a241e3a2b 100644
--- a/src/client/views/MarqueeAnnotator.tsx
+++ b/src/client/views/MarqueeAnnotator.tsx
@@ -15,7 +15,7 @@ import './MarqueeAnnotator.scss';
 import { DocumentView } from './nodes/DocumentView';
 import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
 import { AnchorMenu } from './pdf/AnchorMenu';
-import React = require('react');
+import * as React from 'react';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 export interface MarqueeAnnotatorProps {
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 6635aabf9..7824ad1c8 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -27,7 +27,7 @@ import { Colors } from './global/globalEnums';
 import { InkingStroke } from './InkingStroke';
 import { DocumentView, OpenWhere } from './nodes/DocumentView';
 import './PropertiesButtons.scss';
-import React = require('react');
+import * as React from 'react';
 
 enum UtilityButtonState {
     Default,
diff --git a/src/client/views/PropertiesSection.tsx b/src/client/views/PropertiesSection.tsx
index bd586b2f9..2b9bfb505 100644
--- a/src/client/views/PropertiesSection.tsx
+++ b/src/client/views/PropertiesSection.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index c5b0528af..86ae67085 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 import { faAnchor, faArrowRight, faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
diff --git a/src/client/views/SidebarAnnos.tsx b/src/client/views/SidebarAnnos.tsx
index 049ba4841..2a52d86c2 100644
--- a/src/client/views/SidebarAnnos.tsx
+++ b/src/client/views/SidebarAnnos.tsx
@@ -16,7 +16,7 @@ import { FieldViewProps } from './nodes/FieldView';
 import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
 import './SidebarAnnos.scss';
 import { StyleProp } from './StyleProvider';
-import React = require('react');
+import * as React from 'react';
 
 interface ExtraProps {
     fieldKey: string;
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 806c9c001..8bd0539ed 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -23,7 +23,7 @@ import { FieldViewProps } from './nodes/FieldView';
 import { KeyValueBox } from './nodes/KeyValueBox';
 import { PropertiesView } from './PropertiesView';
 import './StyleProvider.scss';
-import React = require('react');
+import * as React from 'react';
 
 export enum StyleProp {
     TreeViewIcon = 'treeView_Icon',
diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx
index 6da228417..48653f30a 100644
--- a/src/client/views/TemplateMenu.tsx
+++ b/src/client/views/TemplateMenu.tsx
@@ -13,7 +13,7 @@ import { CollectionTreeView } from './collections/CollectionTreeView';
 import { DocumentView } from './nodes/DocumentView';
 import { DefaultStyleProvider } from './StyleProvider';
 import './TemplateMenu.scss';
-import React = require('react');
+import * as React from 'react';
 
 @observer
 class TemplateToggle extends React.Component<{ template: string; checked: boolean; toggle: (event: React.ChangeEvent<HTMLInputElement>, template: string) => void }> {
diff --git a/src/client/views/TouchScrollableMenu.tsx b/src/client/views/TouchScrollableMenu.tsx
index 969605be9..530c693a7 100644
--- a/src/client/views/TouchScrollableMenu.tsx
+++ b/src/client/views/TouchScrollableMenu.tsx
@@ -1,6 +1,6 @@
-import React = require("react");
-import { computed } from "mobx";
-import { observer } from "mobx-react";
+import * as React from 'react';
+import { computed } from 'mobx';
+import { observer } from 'mobx-react';
 
 export interface TouchScrollableMenuProps {
     options: JSX.Element[];
@@ -24,31 +24,35 @@ export interface TouchScrollableMenuItemProps {
 
 @observer
 export default class TouchScrollableMenu extends React.Component<TouchScrollableMenuProps> {
-
     @computed
-    private get possibilities() { return this.props.options; }
+    private get possibilities() {
+        return this.props.options;
+    }
 
     @computed
-    private get selectedIndex() { return this.props.selectedIndex; }
+    private get selectedIndex() {
+        return this.props.selectedIndex;
+    }
 
     render() {
         return (
-            <div className="inkToTextDoc-cont" style={{
-                transform: `translate(${this.props.x}px, ${this.props.y}px)`,
-                width: 300,
-                height: this.possibilities.length * 25
-            }}>
+            <div
+                className="inkToTextDoc-cont"
+                style={{
+                    transform: `translate(${this.props.x}px, ${this.props.y}px)`,
+                    width: 300,
+                    height: this.possibilities.length * 25,
+                }}>
                 <div className="inkToTextDoc-scroller" style={{ transform: `translate(0, ${-this.selectedIndex * 25}px)` }}>
                     {this.possibilities}
                 </div>
-                <div className="shadow" style={{ height: `calc(100% - 25px - ${this.selectedIndex * 25}px)` }}>
-                </div>
+                <div className="shadow" style={{ height: `calc(100% - 25px - ${this.selectedIndex * 25}px)` }}></div>
             </div>
         );
     }
 }
 
-export class TouchScrollableMenuItem extends React.Component<TouchScrollableMenuItemProps>{
+export class TouchScrollableMenuItem extends React.Component<TouchScrollableMenuItemProps> {
     render() {
         return (
             <div className="menuItem-cont" onClick={this.props.onClick}>
@@ -56,4 +60,4 @@ export class TouchScrollableMenuItem extends React.Component<TouchScrollableMenu
             </div>
         );
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 2e8047309..858090c05 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -30,7 +30,7 @@ import './CollectionDockingView.scss';
 import { CollectionFreeFormView } from './collectionFreeForm';
 import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
 import { TabDocView } from './TabDocView';
-import React = require('react');
+import * as React from 'react';
 import { SettingsManager } from '../../util/SettingsManager';
 const _global = (window /* browser */ || global) /* node */ as any;
 
diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index a9b5f401d..569a76546 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -18,9 +18,6 @@ import { EditableView } from '../EditableView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { CollectionStackingView } from './CollectionStackingView';
 import './CollectionStackingView.scss';
-const higflyout = require('@hig/flyout');
-export const { anchorPoints } = higflyout;
-export const Flyout = higflyout.default;
 
 interface CMVFieldRowProps {
     rows: () => number;
@@ -338,11 +335,11 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                     )}
                     {noChrome || evContents === `NO  ${key.toUpperCase()} VALUE` ? null : (
                         <div className="collectionStackingView-sectionOptions" onPointerDown={e => e.stopPropagation()}>
-                            <Flyout anchorPoint={anchorPoints.RIGHT_TOP} content={this.renderMenu()}>
+                            {/* <Flyout anchorPoint={anchorPoints.RIGHT_TOP} content={this.renderMenu()}>
                                 <button className="collectionStackingView-sectionOptionButton">
                                     <FontAwesomeIcon icon="ellipsis-v" size="lg" />
                                 </button>
-                            </Flyout>
+                            </Flyout> */}
                         </div>
                     )}
                 </div>
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 8b3531da8..2ac9c7bfb 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.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 { Toggle, ToggleType, Type } from 'browndash-components';
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index ad5431c8e..545734e5b 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { CursorProperty } from 'csstype';
 import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index 9e5f09479..9be01df18 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, observable, trace } from 'mobx';
 import { observer } from 'mobx-react';
diff --git a/src/client/views/collections/CollectionPileView.tsx b/src/client/views/collections/CollectionPileView.tsx
index ad8144466..c5677e2ba 100644
--- a/src/client/views/collections/CollectionPileView.tsx
+++ b/src/client/views/collections/CollectionPileView.tsx
@@ -12,7 +12,7 @@ import { computePassLayout, computeStarburstLayout } from './collectionFreeForm'
 import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
 import './CollectionPileView.scss';
 import { CollectionSubView } from './CollectionSubView';
-import React = require('react');
+import * as React from 'react';
 
 @observer
 export class CollectionPileView extends CollectionSubView() {
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index 7fee1cda6..92b5470ae 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 59e0c60b9..e5f71a2f8 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { CursorProperty } from 'csstype';
 import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx';
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index 9bd412fb8..3282eb4b4 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.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, reaction } from 'mobx';
 import { observer } from 'mobx-react';
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index f082ca0da..40b2f9644 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -24,7 +24,7 @@ import { ViewBoxBaseComponent } from '../DocComponent';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { LoadingBox } from '../nodes/LoadingBox';
 import { CollectionView, CollectionViewProps } from './CollectionView';
-import React = require('react');
+import * as React from 'react';
 
 export interface SubCollectionViewProps extends CollectionViewProps {
     isAnyChildContentActive: () => boolean;
diff --git a/src/client/views/collections/CollectionTimeView.tsx b/src/client/views/collections/CollectionTimeView.tsx
index 8d114761a..e65f24702 100644
--- a/src/client/views/collections/CollectionTimeView.tsx
+++ b/src/client/views/collections/CollectionTimeView.tsx
@@ -21,7 +21,7 @@ import { computePivotLayout, computeTimelineLayout, ViewDefBounds } from './coll
 import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
 import { CollectionSubView } from './CollectionSubView';
 import './CollectionTimeView.scss';
-import React = require('react');
+import * as React from 'react';
 
 @observer
 export class CollectionTimeView extends CollectionSubView() {
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 1315decb2..5c165fe70 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -26,7 +26,7 @@ import { CollectionFreeFormView } from './collectionFreeForm';
 import { CollectionSubView } from './CollectionSubView';
 import './CollectionTreeView.scss';
 import { TreeView } from './TreeView';
-import React = require('react');
+import * as React from 'react';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 export type collectionTreeViewProps = {
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index def4beca3..4a1d702b8 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -33,7 +33,7 @@ import { CollectionDockingView } from './CollectionDockingView';
 import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
 import { CollectionView } from './CollectionView';
 import './TabDocView.scss';
-import React = require('react');
+import * as React from 'react';
 import { Docs } from '../../documents/Documents';
 import { ComputedField } from '../../../fields/ScriptField';
 const _global = (window /* browser */ || global) /* node */ as any;
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 0de1068f7..b5666b917 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -35,7 +35,7 @@ import { CollectionTreeView, TreeViewType } from './CollectionTreeView';
 import { CollectionView } from './CollectionView';
 import { TreeSort } from './TreeSort';
 import './TreeView.scss';
-import React = require('react');
+import * as React from 'react';
 
 export interface TreeViewProps {
     treeView: CollectionTreeView;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormBackgroundGrid.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormBackgroundGrid.tsx
index 00505dbe3..99ee5ef4e 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormBackgroundGrid.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormBackgroundGrid.tsx
@@ -2,7 +2,7 @@ import { observer } from 'mobx-react';
 import { Doc } from '../../../../fields/Doc';
 import { NumCast } from '../../../../fields/Types';
 import './CollectionFreeFormView.scss';
-import React = require('react');
+import * as React from 'react';
 
 export interface CollectionFreeFormViewBackgroundGridProps {
     panX: () => number;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
index d6a738084..b8c0967c1 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
@@ -5,7 +5,7 @@ import { RefField } from '../../../../fields/RefField';
 import { listSpec } from '../../../../fields/Schema';
 import { Cast, NumCast, StrCast } from '../../../../fields/Types';
 import { aggregateBounds } from '../../../../Utils';
-import React = require('react');
+import * as React from 'react';
 
 export interface ViewDefBounds {
     type: string;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 0c0d45a30..fac5e849b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -13,7 +13,7 @@ import { SnappingManager } from '../../../util/SnappingManager';
 import { Colors } from '../../global/globalEnums';
 import { DocumentView } from '../../nodes/DocumentView';
 import './CollectionFreeFormLinkView.scss';
-import React = require('react');
+import * as React from 'react';
 
 export interface CollectionFreeFormLinkViewProps {
     A: DocumentView;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index 420e6a318..779a0bf96 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -5,7 +5,7 @@ import { DocumentManager } from '../../../util/DocumentManager';
 import { LightboxView } from '../../LightboxView';
 import './CollectionFreeFormLinksView.scss';
 import { CollectionFreeFormLinkView } from './CollectionFreeFormLinkView';
-import React = require('react');
+import * as React from 'react';
 
 @observer
 export class CollectionFreeFormLinksView extends React.Component {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx
index 38aeea152..f54726a00 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx
@@ -4,7 +4,7 @@ import { Doc } from '../../../../fields/Doc';
 import { ScriptField } from '../../../../fields/ScriptField';
 import { PresBox } from '../../nodes/trails/PresBox';
 import './CollectionFreeFormView.scss';
-import React = require('react');
+import * as React from 'react';
 import { CollectionFreeFormView } from './CollectionFreeFormView';
 
 export interface CollectionFreeFormPannableContentsProps {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx
index 9e8d92d7d..1118c6a72 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx
@@ -9,7 +9,7 @@ import { listSpec } from '../../../../fields/Schema';
 import { Cast } from '../../../../fields/Types';
 import { CollectionViewProps } from '../CollectionView';
 import './CollectionFreeFormView.scss';
-import React = require('react');
+import * as React from 'react';
 import v5 = require('uuid/v5');
 
 @observer
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index d242b1356..fbad01cad 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -50,7 +50,7 @@ import { CollectionFreeFormPannableContents } from './CollectionFreeFormPannable
 import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCursors';
 import './CollectionFreeFormView.scss';
 import { MarqueeView } from './MarqueeView';
-import React = require('react');
+import * as React from 'react';
 
 export type collectionFreeformViewProps = {
     NativeWidth?: () => number;
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
index 607f9fb95..d231197fb 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.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 { observer } from 'mobx-react';
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 18b9b4423..330c13e97 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -24,7 +24,7 @@ import { PreviewCursor } from '../../PreviewCursor';
 import { SubCollectionViewProps } from '../CollectionSubView';
 import { MarqueeOptionsMenu } from './MarqueeOptionsMenu';
 import './MarqueeView.scss';
-import React = require('react');
+import * as React from 'react';
 import { freeformScrollMode } from '../../../util/SettingsManager';
 
 interface MarqueeViewProps {
diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.scss b/src/client/views/collections/collectionLinear/CollectionLinearView.scss
index d0c14a21d..3c2f5ccd7 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.scss
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.scss
@@ -18,9 +18,9 @@
         user-select: none;
     }
 
-    > input:not(:checked) ~ &.true {
-        background-color: transparent;
-    }
+    // > input:not(:checked) ~ &.true {
+    //     background-color: transparent;
+    // }
 
     .collectionLinearView {
         display: flex;
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 030f9953c..029d39f88 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, observable, ObservableMap, observe } from 'mobx';
 import { observer } from 'mobx-react';
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 65e47f441..0e37198bb 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 03697b40a..53f4a4d51 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { IconButton, Size } from 'browndash-components';
 import { computed } from 'mobx';
 import { observer } from 'mobx-react';
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 3082c632d..3d9cf1893 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -6,7 +6,7 @@ import { DocumentView } from '../nodes/DocumentView';
 import { LinkDocPreview } from '../nodes/LinkDocPreview';
 import './LinkMenu.scss';
 import { LinkMenuGroup } from './LinkMenuGroup';
-import React = require('react');
+import * as React from 'react';
 import { SettingsManager } from '../../util/SettingsManager';
 
 interface Props {
diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx
index 5453ed07b..91142b90b 100644
--- a/src/client/views/linking/LinkMenuGroup.tsx
+++ b/src/client/views/linking/LinkMenuGroup.tsx
@@ -7,7 +7,7 @@ import { LinkManager } from '../../util/LinkManager';
 import { DocumentView } from '../nodes/DocumentView';
 import './LinkMenu.scss';
 import { LinkMenuItem } from './LinkMenuItem';
-import React = require('react');
+import * as React from 'react';
 import { DocumentType } from '../../documents/DocumentTypes';
 
 interface LinkMenuGroupProps {
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 611771fff..042acff05 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -17,7 +17,7 @@ import { undoBatch } from '../../util/UndoManager';
 import { DocumentView, DocumentViewInternal, OpenWhere } from '../nodes/DocumentView';
 import { LinkDocPreview } from '../nodes/LinkDocPreview';
 import './LinkMenuItem.scss';
-import React = require('react');
+import * as React from 'react';
 
 interface LinkMenuItemProps {
     groupType: string;
diff --git a/src/client/views/linking/LinkPopup.tsx b/src/client/views/linking/LinkPopup.tsx
index a36c8d778..5460a6daf 100644
--- a/src/client/views/linking/LinkPopup.tsx
+++ b/src/client/views/linking/LinkPopup.tsx
@@ -10,7 +10,7 @@ import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { SearchBox } from '../search/SearchBox';
 import { DefaultStyleProvider } from '../StyleProvider';
 import './LinkPopup.scss';
-import React = require('react');
+import * as React from 'react';
 
 interface LinkPopupProps {
     linkFrom?: () => Doc | undefined;
diff --git a/src/client/views/linking/LinkRelationshipSearch.tsx b/src/client/views/linking/LinkRelationshipSearch.tsx
index 9662b2fea..3e7f5be74 100644
--- a/src/client/views/linking/LinkRelationshipSearch.tsx
+++ b/src/client/views/linking/LinkRelationshipSearch.tsx
@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react';
 import './LinkEditor.scss';
-import React = require('react');
+import * as React from 'react';
 
 interface link_relationshipSearchProps {
     results: string[] | undefined;
diff --git a/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx b/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx
index a085e4a66..23027808f 100644
--- a/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx
+++ b/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx
@@ -25,11 +25,13 @@ export const Recommendation = (props: IRecommendation) => {
                     switch (type) {
                         case 'YouTube':
                             console.log('create ', type, 'document');
-                            doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315, transcript });
+                            doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315 });
+                            doc.transcript = transcript ? JSON.stringify(transcript) : undefined;
                             break;
                         case 'Video':
                             console.log('create ', type, 'document');
-                            doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315, transcript });
+                            doc = Docs.Create.VideoDocument(data, { title: title, _width: 400, _height: 315 });
+                            doc.transcript = transcript ? JSON.stringify(transcript) : undefined;
                             break;
                         case 'Webpage':
                             console.log('create ', type, 'document');
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.
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index d68859e88..35c27d81b 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ColorPicker, Group, IconButton, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components';
 import { action, computed, IReactionDisposer, observable, ObservableMap, reaction } from 'mobx';
diff --git a/src/client/views/pdf/Annotation.tsx b/src/client/views/pdf/Annotation.tsx
index e1e87763c..cf19ff6bc 100644
--- a/src/client/views/pdf/Annotation.tsx
+++ b/src/client/views/pdf/Annotation.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { action, computed } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc, DocListCast, Opt } from '../../../fields/Doc';
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 038c45582..cce67fed2 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import './GPTPopup.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, observable } from 'mobx';
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 33a336de3..b2373b190 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -23,7 +23,7 @@ import { AnchorMenu } from './AnchorMenu';
 import { Annotation } from './Annotation';
 import { GPTPopup } from './GPTPopup/GPTPopup';
 import './PDFViewer.scss';
-import React = require('react');
+import * as React from 'react';
 const PDFJSViewer = require('pdfjs-dist/web/pdf_viewer');
 const pdfjsLib = require('pdfjs-dist');
 const _global = (window /* browser */ || global) /* node */ as any;
diff --git a/src/client/views/search/NaviconButton.scss b/src/client/views/search/NaviconButton.scss
index 8a70b29de..13d31bbe9 100644
--- a/src/client/views/search/NaviconButton.scss
+++ b/src/client/views/search/NaviconButton.scss
@@ -1,4 +1,4 @@
-@import "../global/globalCssVariables";
+@import '../global/globalCssVariables';
 
 $height-icon: 15px;
 $width-line: 30px;
@@ -6,7 +6,7 @@ $height-line: 4px;
 
 $transition-time: 0.4s;
 $rotation: 45deg;
-$translateY: ($height-icon / 2);
+$translateY: calc($height-icon / 2);
 $translateX: 0;
 
 #hamburger-icon {
@@ -25,7 +25,7 @@ $translateX: 0;
         height: $height-line;
         position: absolute;
         left: 0;
-        border-radius: ($height-line / 2);
+        border-radius: calc($height-line / 2);
         transition: all $transition-time;
         -webkit-transition: all $transition-time;
         -moz-transition: all $transition-time;
@@ -66,4 +66,4 @@ $translateX: 0;
     transform: scale(1.1);
     -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
-}
\ No newline at end of file
+}
diff --git a/src/client/views/selectedDoc/SelectedDocView.tsx b/src/client/views/selectedDoc/SelectedDocView.tsx
index 2139919e0..39e778b76 100644
--- a/src/client/views/selectedDoc/SelectedDocView.tsx
+++ b/src/client/views/selectedDoc/SelectedDocView.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ListBox } from 'browndash-components';
 import { computed } from 'mobx';
diff --git a/src/client/views/webcam/DashWebRTCVideo.tsx b/src/client/views/webcam/DashWebRTCVideo.tsx
index 524492226..093806127 100644
--- a/src/client/views/webcam/DashWebRTCVideo.tsx
+++ b/src/client/views/webcam/DashWebRTCVideo.tsx
@@ -11,7 +11,7 @@ import { DocumentView } from '../nodes/DocumentView';
 import { FieldView, FieldViewProps } from '../nodes/FieldView';
 import './DashWebRTCVideo.scss';
 import { hangup, initialize, refreshVideos } from './WebCamLogic';
-import React = require('react');
+import * as React from 'react';
 
 /**
  * This models the component that will be rendered, that can be used as a doc that will reflect the video cams.
diff --git a/src/fields/Schema.ts b/src/fields/Schema.ts
index f035eeb0d..f5e64ae1f 100644
--- a/src/fields/Schema.ts
+++ b/src/fields/Schema.ts
@@ -94,6 +94,7 @@ export function makeStrictInterface<T extends Interface>(schema: T): (doc: Doc)
 }
 
 export function createSchema<T extends Interface>(schema: T): T & { proto: ToConstructor<Doc> } {
+    return undefined as any;
     (schema as any).proto = Doc;
     return schema as any;
 }
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index da38fcaee..fd119e0bf 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -12,38 +12,38 @@ import { List } from '../fields/List';
 import { listSpec } from '../fields/Schema';
 import { Cast } from '../fields/Types';
 import { Utils } from '../Utils';
-import "./ImageUpload.scss";
+import './ImageUpload.scss';
 import { MobileInterface } from './MobileInterface';
-import React = require('react');
+import * as React from 'react';
 
 export interface ImageUploadProps {
     Document: Doc; // Target document for upload (upload location)
 }
 
 const inputRef = React.createRef<HTMLInputElement>();
-const defaultNativeImageDim = Number(DFLT_IMAGE_NATIVE_DIM.replace("px", ""));
+const defaultNativeImageDim = Number(DFLT_IMAGE_NATIVE_DIM.replace('px', ''));
 
 @observer
 export class Uploader extends React.Component<ImageUploadProps> {
-    @observable error: string = "";
-    @observable nm: string = "Choose files"; // Text of 'Choose Files' button
-    @observable process: string = ""; // Current status of upload
+    @observable error: string = '';
+    @observable nm: string = 'Choose files'; // Text of 'Choose Files' button
+    @observable process: string = ''; // Current status of upload
 
     onClick = async () => {
         try {
             const col = this.props.Document;
             await Docs.Prototypes.initialize();
-            const imgPrev = document.getElementById("img_preview");
-            this.setOpacity(1, "1"); // Slab 1
+            const imgPrev = document.getElementById('img_preview');
+            this.setOpacity(1, '1'); // Slab 1
             if (imgPrev) {
                 const files: FileList | null = inputRef.current!.files;
-                this.setOpacity(2, "1"); // Slab 2
+                this.setOpacity(2, '1'); // Slab 2
                 if (files && files.length !== 0) {
-                    this.process = "Uploading Files";
+                    this.process = 'Uploading Files';
                     for (let index = 0; index < files.length; ++index) {
                         const file = files[index];
-                        const res = await Networking.UploadFilesToServer({file});
-                        this.setOpacity(3, "1"); // Slab 3
+                        const res = await Networking.UploadFilesToServer({ file });
+                        this.setOpacity(3, '1'); // Slab 3
                         // For each item that the user has selected
                         res.map(async ({ result }) => {
                             const name = file.name;
@@ -53,19 +53,19 @@ export class Uploader extends React.Component<ImageUploadProps> {
                             const path = result.accessPaths.agnostic.client;
                             let doc = null;
                             // Case 1: File is a video
-                            if (file.type === "video/mp4") {
+                            if (file.type === 'video/mp4') {
                                 doc = Docs.Create.VideoDocument(path, { _nativeWidth: defaultNativeImageDim, _width: 400, title: name });
                                 // Case 2: File is a PDF document
-                            } else if (file.type === "application/pdf") {
+                            } else if (file.type === 'application/pdf') {
                                 doc = Docs.Create.PdfDocument(path, { _nativeWidth: defaultNativeImageDim, _width: 400, title: name });
                                 // Case 3: File is another document type (most likely Image)
                             } else {
                                 doc = Docs.Create.ImageDocument(path, { _nativeWidth: defaultNativeImageDim, _width: 400, title: name });
                             }
-                            this.setOpacity(4, "1"); // Slab 4
-                            const res = await rp.get(Utils.prepend("/getUserDocumentIds"));
+                            this.setOpacity(4, '1'); // Slab 4
+                            const res = await rp.get(Utils.prepend('/getUserDocumentIds'));
                             if (!res) {
-                                throw new Error("No user id returned");
+                                throw new Error('No user id returned');
                             }
                             const field = await DocServer.GetRefField(JSON.parse(res).userDocumentId);
                             let pending: Opt<Doc>;
@@ -76,19 +76,19 @@ export class Uploader extends React.Component<ImageUploadProps> {
                                 const data = await Cast(pending.data, listSpec(Doc));
                                 if (data) data.push(doc);
                                 else pending.data = new List([doc]);
-                                this.setOpacity(5, "1"); // Slab 5
-                                this.process = "File " + (index + 1).toString() + " Uploaded";
-                                this.setOpacity(6, "1"); // Slab 6
+                                this.setOpacity(5, '1'); // Slab 5
+                                this.process = 'File ' + (index + 1).toString() + ' Uploaded';
+                                this.setOpacity(6, '1'); // Slab 6
                             }
-                            if ((index + 1) === files.length) {
-                                this.process = "Uploads Completed";
-                                this.setOpacity(7, "1"); // Slab 7
+                            if (index + 1 === files.length) {
+                                this.process = 'Uploads Completed';
+                                this.setOpacity(7, '1'); // Slab 7
                             }
                         });
                     }
                     // Case in which the user pressed upload and no files were selected
                 } else {
-                    this.process = "No file selected";
+                    this.process = 'No file selected';
                 }
                 // Three seconds after upload the menu will reset
                 setTimeout(this.clearUpload, 3000);
@@ -96,7 +96,7 @@ export class Uploader extends React.Component<ImageUploadProps> {
         } catch (error) {
             this.error = JSON.stringify(error);
         }
-    }
+    };
 
     // Updates label after a files is selected (so user knows a file is uploaded)
     inputLabel = async () => {
@@ -105,46 +105,48 @@ export class Uploader extends React.Component<ImageUploadProps> {
         if (files && files.length === 1) {
             this.nm = files[0].name;
         } else if (files && files.length > 1) {
-            this.nm = files.length.toString() + " files selected";
+            this.nm = files.length.toString() + ' files selected';
         }
-    }
+    };
 
     // Loops through load icons, and resets buttons
     @action
     clearUpload = () => {
         for (let i = 1; i < 8; i++) {
-            this.setOpacity(i, "0.2");
+            this.setOpacity(i, '0.2');
         }
-        this.nm = "Choose files";
+        this.nm = 'Choose files';
 
         if (inputRef.current) {
-            inputRef.current.value = "";
+            inputRef.current.value = '';
         }
-        this.process = "";
-    }
+        this.process = '';
+    };
 
     // Clears the upload and closes the upload menu
     closeUpload = () => {
         this.clearUpload();
         MobileInterface.Instance.toggleUpload();
-    }
+    };
 
     // Handles the setting of the loading bar
     setOpacity = (index: number, opacity: string) => {
-        const slab = document.getElementById("slab" + index);
+        const slab = document.getElementById('slab' + index);
         if (slab) slab.style.opacity = opacity;
-    }
+    };
 
     // Returns the upload interface for mobile
     private get uploadInterface() {
         return (
             <div className="imgupload_cont">
                 <div className="closeUpload" onClick={() => this.closeUpload()}>
-                    <FontAwesomeIcon icon="window-close" size={"lg"} />
+                    <FontAwesomeIcon icon="window-close" size={'lg'} />
                 </div>
-                <FontAwesomeIcon icon="upload" size="lg" style={{ fontSize: "130" }} />
-                <input type="file" accept="application/pdf, video/*,image/*" className={`inputFile ${this.nm !== "Choose files" ? "active" : ""}`} id="input_image_file" ref={inputRef} onChange={this.inputLabel} multiple></input>
-                <label className="file" id="label" htmlFor="input_image_file">{this.nm}</label>
+                <FontAwesomeIcon icon="upload" size="lg" style={{ fontSize: '130' }} />
+                <input type="file" accept="application/pdf, video/*,image/*" className={`inputFile ${this.nm !== 'Choose files' ? 'active' : ''}`} id="input_image_file" ref={inputRef} onChange={this.inputLabel} multiple></input>
+                <label className="file" id="label" htmlFor="input_image_file">
+                    {this.nm}
+                </label>
                 <div className="upload_label" onClick={this.onClick}>
                     Upload
                 </div>
@@ -167,16 +169,6 @@ export class Uploader extends React.Component<ImageUploadProps> {
     @observable private overlayOpacity = 0.4;
 
     render() {
-        return (
-            <MainViewModal
-                contents={this.uploadInterface}
-                isDisplayed={true}
-                interactive={true}
-                dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
-                overlayDisplayedOpacity={this.overlayOpacity}
-                closeOnExternalClick={this.closeUpload}
-            />
-        );
+        return <MainViewModal contents={this.uploadInterface} isDisplayed={true} interactive={true} dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} overlayDisplayedOpacity={this.overlayOpacity} closeOnExternalClick={this.closeUpload} />;
     }
-
-}
\ No newline at end of file
+}
diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx
index 6415099fd..2e595e4bc 100644
--- a/src/mobile/MobileInkOverlay.tsx
+++ b/src/mobile/MobileInkOverlay.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 { DocServer } from '../client/DocServer';
diff --git a/src/server/DashSession/DashSessionAgent.ts b/src/server/DashSession/DashSessionAgent.ts
index 1a5934d8f..2450798aa 100644
--- a/src/server/DashSession/DashSessionAgent.ts
+++ b/src/server/DashSession/DashSessionAgent.ts
@@ -1,18 +1,18 @@
-import { Email, pathFromRoot } from "../ActionUtilities";
-import { red, yellow, green, cyan } from "colors";
-import { get } from "request-promise";
-import { Utils } from "../../Utils";
-import { WebSocket } from "../websocket";
-import { MessageStore } from "../Message";
-import { launchServer, onWindows } from "..";
-import { readdirSync, statSync, createWriteStream, readFileSync, unlinkSync } from "fs";
-import * as Archiver from "archiver";
-import { resolve } from "path";
-import rimraf = require("rimraf");
-import { AppliedSessionAgent, ExitHandler } from "./Session/agents/applied_session_agent";
-import { ServerWorker } from "./Session/agents/server_worker";
-import { Monitor } from "./Session/agents/monitor";
-import { MessageHandler, ErrorLike } from "./Session/agents/promisified_ipc_manager";
+import { Email, pathFromRoot } from '../ActionUtilities';
+import { red, yellow, green, cyan } from 'colors';
+import { get } from 'request-promise';
+import { Utils } from '../../Utils';
+import { WebSocket } from '../websocket';
+import { MessageStore } from '../Message';
+import { launchServer, onWindows } from '..';
+import { readdirSync, statSync, createWriteStream, readFileSync, unlinkSync } from 'fs';
+import * as Archiver from 'archiver';
+import { resolve } from 'path';
+import * as rimraf from 'rimraf';
+import { AppliedSessionAgent, ExitHandler } from './Session/agents/applied_session_agent';
+import { ServerWorker } from './Session/agents/server_worker';
+import { Monitor } from './Session/agents/monitor';
+import { MessageHandler, ErrorLike } from './Session/agents/promisified_ipc_manager';
 
 /**
  * If we're the monitor (master) thread, we should launch the monitor logic for the session.
@@ -20,9 +20,8 @@ import { MessageHandler, ErrorLike } from "./Session/agents/promisified_ipc_mana
  * our job should be to run the server.
  */
 export class DashSessionAgent extends AppliedSessionAgent {
-
-    private readonly signature = "-Dash Server Session Manager";
-    private readonly releaseDesktop = pathFromRoot("../../Desktop");
+    private readonly signature = '-Dash Server Session Manager';
+    private readonly releaseDesktop = pathFromRoot('../../Desktop');
 
     /**
      * The core method invoked when the single master thread is initialized.
@@ -31,13 +30,13 @@ export class DashSessionAgent extends AppliedSessionAgent {
     protected async initializeMonitor(monitor: Monitor): Promise<string> {
         const sessionKey = Utils.GenerateGuid();
         await this.dispatchSessionPassword(sessionKey);
-        monitor.addReplCommand("pull", [], () => monitor.exec("git pull"));
-        monitor.addReplCommand("solr", [/start|stop|index/], this.executeSolrCommand);
-        monitor.addReplCommand("backup", [], this.backup);
-        monitor.addReplCommand("debug", [/\S+\@\S+/], async ([to]) => this.dispatchZippedDebugBackup(to));
-        monitor.on("backup", this.backup);
-        monitor.on("debug", async ({ to }) => this.dispatchZippedDebugBackup(to));
-        monitor.on("delete", WebSocket.doDelete);
+        monitor.addReplCommand('pull', [], () => monitor.exec('git pull'));
+        monitor.addReplCommand('solr', [/start|stop|index/], this.executeSolrCommand);
+        monitor.addReplCommand('backup', [], this.backup);
+        monitor.addReplCommand('debug', [/\S+\@\S+/], async ([to]) => this.dispatchZippedDebugBackup(to));
+        monitor.on('backup', this.backup);
+        monitor.on('debug', async ({ to }) => this.dispatchZippedDebugBackup(to));
+        monitor.on('delete', WebSocket.doDelete);
         monitor.coreHooks.onCrashDetected(this.dispatchCrashReport);
         return sessionKey;
     }
@@ -58,13 +57,13 @@ export class DashSessionAgent extends AppliedSessionAgent {
     private _remoteDebugInstructions: string | undefined;
     private generateDebugInstructions = (zipName: string, target: string): string => {
         if (!this._remoteDebugInstructions) {
-            this._remoteDebugInstructions = readFileSync(resolve(__dirname, "./templates/remote_debug_instructions.txt"), { encoding: "utf8" });
+            this._remoteDebugInstructions = readFileSync(resolve(__dirname, './templates/remote_debug_instructions.txt'), { encoding: 'utf8' });
         }
         return this._remoteDebugInstructions
             .replace(/__zipname__/, zipName)
             .replace(/__target__/, target)
             .replace(/__signature__/, this.signature);
-    }
+    };
 
     /**
      * Prepares the body of the email with information regarding a crash event.
@@ -72,12 +71,12 @@ export class DashSessionAgent extends AppliedSessionAgent {
     private _crashInstructions: string | undefined;
     private generateCrashInstructions({ name, message, stack }: ErrorLike): string {
         if (!this._crashInstructions) {
-            this._crashInstructions = readFileSync(resolve(__dirname, "./templates/crash_instructions.txt"), { encoding: "utf8" });
+            this._crashInstructions = readFileSync(resolve(__dirname, './templates/crash_instructions.txt'), { encoding: 'utf8' });
         }
         return this._crashInstructions
-            .replace(/__name__/, name || "[no error name found]")
-            .replace(/__message__/, message || "[no error message found]")
-            .replace(/__stack__/, stack || "[no error stack found]")
+            .replace(/__name__/, name || '[no error name found]')
+            .replace(/__message__/, message || '[no error message found]')
+            .replace(/__stack__/, stack || '[no error stack found]')
             .replace(/__signature__/, this.signature);
     }
 
@@ -88,23 +87,19 @@ export class DashSessionAgent extends AppliedSessionAgent {
     private dispatchSessionPassword = async (sessionKey: string): Promise<void> => {
         const { mainLog } = this.sessionMonitor;
         const { notificationRecipient } = DashSessionAgent;
-        mainLog(green("dispatching session key..."));
+        mainLog(green('dispatching session key...'));
         const error = await Email.dispatch({
             to: notificationRecipient,
-            subject: "Dash Release Session Admin Authentication Key",
-            content: [
-                `Here's the key for this session (started @ ${new Date().toUTCString()}):`,
-                sessionKey,
-                this.signature
-            ].join("\n\n")
+            subject: 'Dash Release Session Admin Authentication Key',
+            content: [`Here's the key for this session (started @ ${new Date().toUTCString()}):`, sessionKey, this.signature].join('\n\n'),
         });
         if (error) {
             this.sessionMonitor.mainLog(red(`dispatch failure @ ${notificationRecipient} (${yellow(error.message)})`));
-            mainLog(red("distribution of session key experienced errors"));
+            mainLog(red('distribution of session key experienced errors'));
         } else {
-            mainLog(green("successfully distributed session key to recipients"));
+            mainLog(green('successfully distributed session key to recipients'));
         }
-    }
+    };
 
     /**
      * This sends an email with the generated crash report.
@@ -114,37 +109,37 @@ export class DashSessionAgent extends AppliedSessionAgent {
         const { notificationRecipient } = DashSessionAgent;
         const error = await Email.dispatch({
             to: notificationRecipient,
-            subject: "Dash Web Server Crash",
-            content: this.generateCrashInstructions(crashCause)
+            subject: 'Dash Web Server Crash',
+            content: this.generateCrashInstructions(crashCause),
         });
         if (error) {
             this.sessionMonitor.mainLog(red(`dispatch failure @ ${notificationRecipient} ${yellow(`(${error.message})`)}`));
-            mainLog(red("distribution of crash notification experienced errors"));
+            mainLog(red('distribution of crash notification experienced errors'));
         } else {
-            mainLog(green("successfully distributed crash notification to recipients"));
+            mainLog(green('successfully distributed crash notification to recipients'));
         }
-    }
+    };
 
     /**
-     * Logic for interfacing with Solr. Either starts it, 
+     * Logic for interfacing with Solr. Either starts it,
      * stops it, or rebuilds its indices.
      */
     private executeSolrCommand = async (args: string[]): Promise<void> => {
         const { exec, mainLog } = this.sessionMonitor;
         const action = args[0];
-        if (action === "index") {
-            exec("npx ts-node ./updateSearch.ts", { cwd: pathFromRoot("./src/server") });
+        if (action === 'index') {
+            exec('npx ts-node ./updateSearch.ts', { cwd: pathFromRoot('./src/server') });
         } else {
-            const command = `${onWindows ? "solr.cmd" : "solr"} ${args[0] === "start" ? "start" : "stop -p 8983"}`;
-            await exec(command, { cwd: "./solr-8.3.1/bin" });
+            const command = `${onWindows ? 'solr.cmd' : 'solr'} ${args[0] === 'start' ? 'start' : 'stop -p 8983'}`;
+            await exec(command, { cwd: './solr-8.3.1/bin' });
             try {
-                await get("http://localhost:8983");
-                mainLog(green("successfully connected to 8983 after running solr initialization"));
+                await get('http://localhost:8983');
+                mainLog(green('successfully connected to 8983 after running solr initialization'));
             } catch {
-                mainLog(red("unable to connect at 8983 after running solr initialization"));
+                mainLog(red('unable to connect at 8983 after running solr initialization'));
             }
         }
-    }
+    };
 
     /**
      * Broadcast to all clients that their connection
@@ -153,16 +148,16 @@ export class DashSessionAgent extends AppliedSessionAgent {
     private notifyClient: ExitHandler = reason => {
         const { _socket } = WebSocket;
         if (_socket) {
-            const message = typeof reason === "boolean" ? (reason ? "exit" : "temporary") : "crash";
+            const message = typeof reason === 'boolean' ? (reason ? 'exit' : 'temporary') : 'crash';
             Utils.Emit(_socket, MessageStore.ConnectionTerminated, message);
         }
-    }
+    };
 
     /**
      * Performs a backup of the database, saved to the desktop subdirectory.
      * This should work as is only on our specific release server.
      */
-    private backup = async (): Promise<void> => this.sessionMonitor.exec("backup.bat", { cwd: this.releaseDesktop });
+    private backup = async (): Promise<void> => this.sessionMonitor.exec('backup.bat', { cwd: this.releaseDesktop });
 
     /**
      * Compress either a brand new backup or the most recent backup and send it
@@ -175,15 +170,17 @@ export class DashSessionAgent extends AppliedSessionAgent {
         try {
             // if desired, complete an immediate backup to send
             await this.backup();
-            mainLog("backup complete");
+            mainLog('backup complete');
 
             const backupsDirectory = `${this.releaseDesktop}/backups`;
 
             // sort all backups by their modified time, and choose the most recent one
-            const target = readdirSync(backupsDirectory).map(filename => ({
-                modifiedTime: statSync(`${backupsDirectory}/${filename}`).mtimeMs,
-                filename
-            })).sort((a, b) => b.modifiedTime - a.modifiedTime)[0].filename;
+            const target = readdirSync(backupsDirectory)
+                .map(filename => ({
+                    modifiedTime: statSync(`${backupsDirectory}/${filename}`).mtimeMs,
+                    filename,
+                }))
+                .sort((a, b) => b.modifiedTime - a.modifiedTime)[0].filename;
             mainLog(`targeting ${target}...`);
 
             // create a zip file and to it, write the contents of the backup directory
@@ -202,28 +199,25 @@ export class DashSessionAgent extends AppliedSessionAgent {
                 to,
                 subject: `Remote debug: compressed backup of ${target}...`,
                 content: this.generateDebugInstructions(zipName, target),
-                attachments: [{ filename: zipName, path: zipPath }]
+                attachments: [{ filename: zipName, path: zipPath }],
             });
 
-            // since this is intended to be a zero-footprint operation, clean up 
+            // since this is intended to be a zero-footprint operation, clean up
             // by unlinking both the backup generated earlier in the function and the compressed zip file.
             // to generate a persistent backup, just run backup.
             unlinkSync(zipPath);
             rimraf.sync(targetPath);
 
             // indicate success or failure
-            mainLog(`${error === null ? green("successfully dispatched") : red("failed to dispatch")} ${zipName} to ${cyan(to)}`);
+            mainLog(`${error === null ? green('successfully dispatched') : red('failed to dispatch')} ${zipName} to ${cyan(to)}`);
             error && mainLog(red(error.message));
         } catch (error: any) {
-            mainLog(red("unable to dispatch zipped backup..."));
+            mainLog(red('unable to dispatch zipped backup...'));
             mainLog(red(error.message));
         }
     }
-
 }
 
 export namespace DashSessionAgent {
-
-    export const notificationRecipient = "browndashptc@gmail.com";
-
+    export const notificationRecipient = 'browndashptc@gmail.com';
 }
diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts
index 2053ae448..fa29cb7c1 100644
--- a/src/server/DashUploadUtils.ts
+++ b/src/server/DashUploadUtils.ts
@@ -14,8 +14,8 @@ import { createIfNotExists } from './ActionUtilities';
 import { clientPathToFile, Directory, pathToDirectory, serverPathToFile } from './ApiManagers/UploadManager';
 import { resolvedServerUrl } from './server_Initialization';
 import { AcceptableMedia, Upload } from './SharedMediaTypes';
-import request = require('request-promise');
-import formidable = require('formidable');
+import * as request from 'request-promise';
+import * as formidable from 'formidable';
 import { AzureManager } from './ApiManagers/AzureManager';
 import axios from 'axios';
 const spawn = require('child_process').spawn;
@@ -366,7 +366,7 @@ export namespace DashUploadUtils {
     }
 
     export interface ImageResizer {
-        width?: any; // sharp.Sharp;
+        width: number;
         suffix: SizeSuffix;
     }
 
@@ -622,7 +622,7 @@ export namespace DashUploadUtils {
      */
     export function imageResampleSizes(ext: string): DashUploadUtils.ImageResizer[] {
         return [
-            { suffix: SizeSuffix.Original },
+            { suffix: SizeSuffix.Original, width: 0 },
             ...[...(AcceptableMedia.imageFormats.includes(ext.toLowerCase()) ? Object.values(DashUploadUtils.Sizes) : [])].map(({ suffix, width }) => ({
                 width,
                 suffix,
diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts
index 23e4680fd..f5189ddf1 100644
--- a/src/typings/index.d.ts
+++ b/src/typings/index.d.ts
@@ -13,6 +13,10 @@ declare module 'reveal';
 declare module 'react-reveal';
 declare module 'react-reveal/makeCarousel';
 declare module 'react-resizable-rotatable-draggable';
+declare module 'socket.io-parser' {
+    type Encoder = any;
+    type Decoder = any;
+}
 
 declare module '@react-pdf/renderer' {
     import * as React from 'react';