Merge branch 'moreUpgrading' into dataViz-annotations

1 files changed, 51 insertions, 38 deletions

diff --git a/src/client/views/ScriptingRepl.tsx b/src/client/views/ScriptingRepl.tsx
index 9966dbced..acf0ecff4 100644
--- a/src/client/views/ScriptingRepl.tsx
+++ b/src/client/views/ScriptingRepl.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, observable } from 'mobx';
+import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { DocumentManager } from '../util/DocumentManager';
@@ -7,31 +7,39 @@ import { CompileScript, Transformer, ts } from '../util/Scripting';
 import { ScriptingGlobals } from '../util/ScriptingGlobals';
 import { SettingsManager } from '../util/SettingsManager';
 import { undoable } from '../util/UndoManager';
-import { DocumentIconContainer } from './nodes/DocumentIcon';
+import { ObservableReactComponent } from './ObservableReactComponent';
 import { OverlayView } from './OverlayView';
 import './ScriptingRepl.scss';
+import { DocumentIconContainer } from './nodes/DocumentIcon';
 
-@observer
-export class ScriptingObjectDisplay extends React.Component<{ scrollToBottom: () => void; value: { [key: string]: any }; name?: string }> {
+interface ReplProps {
+    scrollToBottom: () => void;
+    value: { [key: string]: any };
+    name?: string;
+}
+export class ScriptingObjectDisplay extends ObservableReactComponent<ReplProps> {
     @observable collapsed = true;
 
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+
     @action
     toggle = () => {
         this.collapsed = !this.collapsed;
-        this.props.scrollToBottom();
+        this._props.scrollToBottom();
     };
 
     render() {
-        const val = this.props.value;
+        const val = this._props.value;
         const proto = Object.getPrototypeOf(val);
         const name = (proto && proto.constructor && proto.constructor.name) || String(val);
-        const title = this.props.name ? (
+        const title = (
             <>
-                <b>{this.props.name} : </b>
+                {this.props.name ? <b>{this._props.name} : </b> : <></>}
                 {name}
             </>
-        ) : (
-            name
         );
         if (this.collapsed) {
             return (
@@ -53,7 +61,7 @@ export class ScriptingObjectDisplay extends React.Component<{ scrollToBottom: ()
                     </div>
                     <div className="scriptingObject-fields">
                         {Object.keys(val).map(key => (
-                            <ScriptingValueDisplay {...this.props} name={key} />
+                            <ScriptingValueDisplay {...this._props} name={key} />
                         ))}
                     </div>
                 </div>
@@ -62,40 +70,43 @@ export class ScriptingObjectDisplay extends React.Component<{ scrollToBottom: ()
     }
 }
 
+interface replValueProps {
+    scrollToBottom: () => void;
+    value: any;
+    name?: string;
+}
 @observer
-export class ScriptingValueDisplay extends React.Component<{ scrollToBottom: () => void; value: any; name?: string }> {
+export class ScriptingValueDisplay extends ObservableReactComponent<replValueProps> {
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+
     render() {
-        const val = this.props.name ? this.props.value[this.props.name] : this.props.value;
+        const val = this._props.name ? this._props.value[this._props.name] : this._props.value;
+        const title = (name: string) => (
+            <>
+                {this._props.name ? <b>{this._props.name} : </b> : <> </>}
+                {name}
+            </>
+        );
         if (typeof val === 'object') {
-            return <ScriptingObjectDisplay scrollToBottom={this.props.scrollToBottom} value={val} name={this.props.name} />;
+            return <ScriptingObjectDisplay scrollToBottom={this._props.scrollToBottom} value={val} name={this._props.name} />;
         } else if (typeof val === 'function') {
             const name = '[Function]';
-            const title = this.props.name ? (
-                <>
-                    <b>{this.props.name} : </b>
-                    {name}
-                </>
-            ) : (
-                name
-            );
-            return <div className="scriptingObject-leaf">{title}</div>;
-        } else {
-            const name = String(val);
-            const title = this.props.name ? (
-                <>
-                    <b>{this.props.name} : </b>
-                    {name}
-                </>
-            ) : (
-                name
-            );
-            return <div className="scriptingObject-leaf">{title}</div>;
+            return <div className="scriptingObject-leaf">{title('[Function]')}</div>;
         }
+        return <div className="scriptingObject-leaf">{title(String(val))}</div>;
     }
 }
 
 @observer
-export class ScriptingRepl extends React.Component {
+export class ScriptingRepl extends ObservableReactComponent<{}> {
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+
     @observable private commands: { command: string; result: any }[] = [];
     private commandsHistory: string[] = [];
 
@@ -136,7 +147,8 @@ export class ScriptingRepl extends React.Component {
                                     const m = parseInt(match[1]);
                                     usedDocuments.push(m);
                                 } else {
-                                    return ts.createPropertyAccess(ts.createIdentifier('args'), node);
+                                    return ts.factory.createPropertyAccessExpression(ts.factory.createIdentifier('args'), node);
+                                    //  ts.createPropertyAccess(ts.createIdentifier('args'), node);
                                 }
                             }
                         }
@@ -156,7 +168,7 @@ export class ScriptingRepl extends React.Component {
             case 'Enter': {
                 e.stopPropagation();
                 const docGlobals: { [name: string]: any } = {};
-                DocumentManager.Instance.DocumentViews.forEach((dv, i) => (docGlobals[`d${i}`] = dv.props.Document));
+                DocumentManager.Instance.DocumentViews.forEach((dv, i) => (docGlobals[`d${i}`] = dv.Document));
                 const globals = ScriptingGlobals.makeMutableGlobalsCopy(docGlobals);
                 const script = CompileScript(this.commandString, { typecheck: false, addReturn: true, editable: true, params: { args: 'any' }, transformer: this.getTransformer(), globals });
                 if (!script.compiled) {
@@ -228,7 +240,8 @@ export class ScriptingRepl extends React.Component {
         ele && ele.scroll({ behavior: 'auto', top: ele.scrollHeight });
     }
 
-    componentDidUpdate() {
+    componentDidUpdate(prevProps: Readonly<{}>) {
+        super.componentDidUpdate(prevProps);
         if (this.shouldScroll) {
             this.shouldScroll = false;
             this.scrollToBottom();