@pie-element/number-line 7.6.0 → 7.6.1-next.4

package/configure/lib/defaults.js

@@ -14,9 +14,7 @@ var model = {
     ticks: {
       minor: 0.125,
       major: 0.5,
-      labelStep: '1/2',
-      tickIntervalType: 'Decimal',
-      tickStep: '1/8'
+      tickIntervalType: 'Decimal'
     },
     arrows: {
       left: true,

package/configure/lib/defaults.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/defaults.js"],"names":["model","correctResponse","graph","domain","min","max","ticks","minor","major","labelStep","tickIntervalType","tickStep","arrows","left","right","maxNumberOfPoints","width","initialType","exhibitOnly","toolbarEditorPosition","availableTypes","PF","initialElements","widthEnabled","feedback","correct","type","incorrect","partial","configuration","instruction","settings","enabled","label","prompt","required","teacherInstructions","numberLineDimensions","step","spellCheck","mathMlOptions","mmlOutput","mmlEditing","language","languageChoices","options","maxMaxElements","hidePointConfigButtons","availableTools"],"mappings":"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","sourcesContent":["export const model = {\n  correctResponse: [],\n  graph: {\n    domain: {\n      min: -1,\n      max: 1,\n    },\n    ticks: {\n      minor: 0.125,\n      major: 0.5,\n      labelStep: '1/2',\n      tickIntervalType: 'Decimal',\n      tickStep: '1/8',\n    },\n    arrows: {\n      left: true,\n      right: true,\n    },\n    maxNumberOfPoints: 1,\n    width: 500,\n    initialType: 'PF',\n    exhibitOnly: false,\n    toolbarEditorPosition: 'bottom',\n    availableTypes: {\n      PF: true,\n    },\n    initialElements: [],\n  },\n  widthEnabled: true,\n  feedback: {\n    correct: {\n      default: 'Correct',\n      type: 'none',\n    },\n    incorrect: {\n      default: 'Incorrect',\n      type: 'none',\n    },\n    partial: {\n      default: 'Nearly',\n      type: 'none',\n    },\n  },\n};\n\nexport const configuration = {\n  instruction: {\n    settings: false,\n    enabled: true,\n    label:\n      'Number line questions involve plotting points or other objects. To create one, first set up the number line, then select the plotting tools students will be offered and use them to define the correct answer.',\n  },\n  prompt: {\n    settings: true,\n    label: 'Item Stem',\n    required: false,\n  },\n  teacherInstructions: {\n    settings: true,\n    label: 'Teacher Instructions',\n    required: false,\n  },\n  numberLineDimensions: {\n    settings: true,\n    label: 'Width',\n    enabled: true,\n    min: 200,\n    max: 800,\n    step: 20,\n  },\n  spellCheck: {\n    label: 'Spellcheck',\n    settings: false,\n    enabled: true,\n  },\n  mathMlOptions: {\n    mmlOutput: false,\n    mmlEditing: false,\n  },\n  language: {\n    settings: false,\n    label: 'Specify Language',\n    enabled: false,\n  },\n  languageChoices: {\n    label: 'Language Choices',\n    options: [],\n  },\n  maxMaxElements: 20,\n  hidePointConfigButtons: false,\n  availableTools: ['PF', 'LFF', 'LEF', 'LFE', 'LEE', 'RFN', 'RFP', 'REN', 'REP'],\n};\n"],"file":"defaults.js"}
+{"version":3,"sources":["../src/defaults.js"],"names":["model","correctResponse","graph","domain","min","max","ticks","minor","major","tickIntervalType","arrows","left","right","maxNumberOfPoints","width","initialType","exhibitOnly","toolbarEditorPosition","availableTypes","PF","initialElements","widthEnabled","feedback","correct","type","incorrect","partial","configuration","instruction","settings","enabled","label","prompt","required","teacherInstructions","numberLineDimensions","step","spellCheck","mathMlOptions","mmlOutput","mmlEditing","language","languageChoices","options","maxMaxElements","hidePointConfigButtons","availableTools"],"mappings":"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","sourcesContent":["export const model = {\n  correctResponse: [],\n  graph: {\n    domain: {\n      min: -1,\n      max: 1,\n    },\n    ticks: {\n      minor: 0.125,\n      major: 0.5,\n      tickIntervalType: 'Decimal',\n    },\n    arrows: {\n      left: true,\n      right: true,\n    },\n    maxNumberOfPoints: 1,\n    width: 500,\n    initialType: 'PF',\n    exhibitOnly: false,\n    toolbarEditorPosition: 'bottom',\n    availableTypes: {\n      PF: true,\n    },\n    initialElements: [],\n  },\n  widthEnabled: true,\n  feedback: {\n    correct: {\n      default: 'Correct',\n      type: 'none',\n    },\n    incorrect: {\n      default: 'Incorrect',\n      type: 'none',\n    },\n    partial: {\n      default: 'Nearly',\n      type: 'none',\n    },\n  },\n};\n\nexport const configuration = {\n  instruction: {\n    settings: false,\n    enabled: true,\n    label:\n      'Number line questions involve plotting points or other objects. To create one, first set up the number line, then select the plotting tools students will be offered and use them to define the correct answer.',\n  },\n  prompt: {\n    settings: true,\n    label: 'Item Stem',\n    required: false,\n  },\n  teacherInstructions: {\n    settings: true,\n    label: 'Teacher Instructions',\n    required: false,\n  },\n  numberLineDimensions: {\n    settings: true,\n    label: 'Width',\n    enabled: true,\n    min: 200,\n    max: 800,\n    step: 20,\n  },\n  spellCheck: {\n    label: 'Spellcheck',\n    settings: false,\n    enabled: true,\n  },\n  mathMlOptions: {\n    mmlOutput: false,\n    mmlEditing: false,\n  },\n  language: {\n    settings: false,\n    label: 'Specify Language',\n    enabled: false,\n  },\n  languageChoices: {\n    label: 'Language Choices',\n    options: [],\n  },\n  maxMaxElements: 20,\n  hidePointConfigButtons: false,\n  availableTools: ['PF', 'LFF', 'LEF', 'LFE', 'LEE', 'RFN', 'RFP', 'REN', 'REP'],\n};\n"],"file":"defaults.js"}

package/configure/lib/main.js

@@ -59,15 +59,13 @@ var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
 
 var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
 
-var math = _interopRequireWildcard(require("mathjs"));
-
 var _ticks = _interopRequireDefault(require("./ticks"));
 
 var _defaults = require("./defaults");
 
 var _utils = require("./utils");
 
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var math = _interopRequireWildcard(require("mathjs"));
 
 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); }
 
@@ -92,27 +90,15 @@ var trimModel = function trimModel(model) {
     }),
     correctResponse: undefined
   });
-}; // Object holding information related to tick and label interval values.
-
-
-var ticksModel = {
-  tickIntervalType: 'Decimal',
-  integerTick: 0,
-  fractionTick: '0/1',
-  decimalTick: 0,
-  fractionLabel: '0/1',
-  decimalLabel: 0
-}; // Object holding data related to possible values for ticks and label interval in array.
-
-var data = {
-  minorLimits: {},
-  minorValues: {},
-  majorValues: {}
 };
+
 var lineIsSwitched = _numberLine.dataConverter.lineIsSwitched,
     switchGraphLine = _numberLine.dataConverter.switchGraphLine,
     toGraphFormat = _numberLine.dataConverter.toGraphFormat,
     toSessionFormat = _numberLine.dataConverter.toSessionFormat;
+var minorLimits = {};
+var minorValues = {};
+var majorValues = {};
 
 var styles = function styles(theme) {
   return {
@@ -191,22 +177,11 @@ var Main = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(Main);
 
-  function Main(_props) {
+  function Main(props) {
     var _this;
 
     (0, _classCallCheck2["default"])(this, Main);
-    _this = _super.call(this, _props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "checkAndAdjustHeight", function (props) {
-      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
-      });
-    });
+    _this = _super.call(this, props);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "graphChange", function (obj) {
       var _this$props = _this.props,
           model = _this$props.model,
@@ -230,12 +205,10 @@ var Main = /*#__PURE__*/function (_React$Component) {
             graph: model.graph
           }
         });
-      }
-
-      _this.reloadTicksData(graph.domain, graph.width, graph.ticks);
+      } //reload ticks value whenever domain and width is changed
 
-      _this.assignTicksModelToGraph(graph);
 
+      graph = _this.reloadTicksData(graph);
       onChange({
         graph: graph
       });
@@ -248,113 +221,6 @@ var Main = /*#__PURE__*/function (_React$Component) {
         height: height
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "reloadTicksData", function (domain, width, ticks) {
-      //check correct response
-      var model = _this.props.model;
-
-      var graph = _objectSpread({}, model.graph);
-
-      data.minorLimits = _numberLine.tickUtils.getMinorLimits(domain, width);
-      data.minorValues = _numberLine.tickUtils.generateMinorValues(data.minorLimits);
-      data.majorValues = {};
-
-      var initTickModel = function initTickModel() {
-        if (ticks.tickIntervalType) ticksModel.tickIntervalType = ticks.tickIntervalType; //setting minor values
-
-        if (ticks.minor < data.minorLimits.min || ticks.minor > data.minorLimits.max) {
-          ticksModel.decimalTick = data.minorValues.decimal[0];
-          ticksModel.fractionTick = data.minorValues.fraction[0];
-        } else {
-          ticksModel.decimalTick = math.number(ticks.minor);
-          ticksModel.fractionTick = data.minorValues.fraction[data.minorValues.decimal.indexOf(ticksModel.decimalTick)];
-        }
-
-        if (Number.isInteger(ticksModel.decimalTick)) {
-          ticksModel.integerTick = math.number(ticksModel.decimalTick);
-        } else {
-          var firstInteger = data.minorValues.decimal.find(function (el) {
-            return Number.isInteger(el);
-          });
-
-          if (firstInteger) {
-            var index = data.minorValues.decimal.indexOf(firstInteger);
-            ticksModel.integerTick = math.number(firstInteger);
-
-            if (ticksModel.tickIntervalType === 'Integer') {
-              ticksModel.fractionTick = data.minorValues.fraction[index];
-              ticksModel.decimalTick = data.minorValues.decimal[index];
-            }
-          } else {
-            if (ticksModel.tickIntervalType === 'Integer') {
-              ticksModel.tickIntervalType = 'Fraction';
-              ticksModel.decimalTick = data.minorValues.decimal[data.minorValues.decimal.length - 1];
-              ticksModel.fractionTick = data.minorValues.fraction[data.minorValues.fraction.length - 1];
-            }
-
-            ticksModel.integerTick = data.minorValues.decimal.reduce(function (a, b) {
-              return Math.abs(b - ticksModel.decimalTick) < Math.abs(a - ticksModel.decimalTick) ? b : a;
-            });
-
-            if (!Number.isInteger(ticksModel.integerTick)) {
-              ticksModel.integerTick = math.ceil(ticksModel.integerTick);
-            }
-          }
-        } //setting major values
-
-
-        data.majorValues = _numberLine.tickUtils.generateMajorValuesForMinor(ticksModel.decimalTick, data.minorValues);
-
-        if (!ticks.major) {
-          ticksModel.decimalLabel = data.majorValues.decimal[0];
-          ticksModel.fractionLabel = data.majorValues.fraction[0];
-        } else {
-          ticksModel.decimalLabel = math.number(ticks.major);
-
-          if (data.majorValues.decimal.indexOf(ticksModel.decimalLabel) === -1) {
-            var currIndex = 0;
-
-            if (ticksModel.tickIntervalType === 'Integer') {
-              currIndex = 4;
-            } else {
-              currIndex = data.majorValues.decimal.length - 1;
-            }
-
-            while (currIndex !== 0) {
-              var ticksData = {
-                minor: ticksModel.decimalTick,
-                major: data.majorValues.decimal[currIndex]
-              };
-
-              var out = _numberLine.tickUtils.buildTickData(domain, width, ticksData, {
-                fraction: undefined
-              });
-
-              if (out.filter(function (x) {
-                return x.type === 'major';
-              }).length > 1) {
-                break;
-              } else {
-                currIndex = currIndex - 1;
-              }
-            }
-
-            ticksModel.decimalLabel = data.majorValues.decimal[currIndex];
-            ticksModel.fractionLabel = data.majorValues.fraction[currIndex];
-          } else {
-            ticksModel.fractionLabel = data.majorValues.fraction[data.majorValues.decimal.indexOf(ticksModel.decimalLabel)];
-          }
-        }
-      };
-
-      initTickModel();
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "assignTicksModelToGraph", function (graph) {
-      graph.ticks.minor = ticksModel.decimalTick;
-      graph.ticks.major = ticksModel.decimalLabel;
-      graph.ticks.tickIntervalType = ticksModel.tickIntervalType;
-      graph.ticks.tickStep = ticksModel.fractionTick;
-      graph.ticks.labelStep = ticksModel.fractionLabel;
-    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getAdjustedHeight", function (availableTypes, maxNumberOfPoints) {
       var onlyPFAvailable = true;
       Object.entries(availableTypes || {}).forEach(function (_ref2) {
@@ -372,17 +238,6 @@ var Main = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeMaxNoOfPoints", function (e, maxNumberOfPoints) {
       maxNumberOfPoints = Math.floor(maxNumberOfPoints);
 
-      if (_this.isAvailableTypesGreaterThanMaxElements(_this.props.model.graph.availableTypes, maxNumberOfPoints)) {
-        _this.setState({
-          dialog: {
-            open: true,
-            text: 'To use this value, you must first remove one or more elements from the available types.'
-          }
-        });
-
-        return;
-      }
-
       if (_this.props.model.correctResponse.length > maxNumberOfPoints) {
         _this.setState({
           dialog: {
@@ -403,19 +258,6 @@ var Main = /*#__PURE__*/function (_React$Component) {
         height: height
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isAvailableTypesGreaterThanMaxElements", function (availableTypes, maxElements) {
-      var availableTypeCount = 0;
-      Object.entries(availableTypes || {}).forEach(function (_ref4) {
-        var _ref5 = (0, _slicedToArray2["default"])(_ref4, 2),
-            type = _ref5[0],
-            value = _ref5[1];
-
-        if (value) {
-          availableTypeCount = availableTypeCount + 1;
-        }
-      });
-      return availableTypeCount > maxElements;
-    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeGraphTitle", function (title) {
       return _this.graphChange({
         title: title
@@ -425,31 +267,181 @@ var Main = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = _this.props,
           model = _this$props2.model,
           onChange = _this$props2.onChange;
-      var ticks = model.graph.ticks;
-      ticks.minor = object.ticksModel.decimalTick;
-      ticks.major = object.ticksModel.decimalLabel;
-      ticks.tickIntervalType = object.ticksModel.tickIntervalType;
-      ticks.tickStep = object.ticksModel.fractionTick;
-      ticks.labelStep = object.ticksModel.fractionLabel;
+      var ticks = object.ticks;
 
       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({}, model.graph), {}, {
-        ticks: ticks,
+      var updatedGraph = _this.updateMajorValue(_objectSpread(_objectSpread({}, model.graph), {}, {
+        ticks: ticks
+      }));
+
+      var graph = _objectSpread(_objectSpread({}, updatedGraph), {}, {
         initialElements: initialElements
       });
 
-      _this.reloadTicksData(graph.domain, graph.width, graph.ticks);
-
-      _this.assignTicksModelToGraph(graph);
-
       onChange({
         graph: graph,
         correctResponse: correctResponse
       });
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "reloadTicksData", function (graph) {
+      var domain = graph.domain,
+          ticks = graph.ticks,
+          width = graph.width; //Set tick interval type if not present for legacy number line models depending upon minor value
+
+      if (!ticks.tickIntervalType) {
+        if (ticks.minor > 0.5) {
+          ticks.tickIntervalType = 'Integer';
+        } else {
+          ticks.tickIntervalType = 'Decimal';
+        }
+      } // This section will calculate minor and major values array and assign respective value
+      // to different tick types object
+
+
+      minorLimits = _numberLine.tickUtils.getMinorLimits(domain, width);
+
+      if (minorLimits.min >= 1) {
+        /*
+         * In this scenario only integer tick will be enabled
+         * */
+        ticks.tickIntervalType = 'Integer';
+        ticks.minor = ticks.minor < 1 ? math.number(math.ceil(minorLimits.min)) : ticks.minor >= math.number(math.ceil(minorLimits.min)) && ticks.minor <= math.number(math.floor(minorLimits.max)) ? ticks.minor : math.number(math.ceil(minorLimits.min));
+        ticks.integerTick = ticks.minor;
+        minorValues = {
+          decimal: [],
+          fraction: []
+        };
+        ticks.fractionTick = '0';
+        ticks.decimalTick = 0;
+      } else if (minorLimits.min >= 0 && minorLimits.max < 1) {
+        /*
+         * In this scenario only decimal or fraction tick will be enabled
+         * */
+        if (ticks.tickIntervalType === 'Integer') {
+          ticks.tickIntervalType = 'Fraction';
+        }
+
+        minorValues = _numberLine.tickUtils.generateMinorValues(minorLimits);
+        var minValue = math.number(math.fraction(minorValues.fraction[0]));
+        var maxValue = math.number(math.fraction(minorValues.fraction[minorValues.fraction.length - 1]));
+
+        if (ticks.minor < minValue || ticks.minor > maxValue) {
+          switch (ticks.tickIntervalType) {
+            case 'Fraction':
+              ticks.minor = math.number(math.fraction(minorValues.fraction[minorValues.fraction.length - 1]));
+              ticks.fractionTick = minorValues.fraction[minorValues.fraction.length - 1];
+              ticks.decimalTick = minorValues.decimal[0];
+              break;
+
+            case 'Decimal':
+            case 'Integer':
+              ticks.minor = minorValues.decimal[minorValues.decimal.length - 1];
+              ticks.decimalTick = minorValues.decimal[minorValues.decimal.length - 1];
+              ticks.fractionTick = minorValues.fraction[0];
+          }
+        } else {
+          switch (ticks.tickIntervalType) {
+            case 'Fraction':
+              var fraction = math.fraction(math.number(ticks.minor));
+              ticks.fractionTick = fraction.n + '/' + fraction.d;
+              ticks.decimalTick = ticks.decimalTick ? ticks.decimalTick : minorValues.decimal[0];
+              break;
+
+            case 'Decimal':
+            case 'Integer':
+              ticks.decimalTick = ticks.minor;
+              ticks.fractionTick = ticks.fractionTick ? ticks.fractionTick : minorValues.fraction[0];
+          }
+        }
+
+        ticks.integerTick = 1;
+      } else if (minorLimits.min < 1 && minorLimits.max >= 1) {
+        /*
+         * In this scenario all integer, decimal or fraction tick will be enabled
+         * */
+        minorValues = _numberLine.tickUtils.generateMinorValues(minorLimits);
+
+        if (!(ticks.minor >= minorLimits.min && ticks.minor <= minorLimits.max)) {
+          if (minorLimits.min > 0.5) {
+            ticks.tickIntervalType = 'Integer';
+          }
+
+          switch (ticks.tickIntervalType) {
+            case 'Integer':
+              ticks.minor = math.number(math.ceil(minorLimits.min));
+              ticks.integerTick = ticks.minor;
+              ticks.decimalTick = minorLimits.min > 0.5 ? 0 : minorValues.decimal[0];
+              ticks.fractionTick = minorLimits.min > 0.5 ? '0' : minorValues.fraction[0];
+              break;
+
+            case 'Decimal':
+              ticks.minor = minorValues.decimal[0];
+              ticks.integerTick = 1;
+              ticks.decimalTick = ticks.minor;
+              ticks.fractionTick = minorValues.fraction[0];
+              break;
+
+            case 'Fraction':
+              ticks.minor = math.number(math.fraction(minorValues.fraction[0]));
+              ticks.integerTick = 1;
+              ticks.decimalTick = minorValues.decimal[0];
+              ticks.fractionTick = minorValues.fraction[0];
+          }
+        } else {
+          switch (ticks.tickIntervalType) {
+            case 'Integer':
+              ticks.integerTick = ticks.minor;
+              ticks.decimalTick = minorLimits.min > 0.5 ? 0 : minorValues.decimal[0];
+              ticks.fractionTick = minorLimits.min > 0.5 ? '0' : minorValues.fraction[0];
+              break;
+
+            case 'Decimal':
+              ticks.integerTick = 1;
+              ticks.decimalTick = ticks.minor;
+              ticks.fractionTick = minorValues.fraction[0];
+              break;
+
+            case 'Fraction':
+              ticks.integerTick = 1;
+              ticks.decimalTick = minorValues.decimal[0];
+
+              var _fraction = math.fraction(math.number(ticks.minor));
+
+              ticks.fractionTick = _fraction.n + '/' + _fraction.d;
+          }
+        }
+      }
+
+      return _this.updateMajorValue(_objectSpread(_objectSpread({}, graph), {}, {
+        ticks: ticks
+      }));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateMajorValue", function (graph) {
+      var domain = graph.domain,
+          ticks = graph.ticks,
+          width = graph.width;
+      majorValues = _numberLine.tickUtils.generateMajorValuesForMinor(ticks.minor, domain, width);
+
+      if (majorValues.decimal.indexOf(ticks.major) === -1) {
+        var currIndex = 0;
+
+        if (ticks.tickIntervalType === 'Integer') {
+          currIndex = majorValues.decimal.length > 4 ? 4 : majorValues.decimal.length - 1;
+        } else {
+          currIndex = majorValues.decimal.length - 1;
+        }
+
+        ticks.major = majorValues.decimal[currIndex];
+      }
+
+      graph.fraction = ticks.tickIntervalType === 'Fraction' && ticks.major < 1;
+      return _objectSpread(_objectSpread({}, graph), {}, {
+        ticks: ticks
+      });
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeArrows", function (arrows) {
       return _this.graphChange({
         arrows: arrows
@@ -488,26 +480,11 @@ var Main = /*#__PURE__*/function (_React$Component) {
           onChange = _this$props4.onChange;
       var correctResponse = model.correctResponse,
           maxNumberOfPoints = model.graph.maxNumberOfPoints;
-      var availableTypeCount = 0;
-      Object.entries(availableTypes || {}).forEach(function (_ref6) {
-        var _ref7 = (0, _slicedToArray2["default"])(_ref6, 2),
-            type = _ref7[0],
-            value = _ref7[1];
-
-        if (value) {
-          availableTypeCount = availableTypeCount + 1;
-        }
-      });
-
-      if (maxNumberOfPoints < availableTypeCount) {
-        _this.props.model.graph.maxNumberOfPoints = availableTypeCount;
-      }
-
       new Set(correctResponse.map(toPointType)).forEach(function (pointType) {
         availableTypes[pointType] = true;
       });
 
-      var height = _this.getAdjustedHeight(availableTypes, _this.props.model.graph.maxNumberOfPoints);
+      var height = _this.getAdjustedHeight(availableTypes, maxNumberOfPoints);
 
       var graph = _objectSpread(_objectSpread({}, model.graph), {}, {
         availableTypes: availableTypes,
@@ -557,6 +534,12 @@ var Main = /*#__PURE__*/function (_React$Component) {
         correctResponse: correctResponse
       });
     });
+    var _props$model$graph = props.model.graph,
+        _availableTypes = _props$model$graph.availableTypes,
+        _maxNumberOfPoints = _props$model$graph.maxNumberOfPoints;
+
+    var _height = _this.getAdjustedHeight(_availableTypes, _maxNumberOfPoints);
+
     _this.state = {
       dialog: {
         open: false,
@@ -568,72 +551,65 @@ var Main = /*#__PURE__*/function (_React$Component) {
       }
     };
 
-    _this.checkAndAdjustHeight(_props);
+    _this.graphChange({
+      height: _height
+    });
 
     return _this;
   }
 
   (0, _createClass2["default"])(Main, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState, snapshot) {
-      var _this$props8;
-
-      if (!(0, _isEqual["default"])(prevProps === null || prevProps === void 0 ? void 0 : prevProps.configuration, (_this$props8 = this.props) === null || _this$props8 === void 0 ? void 0 : _this$props8.configuration)) {
-        this.checkAndAdjustHeight(this.props);
-      }
-    }
-  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
 
-      var _this$props9 = this.props,
-          classes = _this$props9.classes,
-          model = _this$props9.model,
-          _onChange = _this$props9.onChange,
-          configuration = _this$props9.configuration,
-          uploadSoundSupport = _this$props9.uploadSoundSupport;
-
-      var _ref8 = configuration || {},
-          _ref8$contentDimensio = _ref8.contentDimensions,
-          contentDimensions = _ref8$contentDimensio === void 0 ? {} : _ref8$contentDimensio,
-          _ref8$instruction = _ref8.instruction,
-          instruction = _ref8$instruction === void 0 ? {} : _ref8$instruction,
-          _ref8$teacherInstruct = _ref8.teacherInstructions,
-          teacherInstructions = _ref8$teacherInstruct === void 0 ? {} : _ref8$teacherInstruct,
-          _ref8$prompt = _ref8.prompt,
-          prompt = _ref8$prompt === void 0 ? {} : _ref8$prompt,
-          _ref8$mathMlOptions = _ref8.mathMlOptions,
-          mathMlOptions = _ref8$mathMlOptions === void 0 ? {} : _ref8$mathMlOptions,
-          _ref8$numberLineDimen = _ref8.numberLineDimensions,
-          numberLineDimensions = _ref8$numberLineDimen === void 0 ? {} : _ref8$numberLineDimen,
-          _ref8$maxMaxElements = _ref8.maxMaxElements,
-          maxMaxElements = _ref8$maxMaxElements === void 0 ? 20 : _ref8$maxMaxElements,
-          _ref8$hidePointConfig = _ref8.hidePointConfigButtons,
-          hidePointConfigButtons = _ref8$hidePointConfig === void 0 ? false : _ref8$hidePointConfig,
-          _ref8$availableTools = _ref8.availableTools,
-          availableTools = _ref8$availableTools === void 0 ? ['PF'] : _ref8$availableTools;
-
-      var _ref9 = model || {},
-          _ref9$errors = _ref9.errors,
-          errors = _ref9$errors === void 0 ? {} : _ref9$errors,
-          graph = _ref9.graph,
-          spellCheckEnabled = _ref9.spellCheckEnabled,
-          toolbarEditorPosition = _ref9.toolbarEditorPosition;
-
-      this.reloadTicksData(graph.domain, graph.width, graph.ticks);
+      var _this$props8 = this.props,
+          classes = _this$props8.classes,
+          model = _this$props8.model,
+          _onChange = _this$props8.onChange,
+          configuration = _this$props8.configuration,
+          uploadSoundSupport = _this$props8.uploadSoundSupport;
+
+      var _ref4 = configuration || {},
+          _ref4$contentDimensio = _ref4.contentDimensions,
+          contentDimensions = _ref4$contentDimensio === void 0 ? {} : _ref4$contentDimensio,
+          _ref4$instruction = _ref4.instruction,
+          instruction = _ref4$instruction === void 0 ? {} : _ref4$instruction,
+          _ref4$teacherInstruct = _ref4.teacherInstructions,
+          teacherInstructions = _ref4$teacherInstruct === void 0 ? {} : _ref4$teacherInstruct,
+          _ref4$prompt = _ref4.prompt,
+          prompt = _ref4$prompt === void 0 ? {} : _ref4$prompt,
+          _ref4$mathMlOptions = _ref4.mathMlOptions,
+          mathMlOptions = _ref4$mathMlOptions === void 0 ? {} : _ref4$mathMlOptions,
+          _ref4$numberLineDimen = _ref4.numberLineDimensions,
+          numberLineDimensions = _ref4$numberLineDimen === void 0 ? {} : _ref4$numberLineDimen,
+          _ref4$maxMaxElements = _ref4.maxMaxElements,
+          maxMaxElements = _ref4$maxMaxElements === void 0 ? 20 : _ref4$maxMaxElements,
+          _ref4$hidePointConfig = _ref4.hidePointConfigButtons,
+          hidePointConfigButtons = _ref4$hidePointConfig === void 0 ? false : _ref4$hidePointConfig,
+          _ref4$availableTools = _ref4.availableTools,
+          availableTools = _ref4$availableTools === void 0 ? ['PF'] : _ref4$availableTools;
+
+      var _ref5 = model || {},
+          _ref5$errors = _ref5.errors,
+          errors = _ref5$errors === void 0 ? {} : _ref5$errors,
+          spellCheckEnabled = _ref5.spellCheckEnabled,
+          toolbarEditorPosition = _ref5.toolbarEditorPosition;
+
+      var graph = model.graph;
+      graph = this.reloadTicksData(graph);
       var _this$state = this.state,
           dialog = _this$state.dialog,
           correctAnswerDialog = _this$state.correctAnswerDialog;
 
-      var _ref10 = errors || {},
-          correctResponseError = _ref10.correctResponseError,
-          domainError = _ref10.domainError,
-          maxError = _ref10.maxError,
-          pointsError = _ref10.pointsError,
-          promptError = _ref10.prompt,
-          teacherInstructionsError = _ref10.teacherInstructions,
-          widthError = _ref10.widthError;
+      var _ref6 = errors || {},
+          correctResponseError = _ref6.correctResponseError,
+          domainError = _ref6.domainError,
+          maxError = _ref6.maxError,
+          pointsError = _ref6.pointsError,
+          promptError = _ref6.prompt,
+          teacherInstructionsError = _ref6.teacherInstructions,
+          widthError = _ref6.widthError;
 
       var validationMessage = (0, _utils.generateValidationMessage)();
       var correctResponse = (0, _cloneDeep["default"])(model.correctResponse || []).map(toGraphFormat);
@@ -732,8 +708,10 @@ var Main = /*#__PURE__*/function (_React$Component) {
       }, maxError), domainError && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.errorText
       }, domainError), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, null, /*#__PURE__*/_react["default"].createElement(_ticks["default"], {
-        ticksModel: ticksModel,
-        data: data,
+        ticks: graph.ticks,
+        minorLimits: minorLimits,
+        minorValues: minorValues,
+        majorValues: majorValues,
         onChange: this.changeTicks
       }))), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.flexRow
@@ -841,10 +819,6 @@ var Main = /*#__PURE__*/function (_React$Component) {
         onClose: function onClose() {
           var graph = _this2.state.correctAnswerDialog.graph;
 
-          _this2.reloadTicksData(graph.domain, graph.width, graph.ticks);
-
-          _this2.assignTicksModelToGraph(graph);
-
           _onChange({
             graph: graph
           });