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

package/configure/lib/graphing-config.js

@@ -1,158 +1,138 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof3 = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.GraphingConfig = void 0;
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-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.GraphingConfig = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _graphingSolutionSet = require("@pie-lib/graphing-solution-set");
-
 var _configUi = require("@pie-lib/config-ui");
-
-var _core = require("@material-ui/core");
-
-var _styles = require("@material-ui/core/styles");
-
+var _material = require("@mui/material");
+var _styles = require("@mui/material/styles");
 var _utils = require("./utils");
-
 var _lodash = require("lodash");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _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 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 _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: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      marginBottom: theme.spacing.unit * 2.5
-    },
-    gridConfigWrapper: {
-      display: 'flex',
-      flexDirection: 'column',
-      marginRight: theme.spacing.unit * 3,
-      marginBottom: theme.spacing.unit * 2.5
-    },
-    graphConfig: {
-      display: 'flex',
-      flexDirection: 'column'
-    },
-    subtitleText: {
-      marginTop: theme.spacing.unit * 1.5,
-      marginBottom: theme.spacing.unit
-    },
-    gridConfig: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      alignItems: 'center',
-      width: '100%',
-      marginBottom: theme.spacing.unit * 2.5
-    },
-    gridConfigLabel: {
-      padding: "0 ".concat(theme.spacing.unit, "px")
-    },
-    gridConfigSelect: {
-      flex: '1'
-    }
-  };
-};
-
-var GraphingConfig = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(GraphingConfig, _React$Component);
-
-  var _super = _createSuper(GraphingConfig);
-
-  function GraphingConfig(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, GraphingConfig);
-    _this = _super.call(this, props);
-    (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
-      }));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Container = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+  marginBottom: theme.spacing(2.5)
+}));
+const GridConfigWrapper = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  marginRight: theme.spacing(3),
+  marginBottom: theme.spacing(2.5)
+}));
+const GraphConfig = (0, _styles.styled)('div')({
+  display: 'flex',
+  flexDirection: 'column'
+});
+const SubtitleText = (0, _styles.styled)(_material.Typography)(({
+  theme
+}) => ({
+  marginTop: theme.spacing(1.5),
+  marginBottom: theme.spacing(1)
+}));
+const GridConfig = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  width: '100%',
+  marginBottom: theme.spacing(2.5)
+}));
+const GridConfigLabel = (0, _styles.styled)(_material.Typography)(({
+  theme
+}) => ({
+  padding: `0 ${theme.spacing(1)}`
+}));
+const GridConfigSelect = (0, _styles.styled)(_material.Select)({
+  flex: '1'
+});
+class GraphingConfig extends React.Component {
+  constructor(props) {
+    super(props);
+    /*
+     * Function to change labels
+     * @param {object} labels - labels object
+     * */
+    (0, _defineProperty2.default)(this, "changeLabels", labels => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      onChange({
+        ...model,
+        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
-      }));
+    /*
+     * Function to change title
+     * @param {string} title - title string
+     * */
+    (0, _defineProperty2.default)(this, "changeTitle", title => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      onChange({
+        ...model,
+        title
+      });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onConfigChange", function (config, newSelectedGrid) {
-      var _this$props3 = _this.props,
-          model = _this$props3.model,
-          onChange = _this$props3.onChange;
-      var _model$defaultGridCon = model.defaultGridConfiguration,
-          oldSelectedGrid = _model$defaultGridCon === void 0 ? 0 : _model$defaultGridCon;
-      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,
-          _updatedModel$include = updatedModel.includeAxes,
-          includeAxes = _updatedModel$include === void 0 ? true : _updatedModel$include,
-          graph = updatedModel.graph,
-          range = updatedModel.range,
-          standardGrid = updatedModel.standardGrid;
-      var gridValues = {
+    /*
+     * Function to change grid configuration
+     * @param {object} config - grid configuration object
+     * @param {number} newSelectedGrid - new selected grid
+     * */
+    (0, _defineProperty2.default)(this, "onConfigChange", (config, newSelectedGrid) => {
+      const {
+        model,
+        onChange
+      } = this.props;
+      const {
+        defaultGridConfiguration: oldSelectedGrid = 0
+      } = model;
+      const {
+        gridValues: oldGridValues,
+        labelValues: oldLabelValues,
+        domain: oldDomain,
+        range: oldRange
+      } = this.state;
+      const updatedModel = {
+        ...model,
+        ...config
+      };
+      const {
+        answers,
+        domain,
+        includeAxes = true,
+        graph,
+        range,
+        standardGrid
+      } = updatedModel;
+      const gridValues = {
         domain: [],
         range: []
       };
-      var labelValues = {
+      const labelValues = {
         domain: [],
         range: []
       };
-      var selectedGrid = newSelectedGrid >= 0 ? newSelectedGrid : oldSelectedGrid;
-
+      const selectedGrid = newSelectedGrid >= 0 ? newSelectedGrid : oldSelectedGrid;
       if (includeAxes) {
-        var domainConstraints = (0, _utils.applyConstraints)(domain, graph.width, oldGridValues.domain, oldLabelValues.domain);
+        const 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;
@@ -160,283 +140,269 @@ var GraphingConfig = /*#__PURE__*/function (_React$Component) {
         range.labelStep = domain.labelStep;
       } else {
         if (includeAxes) {
-          var rangeConstraints = (0, _utils.applyConstraints)(range, graph.height, oldGridValues.range, oldLabelValues.range);
+          const rangeConstraints = (0, _utils.applyConstraints)(range, graph.height, oldGridValues.range, oldLabelValues.range);
           gridValues.range = rangeConstraints.gridValues || [];
           labelValues.range = rangeConstraints.labelValues || [];
         }
       }
-
-      var filteredAnswers = (0, _lodash.cloneDeep)(answers);
-      filteredAnswers.correctAnswer.marks = answers.correctAnswer.marks.filter(function (mark) {
-        return mark.type !== 'polygon';
-      });
-      var plotableAnswers = (0, _utils.filterPlotableMarks)(domain, range, filteredAnswers);
-
+      const filteredAnswers = (0, _lodash.cloneDeep)(answers);
+      filteredAnswers.correctAnswer.marks = answers.correctAnswer.marks.filter(mark => mark.type !== 'polygon');
+      const plotableAnswers = (0, _utils.filterPlotableMarks)(domain, range, filteredAnswers);
       if (!(0, _lodash.isEqual)(filteredAnswers, plotableAnswers)) {
-        _this.setState({
+        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() {
+            onClose: () => this.setState({
+              dialog: {
+                isOpened: false
+              }
+            }, onChange({
+              ...model,
+              domain: oldDomain,
+              range: oldRange
+            })),
+            onConfirm: () => {
               updatedModel.gssLineData.sections = [];
               updatedModel.gssLineData.selectedTool = 'lineA';
-
-              _this.setState({
-                gridValues: gridValues,
-                labelValues: labelValues,
+              this.setState({
+                gridValues,
+                labelValues,
                 dialog: {
                   isOpened: false
                 },
-                domain: _objectSpread({}, domain),
-                range: _objectSpread({}, range)
-              }, onChange(_objectSpread(_objectSpread({}, updatedModel), {}, {
+                domain: {
+                  ...domain
+                },
+                range: {
+                  ...range
+                }
+              }, onChange({
+                ...updatedModel,
                 answers: plotableAnswers,
                 defaultGridConfiguration: selectedGrid
-              })));
+              }));
             }
           }
         });
-
         return;
       }
-
-      _this.setState({
-        gridValues: gridValues,
-        labelValues: labelValues,
-        domain: _objectSpread({}, domain),
-        range: _objectSpread({}, range)
+      this.setState({
+        gridValues,
+        labelValues,
+        domain: {
+          ...domain
+        },
+        range: {
+          ...range
+        }
       });
-
-      onChange(_objectSpread(_objectSpread({}, updatedModel), {}, {
+      onChange({
+        ...updatedModel,
         defaultGridConfiguration: selectedGrid
-      }));
+      });
     });
-    (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;
-
+    /*
+     * Function to change view
+     * @param {object} event - event object
+     * @param {boolean} expanded - expanded boolean
+     * */
+    (0, _defineProperty2.default)(this, "onChangeView", (event, expanded) => {
+      const {
+        graphDimensions: {
+          enabled
+        } = {}
+      } = this.props;
       if (enabled) {
-        _this.setState({
+        this.setState({
           showPixelGuides: expanded
         });
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeGridConfiguration", function (event) {
-      var gridConfigurations = _this.props.gridConfigurations;
-      var value = event.target.value;
-
-      _this.onConfigChange((gridConfigurations === null || gridConfigurations === void 0 ? void 0 : gridConfigurations[value]) || {}, value);
+    /*
+     * Function to change grid configuration
+     * @param {object} event - event object
+     * */
+    (0, _defineProperty2.default)(this, "changeGridConfiguration", event => {
+      const {
+        gridConfigurations
+      } = this.props;
+      const {
+        value
+      } = event.target;
+      this.onConfigChange(gridConfigurations?.[value] || {}, value);
     });
-
-    var _ref = props.model || {},
-        _domain = _ref.domain,
-        _range = _ref.range,
-        _graph = _ref.graph;
-
-    var _gridValues = {
+    const {
+      domain: _domain,
+      range: _range,
+      graph: _graph
+    } = props.model || {};
+    const _gridValues = {
       domain: (0, _utils.getGridValues)(_domain, _graph.width, true),
       range: (0, _utils.getGridValues)(_range, _graph.height, true)
     };
-    var _labelValues = {
+    const _labelValues = {
       domain: (0, _utils.getLabelValues)(_domain.step),
       range: (0, _utils.getLabelValues)(_range.step)
     };
-    _this.state = {
+    this.state = {
       gridValues: _gridValues,
       labelValues: _labelValues,
       showPixelGuides: false,
       dialog: {
         isOpened: false
       },
-      domain: _objectSpread({}, _domain),
-      range: _objectSpread({}, _range)
+      domain: {
+        ..._domain
+      },
+      range: {
+        ..._range
+      }
     };
-    return _this;
   }
   /*
-   * Function to change labels
-   * @param {object} labels - labels object
+   * Render the component
    * */
-
-
-  (0, _createClass2["default"])(GraphingConfig, [{
-    key: "render",
-    value:
-    /*
-     * Render the component
-     * */
-    function render() {
-      var _this$props4 = this.props,
-          _this$props4$authorin = _this$props4.authoring,
-          authoring = _this$props4$authorin === void 0 ? {} : _this$props4$authorin,
-          classes = _this$props4.classes,
-          _this$props4$gridConf = _this$props4.gridConfigurations,
-          gridConfigurations = _this$props4$gridConf === void 0 ? [] : _this$props4$gridConf,
-          _this$props4$graphDim = _this$props4.graphDimensions,
-          graphDimensions = _this$props4$graphDim === void 0 ? {} : _this$props4$graphDim,
-          labelsPlaceholders = _this$props4.labelsPlaceholders,
-          model = _this$props4.model,
-          showLabels = _this$props4.showLabels,
-          dimensionsEnabled = _this$props4.dimensionsEnabled,
-          showTitle = _this$props4.showTitle,
-          titlePlaceholder = _this$props4.titlePlaceholder,
-          _this$props4$mathMlOp = _this$props4.mathMlOptions,
-          mathMlOptions = _this$props4$mathMlOp === void 0 ? {} : _this$props4$mathMlOp;
-
-      var _ref2 = model || {},
-          arrows = _ref2.arrows,
-          coordinatesOnHover = _ref2.coordinatesOnHover,
-          defaultGridConfiguration = _ref2.defaultGridConfiguration,
-          domain = _ref2.domain,
-          labels = _ref2.labels,
-          range = _ref2.range,
-          standardGrid = _ref2.standardGrid,
-          title = _ref2.title;
-
-      var graph = (model || {}).graph || {};
-
-      var _ref3 = graphDimensions || {},
-          min = _ref3.min,
-          max = _ref3.max,
-          step = _ref3.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,
-          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: false,
-        //Setting false by default as per requirement
-        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
-      }, /*#__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
-      }, "Grid Configuration"), /*#__PURE__*/React.createElement(_core.Select, {
-        input: /*#__PURE__*/React.createElement(_core.OutlinedInput, {
-          labelWidth: 10
-        }),
-        className: classes.gridConfigSelect,
-        displayEmpty: true,
-        onChange: this.changeGridConfiguration,
-        value: defaultGridConfiguration
-      }, (gridConfigurations || []).map(function (config, index) {
-        return /*#__PURE__*/React.createElement(_core.MenuItem, {
-          key: index,
-          value: index
-        }, config.label);
-      }))) : null, displayGridSetup && /*#__PURE__*/React.createElement(_graphingSolutionSet.GridSetup, {
-        displayedFields: displayedFields,
-        domain: domain,
-        gridValues: gridValues,
-        includeAxes: true //Setting true by default as per requirement
-        ,
-        labelValues: labelValues,
-        range: range,
-        size: graph,
-        sizeConstraints: sizeConstraints,
-        standardGrid: standardGrid,
-        onChange: this.onConfigChange,
-        onChangeView: this.onChangeView
-      })), /*#__PURE__*/React.createElement("div", {
-        className: classes.graphConfig,
-        key: "graph"
-      }, /*#__PURE__*/React.createElement(_core.Typography, {
-        component: "div",
-        variant: "subheading"
-      }, "Define Graph Attributes"), /*#__PURE__*/React.createElement(_core.Typography, {
-        component: "div",
-        variant: "body1",
-        className: classes.subtitleText
-      }, "Use this interface to add/edit a title and/or labels"), /*#__PURE__*/React.createElement(_graphingSolutionSet.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: [],
-        onChangeLabels: this.changeLabels,
-        onChangeTitle: this.changeTitle,
-        range: range,
-        showLabels: showLabels,
-        showPixelGuides: showPixelGuides,
-        showTitle: showTitle,
-        size: {
-          width: graph.width,
-          height: graph.height
-        },
-        title: title,
-        titlePlaceholder: titlePlaceholder,
-        disableToolbar: true,
-        mathMlOptions: mathMlOptions
-      })), /*#__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;
-}(React.Component);
-
+  render() {
+    const {
+      authoring = {},
+      gridConfigurations = [],
+      graphDimensions = {},
+      labelsPlaceholders,
+      model,
+      showLabels,
+      dimensionsEnabled,
+      showTitle,
+      titlePlaceholder,
+      mathMlOptions = {}
+    } = this.props;
+    const {
+      arrows,
+      coordinatesOnHover,
+      defaultGridConfiguration,
+      domain,
+      labels,
+      range,
+      standardGrid,
+      title
+    } = model || {};
+    const graph = (model || {}).graph || {};
+    const {
+      min,
+      max,
+      step
+    } = graphDimensions || {};
+    const {
+      dialog = {},
+      gridValues,
+      labelValues,
+      showPixelGuides
+    } = this.state;
+    const sizeConstraints = {
+      min: Math.max(150, min),
+      max: Math.min(800, max),
+      step: step >= 1 ? Math.min(200, step) : 20
+    };
+    const displayedFields = {
+      axisLabel: authoring.axisLabel,
+      dimensionsEnabled,
+      includeAxesEnabled: false,
+      //Setting false by default as per requirement
+      labelStep: authoring.labelStep,
+      min: authoring.min,
+      max: authoring.max,
+      standardGridEnabled: authoring.standardGridEnabled,
+      step: authoring.step
+    };
+    const displayGridSetup = authoring.enabled && Object.values(displayedFields).some(field => typeof field === 'object' ? field.enabled : field);
+    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(GridConfigWrapper, null, gridConfigurations && gridConfigurations.length ? /*#__PURE__*/React.createElement(GridConfig, null, /*#__PURE__*/React.createElement(GridConfigLabel, {
+      component: "div",
+      variant: "h6"
+    }, "Grid Configuration"), /*#__PURE__*/React.createElement(GridConfigSelect, {
+      input: /*#__PURE__*/React.createElement(_material.OutlinedInput, {
+        labelWidth: 10
+      }),
+      displayEmpty: true,
+      onChange: this.changeGridConfiguration,
+      value: defaultGridConfiguration,
+      MenuProps: {
+        transitionDuration: {
+          enter: 225,
+          exit: 195
+        }
+      }
+    }, (gridConfigurations || []).map((config, index) => /*#__PURE__*/React.createElement(_material.MenuItem, {
+      key: index,
+      value: index
+    }, config.label)))) : null, displayGridSetup && /*#__PURE__*/React.createElement(_graphingSolutionSet.GridSetup, {
+      displayedFields: displayedFields,
+      domain: domain,
+      gridValues: gridValues,
+      includeAxes: true //Setting true by default as per requirement
+      ,
+      labelValues: labelValues,
+      range: range,
+      size: graph,
+      sizeConstraints: sizeConstraints,
+      standardGrid: standardGrid,
+      onChange: this.onConfigChange,
+      onChangeView: this.onChangeView
+    })), /*#__PURE__*/React.createElement(GraphConfig, {
+      key: "graph"
+    }, /*#__PURE__*/React.createElement(_material.Typography, {
+      component: "div",
+      variant: "h6"
+    }, "Define Graph Attributes"), /*#__PURE__*/React.createElement(SubtitleText, {
+      component: "div",
+      variant: "body1"
+    }, "Use this interface to add/edit a title and/or labels"), /*#__PURE__*/React.createElement(_graphingSolutionSet.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: [],
+      onChangeLabels: this.changeLabels,
+      onChangeTitle: this.changeTitle,
+      range: range,
+      showLabels: showLabels,
+      showPixelGuides: showPixelGuides,
+      showTitle: showTitle,
+      size: {
+        width: graph.width,
+        height: graph.height
+      },
+      title: title,
+      titlePlaceholder: titlePlaceholder,
+      disableToolbar: true,
+      mathMlOptions: mathMlOptions
+    })), /*#__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
+    }));
+  }
+}
 exports.GraphingConfig = GraphingConfig;
-(0, _defineProperty2["default"])(GraphingConfig, "propTypes", {
-  availableTools: _propTypes["default"].array,
-  classes: _propTypes["default"].object.isRequired,
-  authoring: _propTypes["default"].object,
-  dimensionsEnabled: _propTypes["default"].bool,
-  graphDimensions: _propTypes["default"].object,
-  gridConfigurations: _propTypes["default"].array,
-  labelsPlaceholders: _propTypes["default"].object,
-  model: _propTypes["default"].object.isRequired,
-  onChange: _propTypes["default"].func.isRequired,
-  showLabels: _propTypes["default"].bool,
-  showTitle: _propTypes["default"].bool,
-  titlePlaceholder: _propTypes["default"].string
+(0, _defineProperty2.default)(GraphingConfig, "propTypes", {
+  availableTools: _propTypes.default.array,
+  authoring: _propTypes.default.object,
+  dimensionsEnabled: _propTypes.default.bool,
+  graphDimensions: _propTypes.default.object,
+  gridConfigurations: _propTypes.default.array,
+  labelsPlaceholders: _propTypes.default.object,
+  model: _propTypes.default.object.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  showLabels: _propTypes.default.bool,
+  showTitle: _propTypes.default.bool,
+  titlePlaceholder: _propTypes.default.string
 });
-
-var _default = (0, _styles.withStyles)(styles)(GraphingConfig);
-
-exports["default"] = _default;
+var _default = exports.default = GraphingConfig;
 //# sourceMappingURL=graphing-config.js.map