@pie-element/graphing 3.5.0 → 3.5.1-beta.587

package/configure/lib/graphing-config.js

@@ -2,12 +2,16 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.GraphingConfig = exports.AuthoringColumn = void 0;
+exports["default"] = exports.GraphingConfig = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -25,134 +29,66 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var React = _interopRequireWildcard(require("react"));
 
-var _configUi = require("@pie-lib/config-ui");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styles = require("@material-ui/core/styles");
-
 var _graphing = require("@pie-lib/graphing");
 
+var _configUi = require("@pie-lib/config-ui");
+
 var _core = require("@material-ui/core");
 
-var _lodash = require("lodash");
+var _styles = require("@material-ui/core/styles");
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _utils = require("./utils");
 
-var _this = void 0;
+var _lodash = require("lodash");
 
-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; }
+var _excluded = ["label"];
 
-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 _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 _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 _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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 _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; } }
-
-var AuthoringColumn = function AuthoringColumn(_ref) {
-  var columnKey = _ref.columnKey,
-      axis = _ref.axis,
-      classes = _ref.classes,
-      model = _ref.model;
-  var rows = [{
-    key: '${columnKey}-min-max',
-    inputs: [{
-      key: "".concat(columnKey, ".min"),
-      label: 'Min value',
-      className: classes.smallInput
-    }, {
-      key: "".concat(columnKey, ".max"),
-      label: 'Max value',
-      className: classes.smallInput
-    }]
-  }, {
-    key: "".concat(columnKey, "-tick-frequency"),
-    inputs: [{
-      key: "".concat(columnKey, ".step"),
-      label: 'Tick frequency'
-    }]
-  }, {
-    key: "".concat(columnKey, "-tick-label-frequency"),
-    inputs: [{
-      key: "".concat(columnKey, ".labelStep"),
-      label: 'Tick label frequency'
-    }]
-  }, {
-    key: "".concat(columnKey, "-axis-label"),
-    inputs: [{
-      type: 'text',
-      key: "".concat(axis, "-axis-label-input"),
-      label: "".concat(axis, " Axis Label")
-    }]
-  }];
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.column,
-    key: columnKey
-  }, "".concat(columnKey.toUpperCase(), " (").concat(axis.toUpperCase(), ")"), rows.map(function (row) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: classes.row,
-      key: row.key
-    }, row.inputs.map(function (input) {
-      if (input.type === 'text') {
-        return /*#__PURE__*/React.createElement(_core.TextField, {
-          className: classes.input,
-          label: input.label.toUpperCase(),
-          value: model["".concat(axis, "AxisLabel")],
-          onChange: function onChange(_ref2) {
-            var target = _ref2.target;
-            return _this.onChangeInputValue("".concat(axis, "AxisLabel"), target.value);
-          }
-        });
-      }
+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; }
 
-      return /*#__PURE__*/React.createElement(_core.TextField, {
-        type: "number",
-        key: input.key,
-        label: input.label.toUpperCase(),
-        onChange: function onChange(event, value) {
-          return _this.onChangeInputValue(input.key, value);
-        },
-        value: (0, _lodash.get)(model, input.key),
-        className: input.className || classes.input
-      });
-    }));
-  }));
-};
+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; }
 
-exports.AuthoringColumn = AuthoringColumn;
-AuthoringColumn.propTypes = {
-  axis: _propTypes["default"].String,
-  classes: _propTypes["default"].object,
-  columnKey: _propTypes["default"].String,
-  model: _propTypes["default"].object
-};
+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 {
     container: {
-      marginTop: theme.spacing.unit * 3,
-      marginBottom: theme.spacing.unit * 3,
       display: 'flex',
-      flex: 1
+      flexWrap: 'wrap',
+      marginBottom: theme.spacing.unit * 7
+    },
+    gridConfigWrapper: {
+      display: 'flex',
+      flexDirection: 'column',
+      marginRight: theme.spacing.unit * 4,
+      marginBottom: theme.spacing.unit * 3
     },
-    column: {
-      flex: 1
+    graphConfig: {
+      display: 'flex',
+      flexDirection: 'column'
     },
-    row: {
-      marginTop: theme.spacing.unit * 2,
-      flex: 1
+    subtitleText: {
+      marginTop: theme.spacing.unit * 1.5,
+      marginBottom: theme.spacing.unit
     },
-    settings: {
+    gridConfig: {
       display: 'flex',
-      flexDirection: 'row'
+      alignItems: 'center',
+      width: '100%',
+      marginBottom: '16px'
     },
-    input: {
-      width: 'calc(100% -  32px)'
+    gridConfigLabel: {
+      padding: '0 8px'
     },
-    smallInput: {
-      width: 'calc(50% -  32px)'
+    gridConfigSelect: {
+      flex: '1'
     }
   };
 };
@@ -162,113 +98,321 @@ var GraphingConfig = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(GraphingConfig);
 
-  function GraphingConfig() {
-    var _this2;
+  function GraphingConfig(props) {
+    var _this;
 
     (0, _classCallCheck2["default"])(this, GraphingConfig);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeBackgroundMarks", function (backgroundMarks) {
+      var model = _objectSpread(_objectSpread({}, _this.props.model), {}, {
+        backgroundMarks: backgroundMarks
+      });
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+      _this.props.onChange(model);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeLabels", function (labels) {
+      var _this$props = _this.props,
+          model = _this$props.model,
+          onChange = _this$props.onChange;
+      onChange(_objectSpread(_objectSpread({}, model), {}, {
+        labels: labels
+      }));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeTitle", function (title) {
+      var _this$props2 = _this.props,
+          model = _this$props2.model,
+          onChange = _this$props2.onChange;
+      onChange(_objectSpread(_objectSpread({}, model), {}, {
+        title: title
+      }));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onConfigChange", function (config) {
+      var _this$props3 = _this.props,
+          model = _this$props3.model,
+          onChange = _this$props3.onChange;
+      var _this$state = _this.state,
+          oldGridValues = _this$state.gridValues,
+          oldLabelValues = _this$state.labelValues,
+          oldDomain = _this$state.domain,
+          oldRange = _this$state.range;
+
+      var updatedModel = _objectSpread(_objectSpread({}, model), config);
+
+      var answers = updatedModel.answers,
+          domain = updatedModel.domain,
+          includeAxes = updatedModel.includeAxes,
+          graph = updatedModel.graph,
+          range = updatedModel.range,
+          standardGrid = updatedModel.standardGrid;
+      var gridValues = {
+        domain: [],
+        range: []
+      };
+      var labelValues = {
+        domain: [],
+        range: []
+      };
+
+      if (includeAxes) {
+        var domainConstraints = (0, _utils.applyConstraints)(domain, graph.width, oldGridValues.domain, oldLabelValues.domain);
+        gridValues.domain = domainConstraints.gridValues || [];
+        labelValues.domain = domainConstraints.labelValues || [];
+      }
+
+      if (standardGrid) {
+        gridValues.range = gridValues.domain;
+        labelValues.range = labelValues.domain;
+        range.step = domain.step;
+        range.labelStep = domain.labelStep;
+      } else {
+        if (includeAxes) {
+          var rangeConstraints = (0, _utils.applyConstraints)(range, graph.height, oldGridValues.range, oldLabelValues.range);
+          gridValues.range = rangeConstraints.gridValues || [];
+          labelValues.range = rangeConstraints.labelValues || [];
+        }
+      }
 
-    _this2 = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onChangeInputValue", function (key, value) {
-      var model = _this2.props.model;
-      (0, _lodash.set)(model, key, value);
+      var plotableAnswers = (0, _utils.filterPlotableMarks)(domain, range, answers);
+
+      if (!(0, _lodash.isEqual)(answers, plotableAnswers)) {
+        _this.setState({
+          dialog: {
+            isOpened: true,
+            onClose: function onClose() {
+              return _this.setState({
+                dialog: {
+                  isOpened: false
+                }
+              }, onChange(_objectSpread(_objectSpread({}, model), {}, {
+                domain: oldDomain,
+                range: oldRange
+              })));
+            },
+            onConfirm: function onConfirm() {
+              _this.setState({
+                gridValues: gridValues,
+                labelValues: labelValues,
+                dialog: {
+                  isOpened: false
+                },
+                domain: _objectSpread({}, domain),
+                range: _objectSpread({}, range)
+              }, onChange(_objectSpread(_objectSpread({}, updatedModel), {}, {
+                answers: plotableAnswers
+              })));
+            }
+          }
+        });
 
-      _this2.props.onChange(model);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "renderInput", function (key, label, className) {
-      var _this2$props = _this2.props,
-          classes = _this2$props.classes,
-          model = _this2$props.model;
-      return /*#__PURE__*/React.createElement(_configUi.NumberTextField, {
-        key: key,
-        label: label.toUpperCase(),
-        onChange: function onChange(event, value) {
-          return _this2.onChangeInputValue(key, value);
-        },
-        value: (0, _lodash.get)(model, key),
-        className: className || classes.input
+        return;
+      }
+
+      _this.setState({
+        gridValues: gridValues,
+        labelValues: labelValues,
+        domain: _objectSpread({}, domain),
+        range: _objectSpread({}, range)
       });
+
+      onChange(updatedModel);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "renderRow", function (key, content) {
-      var classes = _this2.props.classes;
-      return /*#__PURE__*/React.createElement("div", {
-        className: classes.row,
-        key: key
-      }, content);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChangeView", function (event, expanded) {
+      var _this$props$graphDime = _this.props.graphDimensions;
+      _this$props$graphDime = _this$props$graphDime === void 0 ? {} : _this$props$graphDime;
+      var enabled = _this$props$graphDime.enabled;
+
+      if (enabled) {
+        _this.setState({
+          showPixelGuides: expanded
+        });
+      }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "changeBackgroundMarks", function (backgroundMarks) {
-      var model = _objectSpread(_objectSpread({}, _this2.props.model), {}, {
-        backgroundMarks: backgroundMarks
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeGridConfiguration", function (event) {
+      var _this$props4 = _this.props,
+          gridConfigurations = _this$props4.gridConfigurations,
+          model = _this$props4.model,
+          onChange = _this$props4.onChange;
+      var value = event.target.value;
+
+      var _ref = gridConfigurations[value] || {},
+          label = _ref.label,
+          updatedModel = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+
+      _this.setState({
+        selectedGrid: value
       });
 
-      _this2.props.onChange(model);
+      onChange(_objectSpread(_objectSpread({}, model), updatedModel));
     });
-    return _this2;
+
+    var _ref2 = props.model || {},
+        _domain = _ref2.domain,
+        _range = _ref2.range,
+        _graph = _ref2.graph;
+
+    var _gridValues = {
+      domain: (0, _utils.getGridValues)(_domain, _graph.width, true),
+      range: (0, _utils.getGridValues)(_range, _graph.height, true)
+    };
+    var _labelValues = {
+      domain: (0, _utils.getLabelValues)(_domain.step),
+      range: (0, _utils.getLabelValues)(_range.step)
+    };
+    _this.state = {
+      gridValues: _gridValues,
+      labelValues: _labelValues,
+      selectedGrid: 0,
+      showPixelGuides: false,
+      dialog: {
+        isOpened: false
+      },
+      domain: _objectSpread({}, _domain),
+      range: _objectSpread({}, _range)
+    };
+    return _this;
   }
 
   (0, _createClass2["default"])(GraphingConfig, [{
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          model = _this$props.model,
-          authoringEnabled = _this$props.authoringEnabled;
+      var _this$props5 = this.props,
+          _this$props5$authorin = _this$props5.authoring,
+          authoring = _this$props5$authorin === void 0 ? {} : _this$props5$authorin,
+          _this$props5$availabl = _this$props5.availableTools,
+          availableTools = _this$props5$availabl === void 0 ? [] : _this$props5$availabl,
+          classes = _this$props5.classes,
+          _this$props5$gridConf = _this$props5.gridConfigurations,
+          gridConfigurations = _this$props5$gridConf === void 0 ? [] : _this$props5$gridConf,
+          _this$props5$graphDim = _this$props5.graphDimensions,
+          graphDimensions = _this$props5$graphDim === void 0 ? {} : _this$props5$graphDim,
+          labelsPlaceholders = _this$props5.labelsPlaceholders,
+          model = _this$props5.model,
+          showLabels = _this$props5.showLabels,
+          showTitle = _this$props5.showTitle,
+          titlePlaceholder = _this$props5.titlePlaceholder;
 
       var _ref3 = model || {},
-          graph = _ref3.graph;
-
-      var _ref4 = model || {},
-          arrows = _ref4.arrows,
-          backgroundMarks = _ref4.backgroundMarks,
-          domain = _ref4.domain,
-          labels = _ref4.labels,
-          range = _ref4.range,
-          title = _ref4.title,
-          toolbarTools = _ref4.toolbarTools;
-
-      graph = graph || {};
-      return /*#__PURE__*/React.createElement("div", null, "Define Graph Attributes", /*#__PURE__*/React.createElement("div", {
+          arrows = _ref3.arrows,
+          backgroundMarks = _ref3.backgroundMarks,
+          coordinatesOnHover = _ref3.coordinatesOnHover,
+          domain = _ref3.domain,
+          includeAxes = _ref3.includeAxes,
+          labels = _ref3.labels,
+          range = _ref3.range,
+          standardGrid = _ref3.standardGrid,
+          title = _ref3.title;
+
+      var graph = (model || {}).graph || {};
+
+      var _ref4 = graphDimensions || {},
+          dimensionsEnabled = _ref4.enabled,
+          min = _ref4.min,
+          max = _ref4.max,
+          step = _ref4.step;
+
+      var _this$state2 = this.state,
+          _this$state2$dialog = _this$state2.dialog,
+          dialog = _this$state2$dialog === void 0 ? {} : _this$state2$dialog,
+          gridValues = _this$state2.gridValues,
+          labelValues = _this$state2.labelValues,
+          selectedGrid = _this$state2.selectedGrid,
+          showPixelGuides = _this$state2.showPixelGuides;
+      var sizeConstraints = {
+        min: Math.max(150, min),
+        max: Math.min(800, max),
+        step: step >= 1 ? Math.min(200, step) : 20
+      };
+      var displayedFields = {
+        axisLabel: authoring.axisLabel,
+        dimensionsEnabled: dimensionsEnabled,
+        includeAxesEnabled: authoring.includeAxesEnabled,
+        labelStep: authoring.labelStep,
+        min: authoring.min,
+        max: authoring.max,
+        standardGridEnabled: authoring.standardGridEnabled,
+        step: authoring.step
+      };
+      var displayGridSetup = authoring.enabled && Object.values(displayedFields).some(function (field) {
+        return (0, _typeof2["default"])(field) === 'object' ? field.enabled : field;
+      });
+      return /*#__PURE__*/React.createElement("div", {
         className: classes.container
-      }, authoringEnabled && /*#__PURE__*/React.createElement("div", {
-        className: (0, _classnames["default"])(classes.column, classes.settings),
-        key: "settings"
-      }, /*#__PURE__*/React.createElement(AuthoringColumn, {
-        columnKey: "domain",
-        axis: "x",
-        classes: classes,
-        model: model
-      }), /*#__PURE__*/React.createElement(AuthoringColumn, {
-        columnKey: "range",
-        axis: "y",
-        classes: classes,
-        model: model
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classes.gridConfigWrapper
+      }, gridConfigurations && gridConfigurations.length ? /*#__PURE__*/React.createElement("div", {
+        className: classes.gridConfig
+      }, /*#__PURE__*/React.createElement(_core.Typography, {
+        component: "div",
+        variant: "subheading",
+        className: classes.gridConfigLabel
+      }, /*#__PURE__*/React.createElement("span", null, "Grid Configuration")), /*#__PURE__*/React.createElement(_core.Select, {
+        input: /*#__PURE__*/React.createElement(_core.OutlinedInput, null),
+        className: classes.gridConfigSelect,
+        displayEmpty: true,
+        onChange: this.changeGridConfiguration,
+        value: selectedGrid
+      }, (gridConfigurations || []).map(function (config, index) {
+        return /*#__PURE__*/React.createElement(_core.MenuItem, {
+          key: index,
+          value: index
+        }, config.label);
+      }))) : null, displayGridSetup && /*#__PURE__*/React.createElement(_graphing.GridSetup, {
+        displayedFields: displayedFields,
+        domain: domain,
+        dimensionsEnabled: dimensionsEnabled,
+        gridValues: gridValues,
+        includeAxes: includeAxes,
+        labelValues: labelValues,
+        range: range,
+        size: graph,
+        sizeConstraints: sizeConstraints,
+        standardGrid: standardGrid,
+        onChange: this.onConfigChange,
+        onChangeView: this.onChangeView
       })), /*#__PURE__*/React.createElement("div", {
-        className: classes.column,
+        className: classes.graphConfig,
         key: "graph"
-      }, /*#__PURE__*/React.createElement(_Typography["default"], {
+      }, /*#__PURE__*/React.createElement(_core.Typography, {
+        component: "div",
+        variant: "subheading"
+      }, /*#__PURE__*/React.createElement("span", null, "Define Graph Attributes")), /*#__PURE__*/React.createElement(_core.Typography, {
         component: "div",
-        type: "body1"
-      }, /*#__PURE__*/React.createElement("span", null, "Use the tools below to set background shapes")), /*#__PURE__*/React.createElement(_graphing.GraphContainer, {
+        variant: "body1",
+        className: classes.subtitleText
+      }, /*#__PURE__*/React.createElement("span", null, "Use this interface to add/edit a title and/or labels, and to set background shapes")), /*#__PURE__*/React.createElement(_graphing.GraphContainer, {
         axesSettings: {
           includeArrows: arrows
         },
         backgroundMarks: [],
+        coordinatesOnHover: coordinatesOnHover,
+        collapsibleToolbar: true,
+        collapsibleToolbarTitle: 'Add Background Shapes to Graph',
         domain: domain,
         key: "graphing-config",
         labels: labels,
+        labelsPlaceholders: labelsPlaceholders,
         marks: backgroundMarks,
+        onChangeLabels: this.changeLabels,
         onChangeMarks: this.changeBackgroundMarks,
+        onChangeTitle: this.changeTitle,
         range: range,
+        showLabels: showLabels,
+        showPixelGuides: showPixelGuides,
+        showTitle: showTitle,
         size: {
           width: graph.width,
           height: graph.height
         },
         title: title,
-        toolbarTools: toolbarTools
-      }))));
+        titlePlaceholder: titlePlaceholder,
+        toolbarTools: availableTools
+      })), /*#__PURE__*/React.createElement(_configUi.AlertDialog, {
+        open: dialog.isOpened,
+        title: "Warning",
+        text: "This change would make it impossible for students to plot one or more graph objects in the current correct answers. If you proceed, all such graph objects will be removed from the correct answers.",
+        onClose: dialog.onClose,
+        onConfirm: dialog.onConfirm
+      }));
     }
   }]);
   return GraphingConfig;
@@ -277,9 +421,11 @@ var GraphingConfig = /*#__PURE__*/function (_React$Component) {
 exports.GraphingConfig = GraphingConfig;
 (0, _defineProperty2["default"])(GraphingConfig, "propTypes", {
   classes: _propTypes["default"].object.isRequired,
+  authoring: _propTypes["default"].object,
+  graphDimensions: _propTypes["default"].object,
+  gridConfigurations: _propTypes["default"].array,
   model: _propTypes["default"].object.isRequired,
-  onChange: _propTypes["default"].func.isRequired,
-  authoringEnabled: _propTypes["default"].bool
+  onChange: _propTypes["default"].func.isRequired
 });
 
 var _default = (0, _styles.withStyles)(styles)(GraphingConfig);