From bd4543d77582efba352c1399acc010e0666ffe9f Mon Sep 17 00:00:00 2001
From: Nikolas Nyby <nnyby@columbia.edu>
Date: Wed, 5 Mar 2025 14:34:43 -0500
Subject: [PATCH] WIP

---
 ...iveProductionExternalityProducerEditor.jsx | 191 ++++++++++++++++++
 ...ativeProductionExternalityProducerGraph.js |  63 +++++-
 2 files changed, 253 insertions(+), 1 deletion(-)
 create mode 100644 media/js/src/editors/NegativeProductionExternalityProducerEditor.jsx

diff --git a/media/js/src/editors/NegativeProductionExternalityProducerEditor.jsx b/media/js/src/editors/NegativeProductionExternalityProducerEditor.jsx
new file mode 100644
index 000000000..f22462619
--- /dev/null
+++ b/media/js/src/editors/NegativeProductionExternalityProducerEditor.jsx
@@ -0,0 +1,191 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import RangeEditor from '../form-components/RangeEditor.jsx';
+import { handleFormUpdate } from '../utils.js';
+
+export default class NegativeProductionExternalityProducerEditor extends React.Component {
+    render() {
+        const me = this;
+
+        const modesLeft = [
+            'Negative Producer Externality',
+            'Unregulated',
+            'Welfare',
+        ];
+        const modesRight = [
+            'Pigouvian Tax',
+            'Pigouvian Tax (Welfare)',
+        ];
+
+        const radioButtons1 = modesLeft.map((optionTitle, idx) =>
+            <div key={idx} className="form-check">
+                <input
+                    type="radio" id={`functionChoice-${idx}`}
+                    className="form-check-input"
+                    value={idx}
+                    name="gFunctionChoice"
+                    checked={me.props.gFunctionChoice === idx}
+                    onChange={handleFormUpdate.bind(me)} />
+                <label
+                    className="form-check-label"
+                    htmlFor={`functionChoice-${idx}`}>
+                    {optionTitle}
+                </label>
+            </div>
+        );
+
+        const radioButtons2 = modesRight.map(function(optionTitle, idx) {
+            const newIdx = idx + modesLeft.length;
+            return (
+                <div key={newIdx} className="form-check">
+                    <input
+                        type="radio" id={`functionChoice-${newIdx}`}
+                        className="form-check-input"
+                        value={newIdx}
+                        name="gFunctionChoice"
+                        checked={me.props.gFunctionChoice === newIdx}
+                        onChange={handleFormUpdate.bind(me)} />
+                    <label
+                        className="form-check-label"
+                        htmlFor={`functionChoice-${newIdx}`}>
+                        {optionTitle}
+                    </label>
+                </div>
+            );
+        });
+
+        return (
+            <>
+                <div className="row">
+                    <div className="col">
+                        {radioButtons1}
+                    </div>
+                    <div className="col">
+                        {radioButtons2}
+                    </div>
+                </div>
+
+                <div>
+                    {this.props.displaySliders && (
+                        <>
+                            <RangeEditor
+                                label="Choke Price"
+                                rawLabel={true}
+                                id="gA1"
+                                value={this.props.gA1}
+                                min={0}
+                                max={10000}
+                                handler={handleFormUpdate.bind(this)} />
+
+                            <RangeEditor
+                                label="Demand Slope"
+                                rawLabel={true}
+                                id="gA2"
+                                value={this.props.gA2}
+                                min={0.01}
+                                max={35}
+                                handler={handleFormUpdate.bind(this)} />
+
+                            <RangeEditor
+                                label="Reservation Price"
+                                rawLabel={true}
+                                id="gA3"
+                                value={this.props.gA3}
+                                min={0}
+                                max={10000}
+                                handler={handleFormUpdate.bind(this)} />
+
+                            <RangeEditor
+                                label="Supply Slope"
+                                rawLabel={true}
+                                id="gA4"
+                                value={this.props.gA4}
+                                min={0.01}
+                                max={35}
+                                handler={handleFormUpdate.bind(this)} />
+                        </>
+                    )}
+                    {(
+                        this.props.gFunctionChoice === 2 ||
+                            this.props.gFunctionChoice === 3
+                    ) && (
+                        <RangeEditor
+                            label="Global Price"
+                            rawLabel={true}
+                            id="gA5"
+                            value={this.props.gA5}
+                            min={0}
+                            max={this.props.gA1}
+                            handler={handleFormUpdate.bind(this)} />
+                    )}
+                    {(this.props.gFunctionChoice === 3) && (
+                        <RangeEditor
+                            label="Tariff"
+                            rawLabel={true}
+                            id="gA6"
+                            value={this.props.gA6}
+                            min={0}
+                            max={this.props.gA1}
+                            handler={handleFormUpdate.bind(this)} />
+                    )}
+                    {(this.props.gFunctionChoice === 4 || this.props.gFunctionChoice === 5) && (
+                        <RangeEditor
+                            label="Global Price"
+                            rawLabel={true}
+                            id="gA5"
+                            value={this.props.gA5}
+                            min={0}
+                            max={this.props.gA1}
+                            handler={handleFormUpdate.bind(this)} />
+                    )}
+                    {(this.props.gFunctionChoice === 6 || this.props.gFunctionChoice === 8) && (
+                        <RangeEditor
+                            label="Minimum Price"
+                            rawLabel={true}
+                            id="gA5"
+                            value={this.props.gA5}
+                            min={0}
+                            max={this.props.gA1}
+                            handler={handleFormUpdate.bind(this)} />
+                    )}
+                    {(this.props.gFunctionChoice === 7 || this.props.gFunctionChoice === 9) && (
+                        <RangeEditor
+                            label="Maximum Price"
+                            rawLabel={true}
+                            id="gA5"
+                            value={this.props.gA5}
+                            min={0}
+                            max={this.props.gA1}
+                            handler={handleFormUpdate.bind(this)} />
+                    )}
+                    {(this.props.gFunctionChoice === 10 || this.props.gFunctionChoice === 11) && (
+                        <RangeEditor
+                            label="Production Quota"
+                            rawLabel={true}
+                            id="gA5"
+                            value={this.props.gA5}
+                            min={0}
+                            max={this.props.gA1}
+                            handler={handleFormUpdate.bind(this)} />
+                    )}
+                </div>
+            </>
+        );
+    }
+}
+
+NegativeProductionExternalityProducerEditor.propTypes = {
+    gType: PropTypes.number.isRequired,
+
+    gA1: PropTypes.number.isRequired,
+    gA2: PropTypes.number.isRequired,
+    gA3: PropTypes.number.isRequired,
+    gA4: PropTypes.number.isRequired,
+    gA5: PropTypes.number,
+    gA6: PropTypes.number,
+
+    gFunctionChoice: PropTypes.number.isRequired,
+    gToggle: PropTypes.bool.isRequired,
+
+    displaySliders: PropTypes.bool.isRequired
+};
diff --git a/media/js/src/graphs/NegativeProductionExternalityProducerGraph.js b/media/js/src/graphs/NegativeProductionExternalityProducerGraph.js
index 75c206e8d..ede105aba 100644
--- a/media/js/src/graphs/NegativeProductionExternalityProducerGraph.js
+++ b/media/js/src/graphs/NegativeProductionExternalityProducerGraph.js
@@ -1,6 +1,67 @@
-import {Graph} from './Graph.js';
+import {Graph, positiveRange} from './Graph.js';
+
+export const defaults = [
+    {
+        gXAxisMax: 1000,
+        gYAxisMax: 2500,
+        gA1: 500,
+        gA2: 2,
+        gA3: 50,
+        gA4: 2,
+    }
+];
 
 export class NegativeProductionExternalityProducerGraph extends Graph {
+    static getGraphPane(gFunctionChoice) {
+        return [
+            {
+                label: 'Unregulated Output q*',
+                color: 'red',
+                value: 500
+            },
+            {
+                label: 'Socially Desirable Output q<sup>soc</sup>',
+                color: 'orange',
+                value: 247.5
+            },
+            {
+                label: 'Market Price P*',
+                color: 'red',
+                value: 1500
+            },
+        ];
+    }
+    make() {
+        this.l1 = this.board.create(
+            'functiongraph',
+            [positiveRange(demandLine), 0, this.options.gXAxisMax], {
+                name: 'Demand',
+                withLabel: true,
+                label: {
+                    strokeColor: this.l1Color
+                },
+                strokeWidth: 2,
+                strokeColor: this.l1Color,
+                fixed: true,
+                highlight: false
+            }
+        );
+
+        this.l2 = this.board.create(
+            'functiongraph',
+            [positiveRange(demandLine), 0, this.options.gXAxisMax], {
+                name: 'Demand',
+                withLabel: true,
+                label: {
+                    strokeColor: this.l2Color
+                },
+                strokeWidth: 2,
+                strokeColor: this.l2Color,
+                fixed: true,
+                highlight: false
+            }
+        );
+    }
 }
 
 export const mkNegativeProductionExternalityProducer = function(board, options) {