Template graph scaffolding

This is still in progress, but just laying out a few more things as I
want to keep the ball rolling here. I have the expression inside the new
template graph class - next step is just to render it in the jsxgraph
view.

Author: nikolas

media/js/src/GraphEditor.jsx

@@ -7,6 +7,7 @@ import NonLinearDemandSupplyEditor from './editors/NonLinearDemandSupplyEditor.j
 import ConsumptionLeisureEditor from './editors/ConsumptionLeisureEditor.jsx';
 import ConsumptionSavingEditor from './editors/ConsumptionSavingEditor.jsx';
 import DemandSupplyEditor from './editors/DemandSupplyEditor.jsx';
+import TemplateGraphEditor from './editors/TemplateGraphEditor.jsx';
 import CommonGraphEditor from './editors/CommonGraphEditor.jsx';
 import CommonGraphSettings from './editors/CommonGraphSettings.jsx';
 import JXGBoard from './JXGBoard.jsx';
@@ -245,6 +246,13 @@ export default class GraphEditor extends React.Component {
                     {...commonEditorProps}
                     {...this.props}
                 />;
+        } else if (this.props.gType === 16) {
+            // Template Graph: free-form equations
+            rightSide =
+                <TemplateGraphEditor
+                    {...commonEditorProps}
+                    {...this.props}
+                />;
         }
 
         return (
@@ -380,6 +388,7 @@ GraphEditor.propTypes = {
     gNName: PropTypes.string,
 
     gFunctionChoice: PropTypes.number,
+    gExpression: PropTypes.string,
 
     gAreaConfiguration: PropTypes.number,
     gIsAreaDisplayed: PropTypes.bool,

media/js/src/GraphMapping.js

@@ -104,7 +104,9 @@ const exportGraph = function(state) {
 
         area_a_name: state.gAreaAName,
         area_b_name: state.gAreaBName,
-        area_c_name: state.gAreaCName
+        area_c_name: state.gAreaCName,
+
+        expression: state.gExpression
     };
 
     if (state.gType === 3 || state.gType === 12) {
@@ -215,7 +217,9 @@ const convertGraph = function(json) {
 
         gAreaAName: json.area_a_name,
         gAreaBName: json.area_b_name,
-        gAreaCName: json.area_c_name
+        gAreaCName: json.area_c_name,
+
+        gExpression: json.expression
     };
 };
 
@@ -315,7 +319,10 @@ const importGraph = function(json, obj, callback=null) {
 
         gAreaAName: json.area_a_name,
         gAreaBName: json.area_b_name,
-        gAreaCName: json.area_c_name
+        gAreaCName: json.area_c_name,
+
+        // TODO: enable this when expression back-end is in place.
+        // gExpression: json.expression
     };
 
     // When importing a graph for display, save the initial state of
@@ -572,6 +579,8 @@ const defaultGraph = {
     gAreaBName: 'B',
     gAreaCName: 'C',
 
+    gExpression: 'x',
+
     // Use a hard-coded proof-of-concept assessment spreadsheet for
     // now. Eventually, this will be defined using a Google
     // Spreadsheet, or some react-spreadsheet component with its data
@@ -581,4 +590,8 @@ const defaultGraph = {
     assessment: []
 };
 
-export { convertGraph, exportGraph, importGraph, defaultGraph, defaultEvaluation, defaultModificationEvaluation, defaultLabelEvaluation };
+export {
+    convertGraph, exportGraph, importGraph, defaultGraph,
+    defaultEvaluation, defaultModificationEvaluation,
+    defaultLabelEvaluation
+};

media/js/src/GraphViewer.jsx

@@ -9,6 +9,7 @@ import ConsumptionLeisureEditor from './editors/ConsumptionLeisureEditor.jsx';
 import ConsumptionSavingEditor from './editors/ConsumptionSavingEditor.jsx';
 import DemandSupplyEditor from './editors/DemandSupplyEditor.jsx';
 import NonLinearDemandSupplyEditor from './editors/NonLinearDemandSupplyEditor.jsx';
+import TemplateGraphEditor from './editors/TemplateGraphEditor.jsx';
 import ExportGraphButton from './buttons/ExportGraphButton.jsx';
 import ResetGraphButton from './buttons/ResetGraphButton.jsx';
 import SubmitButton from './buttons/SubmitButton.jsx';
@@ -187,6 +188,13 @@ export default class GraphViewer extends React.Component {
                         {...commonViewerProps}
                         {...this.props}
                     />;
+            } else if (this.props.gType === 16) {
+                // Template Graph: free-form equations
+                rightSide =
+                    <TemplateGraphEditor
+                        {...commonViewerProps}
+                        {...this.props}
+                    />;
             }
 
             // Show side-by-side view here.
@@ -447,6 +455,7 @@ GraphViewer.propTypes = {
     gNName: PropTypes.string,
 
     gFunctionChoice: PropTypes.number,
+    gExpression: PropTypes.string,
 
     assessment: PropTypes.array,
     submission: PropTypes.object,

media/js/src/JXGBoard.jsx

@@ -262,7 +262,9 @@ export default class JXGBoard extends React.Component {
             'gCobbDouglasAlpha', 'gCobbDouglasAlphaInitial', 'gNName',
             'gFunctionChoice', 'gAreaConfiguration',
             'gAreaConfigurationInitial', 'gIsAreaDisplayed', 'gAreaAName',
-            'gAreaBName', 'gAreaCName', 'gNeedsSubmit', 'submission',
+            'gAreaBName', 'gAreaCName',
+            'gExpression',
+            'gNeedsSubmit', 'submission',
             'shadow'
         ];
 
@@ -704,6 +706,8 @@ JXGBoard.propTypes = {
     gAreaBName: PropTypes.string,
     gAreaCName: PropTypes.string,
 
+    gExpression: PropTypes.string,
+
     id: PropTypes.string.isRequired,
     locked: PropTypes.bool
 };

media/js/src/Viewer.jsx

@@ -130,6 +130,8 @@ class Viewer extends Component {
                     gAreaBName={this.state.gAreaBName}
                     gAreaCName={this.state.gAreaCName}
 
+                    gExpression={this.state.gExpression}
+
                     updateDisplayIntersection={this.updateDisplayIntersection.bind(this)}
                     updateGraph={this.handleGraphUpdate.bind(this)}
                     saveGraph={this.handleSaveGraph.bind(this)}
@@ -268,6 +270,8 @@ class Viewer extends Component {
                     gAreaBName={this.state.gAreaBName}
                     gAreaCName={this.state.gAreaCName}
 
+                    gExpression={this.state.gExpression}
+
                     assessment={this.state.assessment}
                     submission={this.state.submission}
                     updateGraph={this.handleGraphUpdate.bind(this)}

media/js/src/editors/TemplateGraphEditor.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MathComponent } from 'mathjax-react';
+
+import EditableControl from '../form-components/EditableControl.js';
+import { handleFormUpdate } from '../utils.js';
+
+export default class TemplateGraphEditor extends React.Component {
+    render() {
+        const func1 = String.raw`MP_N = (1 - \alpha)AK^\alpha N^{-\alpha}`;
+        const func2 = String.raw`MP_K = \alpha AK^{\alpha - 1} N^{1 - \alpha}`;
+
+        return (
+            <>
+                <div className="d-flex flex-wrap">
+                    <div className="row">
+                        <div className="col">
+                            <label
+                                className="form-check-label me-2"
+                                htmlFor="gExpression">
+                                <MathComponent tex="y = " />
+                            </label>
+                            <EditableControl
+                                id="gExpression"
+                                name="Expression"
+                                value={this.props.gExpression}
+                                valueEditable={true}
+                                isInstructor={this.props.isInstructor}
+                                disabled={this.props.disabled}
+                                updateGraph={this.props.updateGraph} />
+                        </div>
+                    </div>
+                </div>
+
+                <h3 className="mt-3">
+                    NLDS Function
+                </h3>
+
+                <div className="row">
+                    <div className="form-check">
+                        <input
+                            className="form-check-input"
+                            aria-label={func1}
+                            type="radio"
+                            name="gFunctionChoice"
+                            id="gFunctionChoice1"
+                            onChange={handleFormUpdate.bind(this)}
+                            value={0}
+                            checked={this.props.gFunctionChoice === 0} />
+                        <label
+                            className="form-check-label"
+                            htmlFor="gFunctionChoice1">
+                            <MathComponent tex={func1} />
+                        </label>
+                    </div>
+                </div>
+                <div className="row">
+                    <div className="form-check">
+                        <input
+                            className="form-check-input"
+                            aria-label={func2}
+                            type="radio"
+                            name="gFunctionChoice"
+                            id="gFunctionChoice2"
+                            onChange={handleFormUpdate.bind(this)}
+                            value={1}
+                            checked={this.props.gFunctionChoice === 1} />
+                        <label
+                            className="form-check-label"
+                            htmlFor="gFunctionChoice2">
+                            <MathComponent tex={func2} />
+                        </label>
+                    </div>
+                </div>
+            </>
+        );
+    }
+}
+
+TemplateGraphEditor.propTypes = {
+    gType: PropTypes.number,
+    updateGraph: PropTypes.func.isRequired,
+    isInstructor: PropTypes.bool.isRequired,
+    disabled: PropTypes.bool,
+
+    gExpression: PropTypes.string,
+    gFunctionChoice: PropTypes.number
+};

media/js/src/form-components/EditableControl.js

@@ -20,7 +20,7 @@ export default class EditableControl extends React.Component {
                             name={this.props.id}
                             className="form-control"
                             type="text"
-                            maxLength="60"
+                            maxLength={this.props.maxLength || 60}
                             disabled={this.props.disabled}
                             value={this.props.value}
                             onChange={handleFormUpdate.bind(this)} />
@@ -37,5 +37,6 @@ EditableControl.propTypes = {
     isInstructor: PropTypes.bool.isRequired,
     value: PropTypes.string,
     valueEditable: PropTypes.bool.isRequired,
-    disabled: PropTypes.bool
+    disabled: PropTypes.bool,
+    maxLength: PropTypes.number
 };

media/js/src/graphs/TemplateGraph.js

@@ -1,7 +1,35 @@
+import { create, all } from 'mathjs';
 import {Graph} from './Graph.js';
 
+const math = create(all, {});
+
 export class TemplateGraph extends Graph {
     make() {
+        // TODO: parse and render this.options.gExpression
+        console.log('expression is:', this.options.gExpression);
+
+        const me = this;
+        const f = function(x) {
+            const scope = {
+                x: x
+            };
+
+            console.log(
+                math.evaluate(me.options.gExpression, scope));
+
+            return x;
+            //return math.evaluate(me.options.gExpression, scope);
+        };
+
+        this.board.create('functiongraph', [f], {
+            name: 'expression',
+            withLabel: true,
+            strokeWidth: 2,
+            strokeColor: this.options.gType === 12 ?
+                this.l2Color : this.l1Color,
+            recursionDepthLow: 8,
+            recursionDepthHigh: 15
+        });
     }
 }