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 (

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,9 @@ 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,
+
+        gExpression: json.expression
     };
 
     // When importing a graph for display, save the initial state of
@@ -572,6 +578,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

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)}
@@ -410,6 +414,7 @@ class Viewer extends Component {
     }
 
     handleGraphUpdate(obj) {
+        console.log('handleGraphUpdate', obj);
         this.setState(obj);
     }
     updateDisplayIntersection(checked) {

media/js/src/editors/TemplateGraphEditor.jsx

@@ -0,0 +1,82 @@
+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
+};

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

@@ -2,6 +2,7 @@ import {Graph} from './Graph.js';
 
 export class TemplateGraph extends Graph {
     make() {
+        // TODO: parse and render this.options.gExpression
     }
 }