@pie-element/graphing 8.0.1 → 8.2.0-mui-update.0

package/configure/lib/graphing-config.js

@@ -1,164 +1,132 @@
 "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 _graphing = require("@pie-lib/graphing");
-
 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), "changeBackgroundMarks", function (backgroundMarks) {
-      var model = _objectSpread(_objectSpread({}, _this.props.model), {}, {
-        backgroundMarks: backgroundMarks
-      });
-
-      _this.props.onChange(model);
+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);
+    (0, _defineProperty2.default)(this, "changeBackgroundMarks", backgroundMarks => {
+      const model = {
+        ...this.props.model,
+        backgroundMarks
+      };
+      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)(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
-      }));
+    (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,
-          includeAxes = updatedModel.includeAxes,
-          graph = updatedModel.graph,
-          range = updatedModel.range,
-          standardGrid = updatedModel.standardGrid;
-      var gridValues = {
+    (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,
+        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;
@@ -166,270 +134,255 @@ 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 plotableAnswers = (0, _utils.filterPlotableMarks)(domain, range, answers);
-
+      const plotableAnswers = (0, _utils.filterPlotableMarks)(domain, range, answers);
       if (!(0, _lodash.isEqual)(answers, 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() {
-              _this.setState({
-                gridValues: gridValues,
-                labelValues: labelValues,
+            onClose: () => this.setState({
+              dialog: {
+                isOpened: false
+              }
+            }, onChange({
+              ...model,
+              domain: oldDomain,
+              range: oldRange
+            })),
+            onConfirm: () => {
+              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;
-
+    (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);
+    (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;
   }
-
-  (0, _createClass2["default"])(GraphingConfig, [{
-    key: "render",
-    value: function render() {
-      var _this$props4 = this.props,
-          _this$props4$authorin = _this$props4.authoring,
-          authoring = _this$props4$authorin === void 0 ? {} : _this$props4$authorin,
-          _this$props4$availabl = _this$props4.availableTools,
-          availableTools = _this$props4$availabl === void 0 ? [] : _this$props4$availabl,
-          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,
-          removeIncompleteTool = _this$props4.removeIncompleteTool;
-
-      var _ref2 = model || {},
-          arrows = _ref2.arrows,
-          backgroundMarks = _ref2.backgroundMarks,
-          coordinatesOnHover = _ref2.coordinatesOnHover,
-          defaultGridConfiguration = _ref2.defaultGridConfiguration,
-          domain = _ref2.domain,
-          includeAxes = _ref2.includeAxes,
-          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: 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
-      }, /*#__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, null),
-        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(_graphing.GridSetup, {
-        displayedFields: displayedFields,
-        domain: domain,
-        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.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, 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,
-        titlePlaceholder: titlePlaceholder,
-        toolbarTools: availableTools,
-        mathMlOptions: mathMlOptions,
-        removeIncompleteTool: removeIncompleteTool
-      })), /*#__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 = {},
+      availableTools = [],
+      gridConfigurations = [],
+      graphDimensions = {},
+      labelsPlaceholders,
+      model,
+      showLabels,
+      dimensionsEnabled,
+      showTitle,
+      titlePlaceholder,
+      mathMlOptions = {},
+      removeIncompleteTool
+    } = this.props;
+    const {
+      arrows,
+      backgroundMarks,
+      coordinatesOnHover,
+      defaultGridConfiguration,
+      domain,
+      includeAxes,
+      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: authoring.includeAxesEnabled,
+      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, null),
+      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(_graphing.GridSetup, {
+      displayedFields: displayedFields,
+      domain: domain,
+      gridValues: gridValues,
+      includeAxes: includeAxes,
+      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, 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,
+      titlePlaceholder: titlePlaceholder,
+      toolbarTools: availableTools,
+      mathMlOptions: mathMlOptions,
+      removeIncompleteTool: removeIncompleteTool
+    })), /*#__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