Skip to content

Commit b866722

Browse files
nikolasnikolas
committed
Refactor joint graphs to be laid out vertically
This simplifies the interface code.
1 parent 8635db3 commit b866722

File tree

3 files changed

+57
-189
lines changed

3 files changed

+57
-189
lines changed

‎media/js/src/GraphEditor.jsx‎

Lines changed: 19 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -117,44 +117,6 @@ export default class GraphEditor extends React.Component {
117117
);
118118
}
119119

120-
const common2Graph = (
121-
<>
122-
{jxgBoard}
123-
124-
<div className="col-xl-6">
125-
<h3>Scenario</h3>
126-
<div className="form-group">
127-
<label htmlFor="gTitle">
128-
Title
129-
</label>
130-
<input
131-
id="gTitle"
132-
onChange={handleFormUpdate.bind(this)}
133-
value={this.props.gTitle}
134-
className="form-control form-control-sm"
135-
type="text"
136-
maxLength="140"
137-
/>
138-
</div>
139-
140-
<CommonGraphEditor
141-
{...this.props}
142-
/>
143-
144-
{this.props.gId &&
145-
<div className="form-group mt-1">
146-
<a href={`/course/${courseId}/graph/` + this.props.gId + '/public/'}
147-
title="Student View"
148-
className="btn btn-secondary"
149-
>
150-
Student View
151-
</a>
152-
</div>
153-
}
154-
</div>
155-
</>
156-
);
157-
158120
if (this.props.gType === 0 || this.props.gType === 9) {
159121
// Demand-Supply, possibly AUC (area under curve)
160122
rightSide =
@@ -165,53 +127,21 @@ export default class GraphEditor extends React.Component {
165127
/>;
166128
} else if (this.props.gType === 13) {
167129
// Horizontal Joint Graph: two Linear Demand-Supply graphs
168-
return (
169-
<div className="GraphEditor">
170-
{this.title()}
171-
<form>
172-
<div className="row">
173-
{common2Graph}
174-
<div className="col-xl-6">
175-
<DemandSupplyEditor
176-
showAUC={this.props.gType === 9}
177-
{...commonEditorProps}
178-
{...this.props}
179-
/>
180-
<CommonGraphSettings
181-
{...this.props}
182-
/>
183-
</div>
184-
</div>
185-
<hr/>
186-
{editRow}
187-
</form>
188-
</div>
189-
);
130+
rightSide =
131+
<DemandSupplyEditor
132+
showAUC={this.props.gType === 9}
133+
{...commonEditorProps}
134+
{...this.props}
135+
/>;
190136
} else if (this.props.gType === 14) {
191137
// Horizontal Joint Graph: two Non-Linear Demand-Supply graphs
192-
return (
193-
<div className="GraphEditor">
194-
{this.title()}
195-
<form>
196-
<div className="row">
197-
{common2Graph}
198-
<div className="col-xl-6">
199-
<NonLinearDemandSupplyEditor
200-
hideFunctionChoice={true}
201-
showAUC={this.props.gType === 10}
202-
{...commonEditorProps}
203-
{...this.props}
204-
/>
205-
<CommonGraphSettings
206-
{...this.props}
207-
/>
208-
</div>
209-
</div>
210-
<hr/>
211-
{editRow}
212-
</form>
213-
</div>
214-
);
138+
rightSide =
139+
<NonLinearDemandSupplyEditor
140+
hideFunctionChoice={true}
141+
showAUC={this.props.gType === 10}
142+
{...commonEditorProps}
143+
{...this.props}
144+
/>;
215145
} else if (this.props.gType === 1 || this.props.gType === 10) {
216146
// Non-Linear Demand Supply, possibly AUC (area under curve)
217147
rightSide =
@@ -308,28 +238,12 @@ export default class GraphEditor extends React.Component {
308238
{...this.props}
309239
/>;
310240
} else if (this.props.gType === 24) {
311-
return (
312-
<div className="GraphEditor">
313-
{this.title()}
314-
<form>
315-
<div className="row">
316-
{common2Graph}
317-
<div className="col-xl-6">
318-
<TaxRevenueEditor
319-
showAUC={this.props.gType === 9}
320-
{...commonEditorProps}
321-
{...this.props}
322-
/>
323-
<CommonGraphSettings
324-
{...this.props}
325-
/>
326-
</div>
327-
</div>
328-
<hr/>
329-
{editRow}
330-
</form>
331-
</div>
332-
);
241+
rightSide =
242+
<TaxRevenueEditor
243+
showAUC={this.props.gType === 9}
244+
{...commonEditorProps}
245+
{...this.props}
246+
/>;
333247
} else if (this.props.gType === 25) {
334248
rightSide =
335249
<LinearDemandSupplySurplusEditor

‎media/js/src/GraphViewer.jsx‎

Lines changed: 28 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -134,21 +134,19 @@ export default class GraphViewer extends React.Component {
134134
{...commonViewerProps}
135135
{...this.props}
136136
/>;
137-
} else if (this.props.gType === 3 || this.props.gType === 12) {
138-
if (this.props.gType === 3) {
139-
rightSide =
140-
<CobbDouglasEditor
141-
{...commonViewerProps}
142-
{...this.props}
143-
/>;
144-
} else if (this.props.gType === 12) {
145-
rightSide =
146-
<CobbDouglasNLDSEditor
147-
showAUC={false}
148-
{...commonViewerProps}
149-
{...this.props}
150-
/>;
151-
}
137+
} else if (this.props.gType === 3) {
138+
rightSide =
139+
<CobbDouglasEditor
140+
{...commonViewerProps}
141+
{...this.props}
142+
/>;
143+
} else if (this.props.gType === 12) {
144+
rightSide =
145+
<CobbDouglasNLDSEditor
146+
showAUC={false}
147+
{...commonViewerProps}
148+
{...this.props}
149+
/>;
152150
} else if (this.props.gType === 5 || this.props.gType === 15) {
153151
// Consumption Leisure: Contraint and Optimal Choice
154152
rightSide =
@@ -170,46 +168,22 @@ export default class GraphViewer extends React.Component {
170168
{...commonViewerProps}
171169
{...this.props}
172170
/>;
173-
} else if (this.props.gType === 13 || this.props.gType === 14) {
174-
if (this.props.gType === 13) {
175-
rightSide =
176-
<DemandSupplyEditor
177-
showAUC={this.props.gType === 9}
178-
{...commonViewerProps}
179-
{...this.props}
180-
/>;
181-
} else if (this.props.gType === 14) {
171+
} else if (this.props.gType === 13) {
172+
rightSide =
173+
<DemandSupplyEditor
174+
showAUC={this.props.gType === 9}
175+
{...commonViewerProps}
176+
{...this.props}
177+
/>;
178+
} else if (this.props.gType === 14) {
182179
// Non-Linear Demand Supply horiz. joint graph
183-
rightSide =
184-
<NonLinearDemandSupplyEditor
185-
showAUC={this.props.gType === 10}
186-
{...commonViewerProps}
187-
{...this.props}
188-
/>;
189-
}
190-
191-
// Show side-by-side view here.
192-
return (
193-
<div className="GraphViewer">
194-
{titleEl}
195-
{instructionsEl}
196-
<div className="row">
197-
{leftSide}
198-
</div>
199-
200-
<Feedback feedback={this.state.currentFeedback} />
201-
202-
{rightSide}
203-
204-
<hr />
205-
206-
<ResetGraphButton
207-
initialState={initialState}
208-
updateGraph={this.updateGraph} />
209-
210-
<ExportGraphButton />
211-
</div>
212-
);
180+
rightSide =
181+
<NonLinearDemandSupplyEditor
182+
showAUC={this.props.gType === 10}
183+
{...commonViewerProps}
184+
{...this.props}
185+
/>;
186+
}
213187
} else if (this.props.gType === 16) {
214188
// Template Graph: free-form equations
215189
rightSide =
@@ -264,28 +238,6 @@ export default class GraphViewer extends React.Component {
264238
{...commonViewerProps}
265239
{...this.props}
266240
/>;
267-
268-
return (
269-
<div className="GraphViewer">
270-
{titleEl}
271-
{instructionsEl}
272-
<div className="row">
273-
{leftSide}
274-
</div>
275-
276-
<Feedback feedback={this.state.currentFeedback} />
277-
278-
{rightSide}
279-
280-
<hr />
281-
282-
<ResetGraphButton
283-
initialState={initialState}
284-
updateGraph={this.updateGraph} />
285-
286-
<ExportGraphButton />
287-
</div>
288-
);
289241
} else if (this.props.gType === 25) {
290242
rightSide =
291243
<LinearDemandSupplySurplusEditor

‎media/js/src/JXGBoard.jsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -719,17 +719,17 @@ export default class JXGBoard extends React.Component {
719719
}
720720

721721
// The primary HTML structure for JSXGraph
722-
makeFigure(id, hide, math) {
722+
makeFigure(id, math) {
723723
return (
724-
<div className="col-xl-6" hidden={hide}>
724+
<>
725725
<figure
726726
aria-label="The EconPractice graph."
727727
id={id}
728728
className="jxgbox"
729729
style={this.style}>
730730
</figure>
731731
{math}
732-
</div>
732+
</>
733733
);
734734
}
735735

@@ -739,23 +739,23 @@ export default class JXGBoard extends React.Component {
739739
let math1 = null;
740740
let math2 = null;
741741
let area = null;
742-
let figure2 = true;
742+
let isJointGraph = false;
743743

744744
if (this.props.gType === 9 || this.props.gType === 10) {
745745
area = <AreaDisplay
746746
areaConf={this.props.gAreaConfiguration}
747747
areaA={this.state.areaA}
748748
areaB={this.state.areaB}
749749
areaC={this.state.areaC} />;
750-
} else if ([12, 13, 14, 24].includes(this.props.gType)) {
750+
} else if ([12, 13, 14, 24, 32].includes(this.props.gType)) {
751751
if (this.props.gType === 14) {
752752
const func1 = String.raw`MP_${this.props.gNName} = (1 - \alpha)${this.props.gCobbDouglasAName}${this.props.gCobbDouglasKName}^\alpha ${this.props.gNName}^{-\alpha}`;
753753
const func2 = String.raw`MP_${this.props.gCobbDouglasKName} = \alpha ${this.props.gCobbDouglasAName}${this.props.gCobbDouglasKName}^{\alpha - 1} ${this.props.gNName}^{1 - \alpha}`;
754754

755755
math1 = getKatexEl(func1);
756756
math2 = getKatexEl(func2);
757757
}
758-
figure2 = false;
758+
isJointGraph = true;
759759
}
760760

761761
let legend = null;
@@ -776,8 +776,10 @@ export default class JXGBoard extends React.Component {
776776

777777
return (
778778
<>
779-
{this.makeFigure(this.id, false, math1)}
780-
{this.makeFigure(this.id + '-2', figure2, math2)}
779+
<div className="col-xl-6">
780+
{this.makeFigure(this.id, math1)}
781+
{isJointGraph && this.makeFigure(this.id + '-2', math2)}
782+
</div>
781783
{legend}
782784
{area}
783785
</>

0 commit comments

Comments
 (0)