1 files changed, 21 insertions, 16 deletions

diff --git a/src/client/views/nodes/FunctionPlotBox.tsx b/src/client/views/nodes/FunctionPlotBox.tsx
index 5ed5fa8fd..a04c27e01 100644
--- a/src/client/views/nodes/FunctionPlotBox.tsx
+++ b/src/client/views/nodes/FunctionPlotBox.tsx
@@ -1,5 +1,5 @@
 import functionPlot from 'function-plot';
-import { action, computed, reaction } from 'mobx';
+import { action, computed, makeObservable, override, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, DocListCast } from '../../../fields/Doc';
@@ -9,19 +9,14 @@ import { List } from '../../../fields/List';
 import { createSchema, listSpec, makeInterface } from '../../../fields/Schema';
 import { Cast, StrCast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
+import { copyProps } from '../../../Utils';
 import { Docs } from '../../documents/Documents';
 import { DragManager } from '../../util/DragManager';
 import { undoBatch } from '../../util/UndoManager';
 import { ViewBoxAnnotatableComponent } from '../DocComponent';
-import { DocFocusOptions, DocumentView } from './DocumentView';
 import { FieldView, FieldViewProps } from './FieldView';
 import { PinProps, PresBox } from './trails';
 
-const EquationSchema = createSchema({});
-
-type EquationDocument = makeInterface<[typeof EquationSchema, typeof documentSchema]>;
-const EquationDocument = makeInterface(EquationSchema, documentSchema);
-
 @observer
 export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     public static LayoutString(fieldKey: string) {
@@ -31,12 +26,22 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>
     _plot: any;
     _plotId = '';
     _plotEle: any;
-    constructor(props: any) {
+
+    _prevProps: React.PropsWithChildren<FieldViewProps>;
+    @override _props: React.PropsWithChildren<FieldViewProps>;
+    constructor(props: React.PropsWithChildren<FieldViewProps>) {
         super(props);
+        this._props = this._prevProps = props;
+        makeObservable(this);
         this._plotId = 'graph' + FunctionPlotBox.GraphCount++;
     }
+
+    componentDidUpdate() {
+        copyProps(this);
+    }
+
     componentDidMount() {
-        this.props.setContentView?.(this);
+        this._props.setContentView?.(this);
         reaction(
             () => [DocListCast(this.dataDoc[this.fieldKey]).map(doc => doc?.text), this.layoutDoc.width, this.layoutDoc.height, this.layoutDoc.xRange, this.layoutDoc.yRange],
             () => this.createGraph()
@@ -52,8 +57,8 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>
     };
     createGraph = (ele?: HTMLDivElement) => {
         this._plotEle = ele || this._plotEle;
-        const width = this.props.PanelWidth();
-        const height = this.props.PanelHeight();
+        const width = this._props.PanelWidth();
+        const height = this._props.PanelHeight();
         const fns = DocListCast(this.dataDoc.data).map(doc => StrCast(doc.text, 'x^2').replace(/\\frac\{(.*)\}\{(.*)\}/, '($1/$2)'));
         try {
             this._plotEle.children.length && this._plotEle.removeChild(this._plotEle.children[0]);
@@ -77,7 +82,7 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>
     @undoBatch
     drop = (e: Event, de: DragManager.DropEvent) => {
         if (de.complete.docDragData?.droppedDocuments.length) {
-            const added = de.complete.docDragData.droppedDocuments.reduce((res, doc) => res && Doc.AddDocToList(this.dataDoc, this.props.fieldKey, doc), true);
+            const added = de.complete.docDragData.droppedDocuments.reduce((res, doc) => res && Doc.AddDocToList(this.dataDoc, this._props.fieldKey, doc), true);
             !added && e.preventDefault();
             e.stopPropagation(); // prevent parent Doc from registering new position so that it snaps back into place
             return added;
@@ -102,14 +107,14 @@ export class FunctionPlotBox extends ViewBoxAnnotatableComponent<FieldViewProps>
             <div
                 ref={this.createDropTarget}
                 style={{
-                    pointerEvents: !this.props.isContentActive() ? 'all' : undefined,
-                    width: this.props.PanelWidth(),
-                    height: this.props.PanelHeight(),
+                    pointerEvents: !this._props.isContentActive() ? 'all' : undefined,
+                    width: this._props.PanelWidth(),
+                    height: this._props.PanelHeight(),
                 }}>
                 {this.theGraph}
                 <div
                     style={{
-                        display: this.props.isSelected() ? 'none' : undefined,
+                        display: this._props.isSelected() ? 'none' : undefined,
                         position: 'absolute',
                         width: '100%',
                         height: '100%',