@pie-element/number-line 5.10.0 → 5.10.1-beta.587

package/configure/lib/main.js

@@ -5,10 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Main = exports.toPointType = void 0;
+exports.toPointType = exports["default"] = exports.Main = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -23,45 +25,51 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _configUi = require("@pie-lib/config-ui");
 
+var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
+
+var _numberLine = require("@pie-element/number-line");
+
 var _numberTextField = _interopRequireDefault(require("./number-text-field"));
 
 var _cardBar = _interopRequireDefault(require("./card-bar"));
 
-var _numberLine = require("@pie-element/number-line");
-
 var _size = _interopRequireDefault(require("./size"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
-
 var _domain = _interopRequireDefault(require("./domain"));
 
 var _arrows = _interopRequireDefault(require("./arrows"));
 
 var _pointConfig = _interopRequireDefault(require("./point-config"));
 
-var _react = _interopRequireDefault(require("react"));
-
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
 var _styles = require("@material-ui/core/styles");
 
-var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
 
 var _ticks = _interopRequireDefault(require("./ticks"));
 
 var _defaults = require("./defaults");
 
+var _utils = require("./utils");
+
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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; } }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 var trimModel = function trimModel(model) {
   return _objectSpread(_objectSpread({}, model), {}, {
@@ -101,7 +109,7 @@ var styles = function styles(theme) {
       margin: '20px 0'
     },
     pointTypeChooser: {
-      margin: '20px 0'
+      margin: "".concat(theme.spacing.unit * 2.5, "px 0")
     },
     promptHolder: {
       width: '100%',
@@ -115,6 +123,19 @@ var styles = function styles(theme) {
     section: {
       margin: 0,
       padding: 0
+    },
+    tooltip: {
+      fontSize: theme.typography.fontSize - 2,
+      whiteSpace: 'pre',
+      maxWidth: '500px'
+    },
+    inlineFlexContainer: {
+      display: 'inline-flex'
+    },
+    errorText: {
+      fontSize: theme.typography.fontSize - 2,
+      color: 'red',
+      paddingTop: theme.spacing.unit
     }
   };
 };
@@ -127,9 +148,9 @@ var toPointType = function toPointType(response) {
       }
 
       return response.pointType[0];
-    } else {
-      return "".concat(response.leftPoint[0]).concat(response.rightPoint[0]);
     }
+
+    return "".concat(response.leftPoint[0]).concat(response.rightPoint[0]);
   }
 
   return "".concat(response.type[0]).concat(rest(response)).toUpperCase();
@@ -142,20 +163,17 @@ var Main = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(Main);
 
-  function Main() {
+  function Main(props) {
     var _this;
 
     (0, _classCallCheck2["default"])(this, Main);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "graphChange", function (obj) {
+      var _this$props = _this.props,
+          model = _this$props.model,
+          onChange = _this$props.onChange;
 
-    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), "graphChange", function (o) {
-      var onChange = _this.props.onChange;
-
-      var graph = _objectSpread(_objectSpread({}, _this.props.model.graph), o);
+      var graph = _objectSpread(_objectSpread({}, model.graph), obj);
 
       onChange({
         graph: graph
@@ -169,9 +187,28 @@ var Main = /*#__PURE__*/function (_React$Component) {
         height: height
       });
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getAdjustedHeight", function (availableTypes, maxNumberOfPoints) {
+      var onlyPFAvailable = true;
+      Object.entries(availableTypes || {}).forEach(function (_ref2) {
+        var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
+            type = _ref3[0],
+            value = _ref3[1];
+
+        if (type !== 'PF' && value) {
+          onlyPFAvailable = false;
+          return;
+        }
+      });
+      return maxNumberOfPoints && (maxNumberOfPoints === 1 || onlyPFAvailable) ? 100 : 50 + (maxNumberOfPoints || 20) * 25;
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeMaxNoOfPoints", function (e, maxNumberOfPoints) {
-      return _this.graphChange({
-        maxNumberOfPoints: maxNumberOfPoints
+      var availableTypes = _this.props.model.graph.availableTypes;
+
+      var height = _this.getAdjustedHeight(availableTypes, maxNumberOfPoints);
+
+      _this.graphChange({
+        maxNumberOfPoints: maxNumberOfPoints,
+        height: height
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeGraphTitle", function (title) {
@@ -180,15 +217,15 @@ var Main = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeTicks", function (ticks) {
-      var _this$props = _this.props,
-          model = _this$props.model,
-          onChange = _this$props.onChange;
+      var _this$props2 = _this.props,
+          model = _this$props2.model,
+          onChange = _this$props2.onChange;
 
       var correctResponse = _numberLine.tickUtils.snapElements(model.graph.domain, ticks, model.correctResponse);
 
       var initialElements = _numberLine.tickUtils.snapElements(model.graph.domain, ticks, model.graph.initialElements);
 
-      var graph = _objectSpread(_objectSpread({}, _this.props.model.graph), {}, {
+      var graph = _objectSpread(_objectSpread({}, model.graph), {}, {
         ticks: ticks,
         initialElements: initialElements
       });
@@ -204,8 +241,18 @@ var Main = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setDefaults", function () {
+      var _defaultModel$graph = _defaults.model.graph,
+          availableTypes = _defaultModel$graph.availableTypes,
+          maxNumberOfPoints = _defaultModel$graph.maxNumberOfPoints;
+
+      var height = _this.getAdjustedHeight(availableTypes, maxNumberOfPoints);
+
+      var graph = _objectSpread(_objectSpread({}, (0, _cloneDeep["default"])(_defaults.model.graph)), {}, {
+        height: height
+      });
+
       _this.props.onChange({
-        graph: (0, _cloneDeep["default"])(_defaults.model.graph)
+        graph: graph
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "exhibitChanged", function (event, value) {
@@ -218,10 +265,10 @@ var Main = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "moveCorrectResponse", function (index, el, position) {
-      var _this$props2 = _this.props,
-          onChange = _this$props2.onChange,
-          model = _this$props2.model;
       el.position = position;
+      var _this$props3 = _this.props,
+          onChange = _this$props3.onChange,
+          model = _this$props3.model;
       var update = toSessionFormat(el.type === 'line' && lineIsSwitched(el) ? switchGraphLine(el) : el);
       var correctResponse = (0, _toConsumableArray2["default"])(model.correctResponse);
       correctResponse[index] = update;
@@ -230,12 +277,12 @@ var Main = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "moveInitialView", function (index, el, position) {
-      var _this$props3 = _this.props,
-          model = _this$props3.model,
-          onChange = _this$props3.onChange;
       el.position = position;
+      var _this$props4 = _this.props,
+          model = _this$props4.model,
+          onChange = _this$props4.onChange;
       var update = toSessionFormat(el.type === 'line' && lineIsSwitched(el) ? switchGraphLine(el) : el);
-      var initialElements = (0, _toConsumableArray2["default"])(_this.props.model.graph.initialElements);
+      var initialElements = (0, _toConsumableArray2["default"])(model.graph.initialElements);
       initialElements[index] = update;
 
       var graph = _objectSpread(_objectSpread({}, model.graph), {}, {
@@ -247,15 +294,20 @@ var Main = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "availableTypesChange", function (availableTypes) {
-      var _this$props4 = _this.props,
-          model = _this$props4.model,
-          onChange = _this$props4.onChange;
-      new Set(model.correctResponse.map(toPointType)).forEach(function (pointType) {
+      var _this$props5 = _this.props,
+          model = _this$props5.model,
+          onChange = _this$props5.onChange;
+      var correctResponse = model.correctResponse,
+          maxNumberOfPoints = model.graph.maxNumberOfPoints;
+      new Set(correctResponse.map(toPointType)).forEach(function (pointType) {
         availableTypes[pointType] = true;
       });
 
+      var height = _this.getAdjustedHeight(availableTypes, maxNumberOfPoints);
+
       var graph = _objectSpread(_objectSpread({}, model.graph), {}, {
-        availableTypes: availableTypes
+        availableTypes: availableTypes,
+        height: height
       });
 
       onChange({
@@ -263,9 +315,9 @@ var Main = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deleteCorrectResponse", function (indices) {
-      var _this$props5 = _this.props,
-          model = _this$props5.model,
-          onChange = _this$props5.onChange;
+      var _this$props6 = _this.props,
+          model = _this$props6.model,
+          onChange = _this$props6.onChange;
       var correctResponse = model.correctResponse.filter(function (v, index) {
         return !indices.some(function (d) {
           return d === index;
@@ -276,9 +328,9 @@ var Main = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deleteInitialView", function (indices) {
-      var _this$props6 = _this.props,
-          model = _this$props6.model,
-          onChange = _this$props6.onChange;
+      var _this$props7 = _this.props,
+          model = _this$props7.model,
+          onChange = _this$props7.onChange;
       var initialElements = model.graph.initialElements.filter(function (v, index) {
         return !indices.some(function (d) {
           return d === index;
@@ -294,9 +346,9 @@ var Main = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addCorrectResponse", function (data) {
-      var _this$props7 = _this.props,
-          model = _this$props7.model,
-          onChange = _this$props7.onChange;
+      var _this$props8 = _this.props,
+          model = _this$props8.model,
+          onChange = _this$props8.onChange;
       var correctResponse = (0, _toConsumableArray2["default"])(model.correctResponse);
       correctResponse.push(toSessionFormat(data));
       onChange({
@@ -304,9 +356,9 @@ var Main = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addInitialView", function (data) {
-      var _this$props8 = _this.props,
-          onChange = _this$props8.onChange,
-          model = _this$props8.model;
+      var _this$props9 = _this.props,
+          onChange = _this$props9.onChange,
+          model = _this$props9.model;
 
       var graph = _objectSpread({}, model.graph);
 
@@ -318,19 +370,17 @@ var Main = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "clearCorrectResponse", function () {
       var onChange = _this.props.onChange;
-      var correctResponse = [];
       onChange({
-        correctResponse: correctResponse
+        correctResponse: []
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "clearInitialView", function () {
-      var _this$props9 = _this.props,
-          model = _this$props9.model,
-          onChange = _this$props9.onChange;
-      var initialElements = [];
+      var _this$props10 = _this.props,
+          model = _this$props10.model,
+          onChange = _this$props10.onChange;
 
       var graph = _objectSpread(_objectSpread({}, model.graph), {}, {
-        initialElements: initialElements
+        initialElements: []
       });
 
       onChange({
@@ -338,9 +388,9 @@ var Main = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "undoCorrectResponse", function () {
-      var _this$props10 = _this.props,
-          model = _this$props10.model,
-          onChange = _this$props10.onChange;
+      var _this$props11 = _this.props,
+          model = _this$props11.model,
+          onChange = _this$props11.onChange;
       var correctResponse = (0, _toConsumableArray2["default"])(model.correctResponse);
       correctResponse.pop();
       onChange({
@@ -348,9 +398,9 @@ var Main = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "undoInitialView", function () {
-      var _this$props11 = _this.props,
-          onChange = _this$props11.onChange,
-          model = _this$props11.model;
+      var _this$props12 = _this.props,
+          onChange = _this$props12.onChange,
+          model = _this$props12.model;
 
       var graph = _objectSpread({}, model.graph);
 
@@ -360,7 +410,16 @@ var Main = /*#__PURE__*/function (_React$Component) {
         graph: graph
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onAddElement", _this.addInitialView);
+    var _props$model$graph = props.model.graph,
+        _availableTypes = _props$model$graph.availableTypes,
+        _maxNumberOfPoints = _props$model$graph.maxNumberOfPoints;
+
+    var _height = _this.getAdjustedHeight(_availableTypes, _maxNumberOfPoints);
+
+    _this.graphChange({
+      height: _height
+    });
+
     return _this;
   }
 
@@ -369,21 +428,39 @@ var Main = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var _this$props12 = this.props,
-          classes = _this$props12.classes,
-          model = _this$props12.model,
-          _onChange = _this$props12.onChange,
-          configuration = _this$props12.configuration;
-      var graph = model.graph;
-
-      var _ref2 = configuration || {},
-          _ref2$prompt = _ref2.prompt,
-          prompt = _ref2$prompt === void 0 ? {} : _ref2$prompt;
-
+      var _this$props13 = this.props,
+          classes = _this$props13.classes,
+          model = _this$props13.model,
+          _onChange = _this$props13.onChange,
+          configuration = _this$props13.configuration,
+          uploadSoundSupport = _this$props13.uploadSoundSupport;
+
+      var _ref4 = configuration || {},
+          _ref4$prompt = _ref4.prompt,
+          prompt = _ref4$prompt === void 0 ? {} : _ref4$prompt;
+
+      var _ref5 = model || {},
+          errors = _ref5.errors,
+          graph = _ref5.graph,
+          spellCheckEnabled = _ref5.spellCheckEnabled,
+          toolbarEditorPosition = _ref5.toolbarEditorPosition;
+
+      var _ref6 = errors || {},
+          widthError = _ref6.widthError,
+          domainError = _ref6.domainError,
+          maxError = _ref6.maxError,
+          pointsError = _ref6.pointsError,
+          correctResponseError = _ref6.correctResponseError;
+
+      var validationMessage = (0, _utils.generateValidationMessage)();
       var correctResponse = (0, _cloneDeep["default"])(model.correctResponse || []).map(toGraphFormat);
       var initialView = (0, _cloneDeep["default"])(graph.initialElements || []).map(toGraphFormat);
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.root
+      var toolbarOpts = {
+        position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+      };
+      return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
+        hideSettings: true,
+        settings: null
       }, prompt.settings && /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, {
         label: prompt.label
       }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
@@ -395,9 +472,32 @@ var Main = /*#__PURE__*/function (_React$Component) {
           });
         },
         nonEmpty: false,
-        disableUnderline: true
+        disableUnderline: true,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }]
       })), /*#__PURE__*/_react["default"].createElement(_cardBar["default"], {
-        header: "Attributes"
+        header: "Attributes",
+        info: /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+          classes: {
+            tooltip: classes.tooltip
+          },
+          disableFocusListener: true,
+          disableTouchListener: true,
+          placement: 'right',
+          title: validationMessage
+        }, /*#__PURE__*/_react["default"].createElement(_Info["default"], {
+          fontSize: 'small',
+          color: 'primary',
+          style: {
+            marginLeft: '8px'
+          }
+        }))
       }, "Set up the number line by entering the domain and number of tick marks to display. Labels on the number line can be edited or removed by clicking on the label."), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.row
       }, /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, {
@@ -414,7 +514,13 @@ var Main = /*#__PURE__*/function (_React$Component) {
             domain: domain
           });
         }
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
+      }))), widthError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, widthError), maxError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, maxError), domainError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, domainError), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.row
       }, /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, {
         label: 'Ticks'
@@ -431,7 +537,15 @@ var Main = /*#__PURE__*/function (_React$Component) {
         label: 'Title'
       }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
         markup: graph.title || '',
-        onChange: this.changeGraphTitle
+        onChange: this.changeGraphTitle,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }]
       })), /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, {
         label: 'Limits'
       }, /*#__PURE__*/_react["default"].createElement(_numberTextField["default"], {
@@ -441,14 +555,16 @@ var Main = /*#__PURE__*/function (_React$Component) {
         max: 20,
         value: graph.maxNumberOfPoints,
         onChange: this.changeMaxNoOfPoints
-      })), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      }), pointsError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, pointsError)), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         variant: "outlined",
         mini: true,
         color: "primary",
         onClick: this.setDefaults
       }, "Reset to default values"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), !graph.exhibitOnly && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_cardBar["default"], {
         header: "Correct Response"
-      }, "Select answer type and place it on the number line. Intersecting points, line segments and/or rays will appear above the number line.", ' ', /*#__PURE__*/_react["default"].createElement("i", null, "Note: A maximum of 20 points, line segments or rays may be plotted.")), /*#__PURE__*/_react["default"].createElement(_numberLine.NumberLineComponent, {
+      }, "Select answer type and place it on the number line. Intersecting points, line segments and/or rays will appear above the number line. ", /*#__PURE__*/_react["default"].createElement("i", null, "Note: A maximum of 20 points, line segments or rays may be plotted.")), /*#__PURE__*/_react["default"].createElement(_numberLine.NumberLineComponent, {
         onMoveElement: this.moveCorrectResponse,
         onDeleteElements: this.deleteCorrectResponse,
         onAddElement: this.addCorrectResponse,
@@ -457,7 +573,9 @@ var Main = /*#__PURE__*/function (_React$Component) {
         answer: correctResponse //strip feedback for this model
         ,
         model: trimModel(model)
-      }), /*#__PURE__*/_react["default"].createElement(_cardBar["default"], {
+      }), correctResponseError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, correctResponseError), /*#__PURE__*/_react["default"].createElement(_cardBar["default"], {
         header: "Available Types",
         mini: true
       }, "Click on the input options to be displayed to the students. All inputs will display by default."), /*#__PURE__*/_react["default"].createElement("div", {
@@ -470,7 +588,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
       }, "Use this number line to set a starting point, line segment or ray. This is optional. ", /*#__PURE__*/_react["default"].createElement("br", null), "This number line may also be used to make an exhibit number line, which can not be manipulated by a student."), /*#__PURE__*/_react["default"].createElement(_numberLine.NumberLineComponent, {
         onMoveElement: this.moveInitialView,
         onDeleteElements: this.deleteInitialView,
-        onAddElement: this.onAddElement,
+        onAddElement: this.addInitialView,
         onClearElements: this.clearInitialView,
         onUndoElement: this.undoInitialView,
         answer: initialView,
@@ -487,7 +605,8 @@ var Main = /*#__PURE__*/function (_React$Component) {
           return _onChange({
             feedback: feedback
           });
-        }
+        },
+        toolbarOpts: toolbarOpts
       })));
     }
   }]);
@@ -499,7 +618,8 @@ exports.Main = Main;
   classes: _propTypes["default"].object.isRequired,
   model: _propTypes["default"].object.isRequired,
   configuration: _propTypes["default"].object.isRequired,
-  onChange: _propTypes["default"].func.isRequired
+  onChange: _propTypes["default"].func.isRequired,
+  uploadSoundSupport: _propTypes["default"].object.isRequired
 });
 
 var _default = (0, _styles.withStyles)(styles, {