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

package/lib/main.js

@@ -1,444 +1,355 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Main = 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.Main = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(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 _renderUi = require("@pie-lib/render-ui");
-
 var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
-
 var _utils = require("./utils");
-
 var _configUi = require("@pie-lib/config-ui");
-
-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 Main = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Main, _React$Component);
-
-  var _super = _createSuper(Main);
-
-  function Main() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Main);
-
-    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", {
+const MainContainer = (0, _styles.styled)(_renderUi.UiLayout)({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background()
+});
+const TeacherInstructions = (0, _styles.styled)(_renderUi.Collapsible)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const Graph = (0, _styles.styled)(_graphingSolutionSet.GraphContainer)(({
+  theme
+}) => ({
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(2)
+}));
+class Main extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "state", {
       showingCorrect: false,
       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), "toggleCorrect", function (showingCorrect) {
-      return _this.setState({
-        showingCorrect: showingCorrect
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResetClick", function () {
-      var _this$props = _this.props,
-          model = _this$props.model,
-          session = _this$props.session,
-          setGssData = _this$props.setGssData;
-      var gssData = model.gssData;
-
-      _this.setState({
+    /*
+     * Function to handle the AlertDialog
+     * @param {boolean} open - open state of 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 toggle the correct answer
+     * @param {boolean} showingCorrect - state of the correct answer
+     * */
+    (0, _defineProperty2.default)(this, "toggleCorrect", showingCorrect => this.setState({
+      showingCorrect
+    }));
+    /*
+     * Reset the graph to original state
+     * */
+    (0, _defineProperty2.default)(this, "onResetClick", () => {
+      const {
+        model,
+        session,
+        setGssData
+      } = this.props;
+      let {
+        gssData
+      } = 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
             session.answer = [];
             gssData.selectedTool = 'lineA';
             gssData.lineA.lineType = 'Solid';
-            if (gssData.lineB) gssData.lineB.lineType = 'Solid'; // Set the gssData and session
-
+            if (gssData.lineB) gssData.lineB.lineType = 'Solid';
+            // Set the gssData and session
             setGssData(gssData, session);
-
-            _this.handleAlertDialog(false);
+            this.handleAlertDialog(false);
           },
-          onClose: function onClose() {
-            return _this.handleAlertDialog(false);
-          }
+          onClose: () => this.handleAlertDialog(false)
         }
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSolutionSetSelected", function (point) {
-      var _this$props2 = _this.props,
-          model = _this$props2.model,
-          session = _this$props2.session,
-          setGssData = _this$props2.setGssData;
-      var gssData = model.gssData,
-          disabled = model.disabled;
-
+    /*
+     * Function to handle the event of solution set selected
+     * @param {object} point - point selected on the graph
+     * */
+    (0, _defineProperty2.default)(this, "onSolutionSetSelected", point => {
+      const {
+        model,
+        session,
+        setGssData
+      } = this.props;
+      const {
+        gssData,
+        disabled
+      } = model;
       if (disabled) {
         return;
       }
-
-      var _iterator = _createForOfIteratorHelper(gssData.sections),
-          _step;
-
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var section = _step.value;
-
-          if ((0, _utils.pointInsidePolygon)(point, section)) {
-            var polygon = {
-              points: section,
-              building: false,
-              type: 'polygon',
-              closed: true,
-              isSolution: true
-            };
-            session.answer = session.answer.filter(function (mark) {
-              return mark.type !== 'polygon';
-            });
-            session.answer.push(polygon);
-            break;
-          }
+      for (const section of gssData.sections) {
+        if ((0, _utils.pointInsidePolygon)(point, section)) {
+          let polygon = {
+            points: section,
+            building: false,
+            type: 'polygon',
+            closed: true,
+            isSolution: true
+          };
+          session.answer = session.answer.filter(mark => mark.type !== 'polygon');
+          session.answer.push(polygon);
+          break;
         }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
       }
-
       setGssData(gssData, session);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChangeGssLineData", function (gssData, oldSelectedTool) {
-      var _this$props3 = _this.props,
-          model = _this$props3.model,
-          session = _this$props3.session;
-      var domain = model.domain,
-          range = model.range,
-          disabled = model.disabled;
-
+    /*
+     * Function to handle the event of change in GSS Line Data
+     * @param {object} gssData - GSS Line Data
+     * @param {string} oldSelectedTool - old selected tool
+     * */
+    (0, _defineProperty2.default)(this, "onChangeGssLineData", (gssData, oldSelectedTool) => {
+      const {
+        model,
+        session
+      } = this.props;
+      const {
+        domain,
+        range,
+        disabled
+      } = model;
       if (disabled) {
         return;
       }
-
       if (gssData.selectedTool === 'solutionSet') {
-        var lines = session.answer.filter(function (mark) {
-          return mark.type !== 'polygon';
-        });
-
+        let lines = session.answer.filter(mark => mark.type !== 'polygon');
         if (!(0, _utils.checkIfLinesAreAdded)(gssData, lines)) {
           gssData.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 = session.answer.filter(function (mark) {
-            return mark.type !== 'polygon';
-          });
-
-          gssData = (0, _utils.findSectionsInSolutionSet)(gssData, _lines, domain, range);
+          let lines = session.answer.filter(mark => mark.type !== 'polygon');
+          gssData = (0, _utils.findSectionsInSolutionSet)(gssData, lines, domain, range);
         }
-
-        _this.handleGssDataChange(gssData, session);
+        this.handleGssDataChange(gssData, session);
       } else {
-        var polygons = session.answer.filter(function (mark) {
-          return mark.type === 'polygon';
-        });
-
+        let polygons = session.answer.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() {
-                session.answer = session.answer.filter(function (mark) {
-                  return mark.type !== 'polygon';
-                });
-
-                _this.handleGssDataChange(gssData, session);
-
-                _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: () => {
+                session.answer = session.answer.filter(mark => mark.type !== 'polygon');
+                this.handleGssDataChange(gssData, session);
+                this.handleAlertDialog(false);
               },
               onConfirmText: 'CLEAR SOLUTION SET',
-              onClose: function onClose() {
+              onClose: () => {
                 gssData.selectedTool = oldSelectedTool;
-
-                _this.handleGssDataChange(gssData, session);
-
-                _this.handleAlertDialog(false);
+                this.handleGssDataChange(gssData, session);
+                this.handleAlertDialog(false);
               }
             }
           });
         } else {
-          _this.handleGssDataChange(gssData, session);
+          this.handleGssDataChange(gssData, session);
         }
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleGssDataChange", function (gssData, session) {
-      var setGssData = _this.props.setGssData;
-
+    /*
+     * Function to handle the event of change in GSS Data
+     * @param {object} gssData - GSS Data
+     * @param {object} session - session data
+     * */
+    (0, _defineProperty2.default)(this, "handleGssDataChange", (gssData, session) => {
+      const {
+        setGssData
+      } = this.props;
       if (session.answer && session.answer.length > 0 && session.answer[0] && gssData.lineA) {
         session.answer[0].fill = gssData.lineA.lineType;
       }
-
       if (session.answer && session.answer.length > 1 && session.answer[1] && gssData.lineB) {
         session.answer[1].fill = gssData.lineB.lineType;
       }
-
       if (gssData.selectedTool === 'lineB' && session.answer.length === 0 || gssData.selectedTool === 'lineB' && session.answer[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)
           }
         });
-
         gssData.selectedTool = 'lineA';
       }
-
       if (gssData.selectedTool === 'lineA' && session.answer.length > 1 && session.answer[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)
           }
         });
-
         gssData.selectedTool = 'lineB';
       }
-
       setGssData(gssData, session);
     });
-    return _this;
   }
-
-  (0, _createClass2["default"])(Main, [{
-    key: "render",
-    value:
-    /*
-     * Render the component
-     * */
-    function render() {
-      var _this$props4 = this.props,
-          model = _this$props4.model,
-          classes = _this$props4.classes,
-          onAnswersChange = _this$props4.onAnswersChange,
-          session = _this$props4.session;
-      var _this$state = this.state,
-          showingCorrect = _this$state.showingCorrect,
-          dialog = _this$state.dialog;
-
-      var _ref = session || {},
-          answer = _ref.answer;
-
-      var _ref2 = model || {},
-          answersCorrected = _ref2.answersCorrected,
-          arrows = _ref2.arrows,
-          coordinatesOnHover = _ref2.coordinatesOnHover,
-          correctResponse = _ref2.correctResponse,
-          defaultTool = _ref2.defaultTool,
-          disabled = _ref2.disabled,
-          domain = _ref2.domain,
-          extraCSSRules = _ref2.extraCSSRules,
-          labels = _ref2.labels,
-          labelsEnabled = _ref2.labelsEnabled,
-          prompt = _ref2.prompt,
-          range = _ref2.range,
-          rationale = _ref2.rationale,
-          size = _ref2.size,
-          showToggle = _ref2.showToggle,
-          title = _ref2.title,
-          titleEnabled = _ref2.titleEnabled,
-          teacherInstructions = _ref2.teacherInstructions,
-          language = _ref2.language,
-          gssLineData = _ref2.gssLineData,
-          gssData = _ref2.gssData;
-
-      var marks = answersCorrected || answer || [];
-      var showRationale = model.rationale && ((0, _renderUi.hasText)(model.rationale) || (0, _renderUi.hasMedia)(model.rationale));
-      var showTeacherInstructions = model.teacherInstructions && ((0, _renderUi.hasText)(model.teacherInstructions) || (0, _renderUi.hasMedia)(model.teacherInstructions));
-      return /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
-        extraCSSRules: extraCSSRules,
-        className: classes.mainContainer
-      }, showTeacherInstructions && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
-        className: classes.teacherInstructions,
-        labels: {
-          hidden: 'Show Teacher Instructions',
-          visible: 'Hide Teacher Instructions'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        prompt: teacherInstructions
-      })), prompt && /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        className: "prompt",
-        prompt: prompt
-      }), /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
-        show: showToggle,
-        toggled: showingCorrect,
-        onToggle: this.toggleCorrect,
-        language: language
-      }), showingCorrect && showToggle ? /*#__PURE__*/_react["default"].createElement(_graphingSolutionSet.GraphContainer, {
-        className: classes.graph,
-        axesSettings: {
-          includeArrows: arrows
-        },
-        coordinatesOnHover: coordinatesOnHover,
-        disabled: true,
-        disabledLabels: true,
-        disabledTitle: true,
-        domain: domain,
-        labels: labels,
-        marks: correctResponse.map(function (i) {
-          return _objectSpread(_objectSpread({}, i), {}, {
-            correctness: 'correct'
-          });
-        }),
-        onChangeMarks: onAnswersChange,
-        range: range,
-        showLabels: labelsEnabled,
-        showTitle: titleEnabled,
-        size: size,
-        title: title,
-        language: language,
-        gssLineData: gssLineData,
-        onChangeGssLineData: this.onChangeGssLineData,
-        onSolutionSetSelected: this.onSolutionSetSelected,
-        toolbarTools: ['line', 'polygon']
-      }) : /*#__PURE__*/_react["default"].createElement(_graphingSolutionSet.GraphContainer, {
-        className: classes.graph,
-        axesSettings: {
-          includeArrows: arrows
-        },
-        coordinatesOnHover: coordinatesOnHover,
-        defaultTool: defaultTool,
-        disabled: disabled,
-        disabledLabels: true,
-        disabledTitle: true,
-        domain: domain,
-        labels: labels,
-        marks: marks,
-        onChangeMarks: onAnswersChange,
-        onCustomReset: this.onResetClick,
-        range: range,
-        showLabels: labelsEnabled,
-        showTitle: titleEnabled,
-        size: size,
-        title: title,
-        language: language,
-        gssLineData: gssData,
-        onChangeGssLineData: this.onChangeGssLineData,
-        onSolutionSetSelected: this.onSolutionSetSelected,
-        toolbarTools: ['line', 'polygon']
-      }), showRationale && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
-        labels: {
-          hidden: 'Show Rationale',
-          visible: 'Hide Rationale'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        prompt: rationale
-      })), /*#__PURE__*/_react["default"].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 Main;
-}(_react["default"].Component);
-
+  /*
+   * Render the component
+   * */
+  render() {
+    const {
+      model,
+      onAnswersChange,
+      session
+    } = this.props;
+    const {
+      showingCorrect,
+      dialog
+    } = this.state;
+    const {
+      answer
+    } = session || {};
+    const {
+      answersCorrected,
+      arrows,
+      coordinatesOnHover,
+      correctResponse,
+      defaultTool,
+      disabled,
+      domain,
+      extraCSSRules,
+      labels,
+      labelsEnabled,
+      prompt,
+      range,
+      rationale,
+      size,
+      showToggle,
+      title,
+      titleEnabled,
+      teacherInstructions,
+      language,
+      gssLineData,
+      gssData
+    } = model || {};
+    const marks = answersCorrected || answer || [];
+    const showRationale = model.rationale && ((0, _renderUi.hasText)(model.rationale) || (0, _renderUi.hasMedia)(model.rationale));
+    const showTeacherInstructions = model.teacherInstructions && ((0, _renderUi.hasText)(model.teacherInstructions) || (0, _renderUi.hasMedia)(model.teacherInstructions));
+    return /*#__PURE__*/_react.default.createElement(MainContainer, {
+      extraCSSRules: extraCSSRules
+    }, showTeacherInstructions && /*#__PURE__*/_react.default.createElement(TeacherInstructions, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: teacherInstructions
+    })), prompt && /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      className: "prompt",
+      prompt: prompt
+    }), /*#__PURE__*/_react.default.createElement(_correctAnswerToggle.default, {
+      show: showToggle,
+      toggled: showingCorrect,
+      onToggle: this.toggleCorrect,
+      language: language
+    }), showingCorrect && showToggle ? /*#__PURE__*/_react.default.createElement(Graph, {
+      axesSettings: {
+        includeArrows: arrows
+      },
+      coordinatesOnHover: coordinatesOnHover,
+      disabled: true,
+      disabledLabels: true,
+      disabledTitle: true,
+      domain: domain,
+      labels: labels,
+      marks: correctResponse.map(i => ({
+        ...i,
+        correctness: 'correct'
+      })),
+      onChangeMarks: onAnswersChange,
+      range: range,
+      showLabels: labelsEnabled,
+      showTitle: titleEnabled,
+      size: size,
+      title: title,
+      language: language,
+      gssLineData: gssLineData,
+      onChangeGssLineData: this.onChangeGssLineData,
+      onSolutionSetSelected: this.onSolutionSetSelected,
+      toolbarTools: ['line', 'polygon']
+    }) : /*#__PURE__*/_react.default.createElement(Graph, {
+      axesSettings: {
+        includeArrows: arrows
+      },
+      coordinatesOnHover: coordinatesOnHover,
+      defaultTool: defaultTool,
+      disabled: disabled,
+      disabledLabels: true,
+      disabledTitle: true,
+      domain: domain,
+      labels: labels,
+      marks: marks,
+      onChangeMarks: onAnswersChange,
+      onCustomReset: this.onResetClick,
+      range: range,
+      showLabels: labelsEnabled,
+      showTitle: titleEnabled,
+      size: size,
+      title: title,
+      language: language,
+      gssLineData: gssData,
+      onChangeGssLineData: this.onChangeGssLineData,
+      onSolutionSetSelected: this.onSolutionSetSelected,
+      toolbarTools: ['line', 'polygon']
+    }), showRationale && /*#__PURE__*/_react.default.createElement(_renderUi.Collapsible, {
+      labels: {
+        hidden: 'Show Rationale',
+        visible: 'Hide Rationale'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: rationale
+    })), /*#__PURE__*/_react.default.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.Main = Main;
-(0, _defineProperty2["default"])(Main, "propTypes", {
-  classes: _propTypes["default"].object,
-  model: _propTypes["default"].object.isRequired,
-  session: _propTypes["default"].object.isRequired,
-  onAnswersChange: _propTypes["default"].func
-});
-(0, _defineProperty2["default"])(Main, "defaultProps", {
-  classes: {}
+(0, _defineProperty2.default)(Main, "propTypes", {
+  model: _propTypes.default.object.isRequired,
+  session: _propTypes.default.object.isRequired,
+  onAnswersChange: _propTypes.default.func
 });
-
-var styles = function styles(theme) {
-  return {
-    mainContainer: {
-      color: _renderUi.color.text(),
-      backgroundColor: _renderUi.color.background()
-    },
-    teacherInstructions: {
-      marginBottom: theme.spacing.unit * 2
-    },
-    graph: {
-      marginTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit * 2
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(Main);
-
-exports["default"] = _default;
+var _default = exports.default = Main;
 //# sourceMappingURL=main.js.map