@pie-element/graphing-solution-set 4.3.4-next.0 → 5.0.0-beta.0

package/configure/lib/correct-response.js

@@ -1,287 +1,161 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.CorrectResponse = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
+exports.default = exports.CorrectResponse = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _graphingSolutionSet = require("@pie-lib/graphing-solution-set");
-
 var _configUi = require("@pie-lib/config-ui");
-
 var _lodash = require("lodash");
-
-var _core = require("@material-ui/core");
-
-var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
-
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
-
+var _material = require("@mui/material");
+var _Radio = _interopRequireDefault(require("@mui/material/Radio"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
 var _utils = require("./utils");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var styles = function styles(theme) {
-  return {
-    column: {
-      flex: 1
-    },
-    graphingTools: {
-      color: theme.palette.grey['A200']
-    },
-    availableTool: {
-      cursor: 'pointer',
-      margin: theme.spacing.unit,
-      padding: theme.spacing.unit,
-      border: "2px solid ".concat(theme.palette.common.white),
-      textTransform: 'capitalize',
-      '&:hover': {
-        color: theme.palette.grey[800]
-      }
-    },
-    selectedTool: {
-      background: theme.palette.grey['A100'],
-      border: "2px solid ".concat(theme.palette.grey['A200'])
-    },
-    container: {
-      border: "2px solid ".concat(theme.palette.grey['A200']),
-      borderRadius: '4px',
-      padding: "0 ".concat(theme.spacing.unit * 4, "px ").concat(theme.spacing.unit * 2, "px"),
-      background: theme.palette.grey[50]
-    },
-    button: {
-      margin: "".concat(theme.spacing.unit * 2.5, "px 0"),
-      cursor: 'pointer',
-      background: theme.palette.grey[200],
-      padding: theme.spacing.unit * 1.5,
-      width: 'fit-content',
-      borderRadius: '4px',
-      '&:hover': {
-        background: theme.palette.grey['A100']
-      }
-    },
-    responseTitle: {
-      display: 'flex',
-      alignItems: 'center',
-      marginTop: theme.spacing.unit * 2.5
-    },
-    iconButton: {
-      marginLeft: '6px',
-      color: theme.palette.grey[600],
-      '&:hover': {
-        cursor: 'pointer',
-        color: theme.palette.common.black
-      }
-    },
-    name: {
-      marginBottom: theme.spacing.unit / 2
-    },
-    tooltip: {
-      fontSize: theme.typography.fontSize - 2,
-      whiteSpace: 'pre',
-      maxWidth: '500px'
-    },
-    subtitleText: {
-      marginTop: theme.spacing.unit * 1.5,
-      marginBottom: theme.spacing.unit
-    },
-    toolsHeader: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    },
-    defaultTool: {
-      display: 'flex',
-      alignItems: 'center',
-      width: '300px'
-    },
-    defaultToolSelect: {
-      marginLeft: theme.spacing.unit,
-      textTransform: 'uppercase',
-      color: theme.palette.grey[800]
-    },
-    menuItem: {
-      textTransform: 'uppercase'
-    },
-    noDefaultTool: {
-      padding: theme.spacing.unit / 2
-    },
-    error: {
-      color: theme.palette.error.main
-    },
-    errorMessage: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      marginTop: theme.spacing.unit
-    },
-    graphError: {
-      border: "2px solid ".concat(theme.palette.error.main)
-    },
-    radioButtonClass: {
-      height: '20px',
-      width: 'fit-content',
-      padding: '.5rem 0'
-    },
-    radioButton: {
-      color: '#000000 !important'
-    }
-  };
-};
-
-var CorrectResponse = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(CorrectResponse, _React$Component);
-
-  var _super = _createSuper(CorrectResponse);
-
-  function CorrectResponse() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, CorrectResponse);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const SubtitleText = (0, _styles.styled)(_material.Typography)(({
+  theme
+}) => ({
+  marginTop: theme.spacing(1.5),
+  marginBottom: theme.spacing(1)
+}));
+const RadioButtonClass = (0, _styles.styled)(_FormControlLabel.default)({
+  height: '20px',
+  width: 'fit-content',
+  padding: '.5rem 0'
+});
+const StyledRadio = (0, _styles.styled)(_Radio.default)({
+  color: '#000000 !important'
+});
+const ErrorMessage = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1)
+}));
+class CorrectResponse extends React.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "state", {
       dialog: {
         open: false
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleAlertDialog", function (open, callback) {
-      return _this.setState({
-        dialog: {
-          open: open
-        }
-      }, callback);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeMarks", function (marks) {
-      var _this$props = _this.props,
-          model = _this$props.model,
-          onChange = _this$props.onChange;
-      var gssLineData = model.gssLineData;
-
+    /*
+     * Function to handle the alert dialog open and close
+     * @param {boolean} open - open or close the dialog
+     * @param {function} callback - callback function to be called after setting the state
+     * */
+    (0, _defineProperty2.default)(this, "handleAlertDialog", (open, callback) => this.setState({
+      dialog: {
+        open
+      }
+    }, callback));
+    /*
+     * Function to change the marks on the graph
+     * @param {array} marks - marks to be added on the graph
+     * */
+    (0, _defineProperty2.default)(this, "changeMarks", marks => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      const {
+        gssLineData
+      } = model;
       if (gssLineData.selectedTool === 'lineA' && marks.length > 0) {
         marks[0].fill = gssLineData['lineA'].lineType;
       }
-
       if (gssLineData.selectedTool === 'lineB' && marks.length > 1) {
         marks[1].fill = gssLineData['lineB'].lineType;
       }
-
       if (marks.length === 0) {
         gssLineData.selectedTool = 'lineA';
-        (0, _lodash.set)(model, "gssLineData", gssLineData);
+        (0, _lodash.set)(model, 'gssLineData', gssLineData);
       }
-
-      (0, _lodash.set)(model, "answers.correctAnswer.marks", marks);
+      (0, _lodash.set)(model, 'answers.correctAnswer.marks', marks);
       onChange(model);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResetClick", function () {
-      var _this$props2 = _this.props,
-          model = _this$props2.model,
-          onChange = _this$props2.onChange;
-      var gssLineData = model.gssLineData,
-          answers = model.answers;
-
-      _this.setState({
+    /*
+     * Reset the graph to original state and remove all the elements added on the graph
+     * */
+    (0, _defineProperty2.default)(this, "onResetClick", () => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      const {
+        gssLineData,
+        answers
+      } = model;
+      this.setState({
         dialog: {
           open: true,
           title: 'Warning',
-          text: "This will remove all the elements added on the graph and reset graph to original state. Are you sure you want to continue?",
-          onConfirm: function onConfirm() {
+          text: 'This will remove all the elements added on the graph and reset graph to original state. Are you sure you want to continue?',
+          onConfirm: () => {
             // Reset the graph to original state
             answers.correctAnswer.marks = [];
             gssLineData.selectedTool = 'lineA';
             gssLineData.lineA.lineType = 'Solid';
             if (gssLineData.lineB) gssLineData.lineB.lineType = 'Solid';
-            (0, _lodash.set)(model, "answers", answers);
-            (0, _lodash.set)(model, "gssLineData", gssLineData);
+            (0, _lodash.set)(model, 'answers', answers);
+            (0, _lodash.set)(model, 'gssLineData', gssLineData);
             onChange(model);
-
-            _this.handleAlertDialog(false);
+            this.handleAlertDialog(false);
           },
-          onClose: function onClose() {
-            return _this.handleAlertDialog(false);
-          }
+          onClose: () => this.handleAlertDialog(false)
         }
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeNumberOfLines", function (e, value) {
-      var model = _this.props.model;
-      var gssLineData = model.gssLineData;
-
+    /*
+     * Function to change the number of lines on the graph
+     * @param {object} e - event object
+     * @param {number} value - number of lines to be added on the graph
+     * */
+    (0, _defineProperty2.default)(this, "changeNumberOfLines", (e, value) => {
+      const {
+        model
+      } = this.props;
+      let gssLineData = model.gssLineData;
       if (gssLineData.selectedTool === 'solutionSet') {
-        _this.setState({
+        this.setState({
           dialog: {
             open: true,
             title: 'Warning',
-            text: "Changing number of lines after adding solution set will remove added solution set. Are you sure you want to continue?",
-            onConfirm: function onConfirm() {
-              _this.changeLine(e, value);
-
-              _this.handleAlertDialog(false);
+            text: 'Changing number of lines after adding solution set will remove added solution set. Are you sure you want to continue?',
+            onConfirm: () => {
+              this.changeLine(e, value);
+              this.handleAlertDialog(false);
             },
-            onClose: function onClose() {
-              return _this.handleAlertDialog(false);
-            }
+            onClose: () => this.handleAlertDialog(false)
           }
         });
       } else {
-        _this.changeLine(e, value);
+        this.changeLine(e, value);
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeLine", function (e, value) {
-      var _this$props3 = _this.props,
-          model = _this$props3.model,
-          onChange = _this$props3.onChange;
-      var answers = model.answers;
-      var gssLineData = model.gssLineData; //remove polygon from correct answer
-
-      answers.correctAnswer.marks = answers.correctAnswer.marks.filter(function (mark) {
-        return mark.type !== 'polygon';
-      });
-
+    /*
+     * Function to change the number of line on the graph
+     * @param {object} e - event object
+     * @param {number} value - number of lines to be added on the graph
+     * */
+    (0, _defineProperty2.default)(this, "changeLine", (e, value) => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      const {
+        answers
+      } = model;
+      let gssLineData = model.gssLineData;
+      //remove polygon from correct answer
+      answers.correctAnswer.marks = answers.correctAnswer.marks.filter(mark => mark.type !== 'polygon');
       if (Number.parseInt(value) === 1) {
         //remove lineB from gssLineData and correct answer
         delete gssLineData.lineB;
@@ -294,308 +168,268 @@ var CorrectResponse = /*#__PURE__*/function (_React$Component) {
         gssLineData.lineB = {
           lineType: 'Solid'
         };
-      } //reset solution set
-
-
-      (0, _lodash.set)(model, "answers", answers);
-      (0, _lodash.set)(model, "gssLineData", gssLineData);
+      }
+      //reset solution set
+      (0, _lodash.set)(model, 'answers', answers);
+      (0, _lodash.set)(model, 'gssLineData', gssLineData);
       onChange(model);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSolutionSetSelected", function (point) {
-      var _this$props4 = _this.props,
-          model = _this$props4.model,
-          onChange = _this$props4.onChange;
-      var answers = model.answers,
-          gssLineData = model.gssLineData;
-
-      var _iterator = _createForOfIteratorHelper(gssLineData.sections),
-          _step;
-
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var section = _step.value;
-
-          //check if the point is inside the polygon
-          if ((0, _utils.pointInsidePolygon)(point, section)) {
-            var polygon = {
-              points: section,
-              building: false,
-              type: 'polygon',
-              closed: true,
-              isSolution: true
-            }; //remove old answer section from correct answer
-
-            answers.correctAnswer.marks = answers.correctAnswer.marks.filter(function (mark) {
-              return mark.type !== 'polygon';
-            }); //add new answer section to correct answer
-
-            answers.correctAnswer.marks.push(polygon);
-            break;
-          }
+    /*
+     * Function to handle the changes to solution set on the graph
+     * @param {object} point - point selected on the graph
+     * */
+    (0, _defineProperty2.default)(this, "onSolutionSetSelected", point => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      const {
+        answers,
+        gssLineData
+      } = model;
+      for (const section of gssLineData.sections) {
+        //check if the point is inside the polygon
+        if ((0, _utils.pointInsidePolygon)(point, section)) {
+          let polygon = {
+            points: section,
+            building: false,
+            type: 'polygon',
+            closed: true,
+            isSolution: true
+          };
+          //remove old answer section from correct answer
+          answers.correctAnswer.marks = answers.correctAnswer.marks.filter(mark => mark.type !== 'polygon');
+          //add new answer section to correct answer
+          answers.correctAnswer.marks.push(polygon);
+          break;
         }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
       }
-
-      (0, _lodash.set)(model, "answers", answers);
+      (0, _lodash.set)(model, 'answers', answers);
       onChange(model);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChangeGssLineData", function (gssLineData, oldSelectedTool) {
-      var model = _this.props.model;
-      var answers = model.answers,
-          domain = model.domain,
-          range = model.range; //handle solution set changes
-
+    /*
+     * Function to handle the changes to line data on the graph
+     * @param {object} gssLineData - line data on the graph
+     * @param {string} oldSelectedTool - old selected tool
+     * */
+    (0, _defineProperty2.default)(this, "onChangeGssLineData", (gssLineData, oldSelectedTool) => {
+      const {
+        model
+      } = this.props;
+      const {
+        answers,
+        domain,
+        range
+      } = model;
+      //handle solution set changes
       if (gssLineData.selectedTool === 'solutionSet') {
-        var lines = answers.correctAnswer.marks.filter(function (mark) {
-          return mark.type !== 'polygon';
-        });
-
+        let lines = answers.correctAnswer.marks.filter(mark => mark.type !== 'polygon');
         if (!(0, _utils.checkIfLinesAreAdded)(gssLineData, lines)) {
           gssLineData.selectedTool = oldSelectedTool;
-
-          _this.setState({
+          this.setState({
             dialog: {
               open: true,
               title: 'Warning',
-              text: "Please define the line(s) and then select a solution set for the item.",
-              onConfirm: function onConfirm() {
-                return _this.handleAlertDialog(false);
-              }
+              text: 'Please define the line(s) and then select a solution set for the item.',
+              onConfirm: () => this.handleAlertDialog(false)
             }
           });
         } else {
-          var _lines = answers.correctAnswer.marks.filter(function (mark) {
-            return mark.type !== 'polygon';
-          });
-
-          gssLineData = (0, _utils.findSectionsInSolutionSet)(gssLineData, _lines, domain, range);
+          let lines = answers.correctAnswer.marks.filter(mark => mark.type !== 'polygon');
+          gssLineData = (0, _utils.findSectionsInSolutionSet)(gssLineData, lines, domain, range);
         }
-
-        _this.handleGssLineDataChange(gssLineData, answers);
+        this.handleGssLineDataChange(gssLineData, answers);
       } else {
-        var polygons = answers.correctAnswer.marks.filter(function (mark) {
-          return mark.type === 'polygon';
-        });
-
+        let polygons = answers.correctAnswer.marks.filter(mark => mark.type === 'polygon');
         if (oldSelectedTool === 'solutionSet' && polygons.length > 0) {
-          _this.setState({
+          this.setState({
             dialog: {
               open: true,
               title: 'Warning',
-              text: "Changing a line after adding a solution set will clear your selected solution set. Click 'Clear Solution Set' to change the line. Otherwise, click 'Cancel'.",
-              onConfirm: function onConfirm() {
-                answers.correctAnswer.marks = answers.correctAnswer.marks.filter(function (mark) {
-                  return mark.type !== 'polygon';
-                });
-
-                _this.handleGssLineDataChange(gssLineData, answers);
-
-                _this.handleAlertDialog(false);
+              text: 'Changing a line after adding a solution set will clear your selected solution set. Click \'Clear Solution Set\' to change the line. Otherwise, click \'Cancel\'.',
+              onConfirm: () => {
+                answers.correctAnswer.marks = answers.correctAnswer.marks.filter(mark => mark.type !== 'polygon');
+                this.handleGssLineDataChange(gssLineData, answers);
+                this.handleAlertDialog(false);
               },
               onConfirmText: 'CLEAR SOLUTION SET',
-              onClose: function onClose() {
+              onClose: () => {
                 gssLineData.selectedTool = oldSelectedTool;
-
-                _this.handleGssLineDataChange(gssLineData, answers);
-
-                _this.handleAlertDialog(false);
+                this.handleGssLineDataChange(gssLineData, answers);
+                this.handleAlertDialog(false);
               }
             }
           });
         } else {
-          _this.handleGssLineDataChange(gssLineData, answers);
+          this.handleGssLineDataChange(gssLineData, answers);
         }
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleGssLineDataChange", function (gssLineData, answers) {
-      var _this$props5 = _this.props,
-          model = _this$props5.model,
-          onChange = _this$props5.onChange; //handle line type changes from solid to dashed and vice versa
-
+    /*
+     * Function to handle the changes to line data on the graph
+     * @param {object} gssLineData - line data on the graph
+     * @param {object} answers - correct answer
+     * */
+    (0, _defineProperty2.default)(this, "handleGssLineDataChange", (gssLineData, answers) => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      //handle line type changes from solid to dashed and vice versa
       if (answers.correctAnswer.marks.length > 0 && answers.correctAnswer.marks[0] && gssLineData.lineA) {
         answers.correctAnswer.marks[0].fill = gssLineData.lineA.lineType;
       }
-
       if (answers.correctAnswer.marks.length > 1 && answers.correctAnswer.marks[1] && gssLineData.lineB) {
         answers.correctAnswer.marks[1].fill = gssLineData.lineB.lineType;
-      } //check if line is added to the graph before switching to lineB
-
-
+      }
+      //check if line is added to the graph before switching to lineB
       if (gssLineData.selectedTool === 'lineB' && answers.correctAnswer.marks.length === 0 || gssLineData.selectedTool === 'lineB' && answers.correctAnswer.marks[0].building) {
-        _this.setState({
+        this.setState({
           dialog: {
             open: true,
             title: 'Warning',
-            text: "Please add Line A to the graph before adding Line B",
-            onConfirm: function onConfirm() {
-              return _this.handleAlertDialog(false);
-            }
+            text: 'Please add Line A to the graph before adding Line B',
+            onConfirm: () => this.handleAlertDialog(false)
           }
         });
-
         gssLineData.selectedTool = 'lineA';
-      } //check if lineB is added to the graph before switching to lineA
-
-
+      }
+      //check if lineB is added to the graph before switching to lineA
       if (gssLineData.selectedTool === 'lineA' && answers.correctAnswer.marks.length > 1 && answers.correctAnswer.marks[1].building) {
-        _this.setState({
+        this.setState({
           dialog: {
             open: true,
             title: 'Warning',
-            text: "Please add Line B to the graph before switching to Line A",
-            onConfirm: function onConfirm() {
-              return _this.handleAlertDialog(false);
-            }
+            text: 'Please add Line B to the graph before switching to Line A',
+            onConfirm: () => this.handleAlertDialog(false)
           }
         });
-
         gssLineData.selectedTool = 'lineB';
       }
-
-      (0, _lodash.set)(model, "gssLineData", gssLineData);
-      (0, _lodash.set)(model, "answers", answers);
+      (0, _lodash.set)(model, 'gssLineData', gssLineData);
+      (0, _lodash.set)(model, 'answers', answers);
       onChange(model);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateModel", function (props) {
-      var _this$props6 = _this.props,
-          model = _this$props6.model,
-          onChange = _this$props6.onChange;
-      onChange(_objectSpread(_objectSpread({}, model), props));
-    });
-    return _this;
-  }
-
-  (0, _createClass2["default"])(CorrectResponse, [{
-    key: "render",
-    value:
     /*
-     * Render the component
+     * Function to update the model
+     * @param {object} props - updated props
      * */
-    function render() {
-      var _this2 = this;
-
-      var _this$props7 = this.props,
-          classes = _this$props7.classes,
-          errors = _this$props7.errors,
-          model = _this$props7.model,
-          _this$props7$mathMlOp = _this$props7.mathMlOptions,
-          mathMlOptions = _this$props7$mathMlOp === void 0 ? {} : _this$props7$mathMlOp;
-      var dialog = this.state.dialog; //get the default values to GssLineData
-
-      var _ref = model || {},
-          _ref$gssLineData = _ref.gssLineData,
-          gssLineData = _ref$gssLineData === void 0 ? {
+    (0, _defineProperty2.default)(this, "updateModel", props => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      onChange({
+        ...model,
+        ...props
+      });
+    });
+  }
+  /*
+   * Render the component
+   * */
+  render() {
+    const {
+      errors,
+      model,
+      mathMlOptions = {}
+    } = this.props;
+    const {
+      dialog
+    } = this.state;
+    //get the default values to GssLineData
+    const {
+      gssLineData = {
         numberOfLines: 1,
         selectedTool: 'lineA',
         lineA: {
           lineType: 'Solid'
         }
-      } : _ref$gssLineData,
-          arrows = _ref.arrows,
-          coordinatesOnHover = _ref.coordinatesOnHover,
-          domain = _ref.domain,
-          _ref$graph = _ref.graph,
-          graph = _ref$graph === void 0 ? {} : _ref$graph,
-          labels = _ref.labels,
-          labelsEnabled = _ref.labelsEnabled,
-          range = _ref.range,
-          title = _ref.title,
-          titleEnabled = _ref.titleEnabled,
-          marks = _ref.marks,
-          answers = _ref.answers;
-
-      var _ref2 = errors || {},
-          _ref2$correctAnswerEr = _ref2.correctAnswerErrors,
-          correctAnswerErrors = _ref2$correctAnswerEr === void 0 ? '' : _ref2$correctAnswerEr;
-
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_core.Typography, {
-        component: "div",
-        variant: "subheading"
-      }, "Define Line Type(s) and Correct Response"), /*#__PURE__*/React.createElement(_core.Typography, {
-        component: "div",
-        variant: "body1",
-        className: classes.subtitleText
-      }, "Use this interface to choose how many lines students will be able to draw, and to define the correct answer."), /*#__PURE__*/React.createElement(_core.Typography, {
-        component: "div",
-        variant: "body1",
-        className: classes.subtitleText
-      }, "Choose Number of Lines"), /*#__PURE__*/React.createElement(_core.RadioGroup, {
-        name: "numberOfLines",
-        value: gssLineData.numberOfLines,
-        onChange: this.changeNumberOfLines
-      }, /*#__PURE__*/React.createElement(_FormControlLabel["default"], {
-        className: classes.radioButtonClass,
-        value: "1",
-        control: /*#__PURE__*/React.createElement(_Radio["default"], {
-          checked: gssLineData.numberOfLines === 1,
-          className: classes.radioButton
-        }),
-        label: "One"
-      }), /*#__PURE__*/React.createElement(_FormControlLabel["default"], {
-        className: classes.radioButtonClass,
-        value: "2",
-        control: /*#__PURE__*/React.createElement(_Radio["default"], {
-          checked: gssLineData.numberOfLines === 2,
-          className: classes.radioButton
-        }),
-        label: "Two"
-      })), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_graphingSolutionSet.GraphContainer, {
-        className: correctAnswerErrors['correctAnswer'] && classes.graphError,
-        axesSettings: {
-          includeArrows: arrows
-        },
-        backgroundMarks: [],
-        coordinatesOnHover: coordinatesOnHover,
-        disabledLabels: true,
-        disabledTitle: true,
-        domain: domain,
-        draggableTools: true,
-        labels: labels,
-        marks: answers && answers.correctAnswer && answers.correctAnswer.marks ? answers.correctAnswer.marks : [],
-        onChangeMarks: function onChangeMarks(newMarks) {
-          return _this2.changeMarks(newMarks);
-        },
-        onCustomReset: this.onResetClick,
-        range: range,
-        showLabels: labelsEnabled,
-        showTitle: titleEnabled,
-        size: {
-          width: graph.width,
-          height: graph.height
-        },
-        title: title,
-        gssLineData: gssLineData,
-        onChangeGssLineData: this.onChangeGssLineData,
-        onSolutionSetSelected: this.onSolutionSetSelected,
-        toolbarTools: ['line', 'polygon'],
-        mathMlOptions: mathMlOptions
-      }), correctAnswerErrors['correctAnswer'] && /*#__PURE__*/React.createElement("div", {
-        className: classes.errorMessage
-      }, correctAnswerErrors['correctAnswer'])), /*#__PURE__*/React.createElement(_configUi.AlertDialog, {
-        open: dialog.open,
-        title: dialog.title,
-        text: dialog.text,
-        onClose: dialog.onClose,
-        onConfirm: dialog.onConfirm,
-        onConfirmText: dialog.onConfirmText ? dialog.onConfirmText : 'OK'
-      }));
-    }
-  }]);
-  return CorrectResponse;
-}(React.Component);
-
+      },
+      arrows,
+      coordinatesOnHover,
+      domain,
+      graph = {},
+      labels,
+      labelsEnabled,
+      range,
+      title,
+      titleEnabled,
+      answers
+    } = model || {};
+    const {
+      correctAnswerErrors = ''
+    } = errors || {};
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_material.Typography, {
+      component: "div",
+      variant: "h6"
+    }, "Define Line Type(s) and Correct Response"), /*#__PURE__*/React.createElement(SubtitleText, {
+      component: "div",
+      variant: "body1"
+    }, "Use this interface to choose how many lines students will be able to draw, and to define the correct answer."), /*#__PURE__*/React.createElement(SubtitleText, {
+      component: "div",
+      variant: "body1"
+    }, "Choose Number of Lines"), /*#__PURE__*/React.createElement(_material.RadioGroup, {
+      name: "numberOfLines",
+      value: gssLineData.numberOfLines,
+      onChange: this.changeNumberOfLines
+    }, /*#__PURE__*/React.createElement(RadioButtonClass, {
+      value: "1",
+      control: /*#__PURE__*/React.createElement(StyledRadio, {
+        checked: gssLineData.numberOfLines === 1
+      }),
+      label: "One"
+    }), /*#__PURE__*/React.createElement(RadioButtonClass, {
+      value: "2",
+      control: /*#__PURE__*/React.createElement(StyledRadio, {
+        checked: gssLineData.numberOfLines === 2
+      }),
+      label: "Two"
+    })), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_graphingSolutionSet.GraphContainer, {
+      style: correctAnswerErrors['correctAnswer'] && {
+        border: '2px solid red'
+      },
+      axesSettings: {
+        includeArrows: arrows
+      },
+      backgroundMarks: [],
+      coordinatesOnHover: coordinatesOnHover,
+      disabledLabels: true,
+      disabledTitle: true,
+      domain: domain,
+      draggableTools: true,
+      labels: labels,
+      marks: answers && answers.correctAnswer && answers.correctAnswer.marks ? answers.correctAnswer.marks : [],
+      onChangeMarks: newMarks => this.changeMarks(newMarks),
+      onCustomReset: this.onResetClick,
+      range: range,
+      showLabels: labelsEnabled,
+      showTitle: titleEnabled,
+      size: {
+        width: graph.width,
+        height: graph.height
+      },
+      title: title,
+      gssLineData: gssLineData,
+      onChangeGssLineData: this.onChangeGssLineData,
+      onSolutionSetSelected: this.onSolutionSetSelected,
+      toolbarTools: ['line', 'polygon'],
+      mathMlOptions: mathMlOptions
+    }), correctAnswerErrors['correctAnswer'] && /*#__PURE__*/React.createElement(ErrorMessage, null, correctAnswerErrors['correctAnswer'])), /*#__PURE__*/React.createElement(_configUi.AlertDialog, {
+      open: dialog.open,
+      title: dialog.title,
+      text: dialog.text,
+      onClose: dialog.onClose,
+      onConfirm: dialog.onConfirm,
+      onConfirmText: dialog.onConfirmText ? dialog.onConfirmText : 'OK'
+    }));
+  }
+}
 exports.CorrectResponse = CorrectResponse;
-(0, _defineProperty2["default"])(CorrectResponse, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
-  errors: _propTypes["default"].object,
-  model: _propTypes["default"].object.isRequired,
-  onChange: _propTypes["default"].func.isRequired
+(0, _defineProperty2.default)(CorrectResponse, "propTypes", {
+  errors: _propTypes.default.object,
+  model: _propTypes.default.object.isRequired,
+  onChange: _propTypes.default.func.isRequired
 });
-
-var _default = (0, _styles.withStyles)(styles)(CorrectResponse);
-
-exports["default"] = _default;
+var _default = exports.default = CorrectResponse;
 //# sourceMappingURL=correct-response.js.map