@pie-lib/graphing-solution-set 2.30.1-next.0 → 2.31.1

package/esm/index.js

@@ -0,0 +1,4113 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual';
+import cloneDeep from 'lodash/cloneDeep';
+import { types, utils, createGraphProps, Root as Root$1, gridDraggable, trig } from '@pie-lib/plot';
+import debug from 'debug';
+import { Axis } from '@vx/axis';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import { withStyles as withStyles$1, Typography, Button, ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails } from '@material-ui/core';
+import head from 'lodash/head';
+import tail from 'lodash/tail';
+import invariant from 'invariant';
+import isEmpty from 'lodash/isEmpty';
+import { color, Readable, InputContainer } from '@pie-lib/render-ui';
+import * as vx from '@vx/grid';
+import EditableHtml from '@pie-lib/editable-html';
+import { mouse, select } from 'd3-selection';
+import { connect, Provider } from 'react-redux';
+import { combineReducers, createStore, applyMiddleware } from 'redux';
+import undoable, { ActionCreators } from 'redux-undo';
+import uniq from 'lodash/uniq';
+import isString from 'lodash/isString';
+import Radio from '@material-ui/core/Radio';
+import Button$1 from '@material-ui/core/Button';
+import Translator from '@pie-lib/translator';
+import chunk from 'lodash/chunk';
+import 'lodash/initial';
+import { fade } from '@material-ui/core/styles/colorManipulator';
+import ReactDOM from 'react-dom';
+import AutosizeInput from 'react-input-autosize';
+import { withStyles as withStyles$2 } from '@material-ui/core/styles/index';
+import InputBase from '@material-ui/core/InputBase';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ExpansionPanelSummary$1 from '@material-ui/core/ExpansionPanelSummary';
+import Typography$1 from '@material-ui/core/Typography';
+import ExpansionPanelDetails$1 from '@material-ui/core/ExpansionPanelDetails';
+import ExpansionPanel$1 from '@material-ui/core/ExpansionPanel';
+import { NumberTextFieldCustom, Toggle } from '@pie-lib/config-ui';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+const style = theme => ({
+  root: {
+    fill: `var(--arrow-color, ${theme.palette.common.black})`
+  }
+});
+
+let Arrow$1 = class Arrow extends React.Component {
+  render() {
+    const {
+      x,
+      y,
+      classes,
+      className,
+      scale
+    } = this.props;
+    const names = classNames(classes.root, className);
+    let direction = this.props.direction || 'left';
+    const xv = scale.x(x);
+    const yv = scale.y(y);
+    let transform = '';
+
+    const getTransform = (x, y, rotate) => `translate(${x}, ${y}) rotate(${rotate})`;
+
+    if (direction === 'left') {
+      transform = getTransform(xv - 15, yv, 0);
+    }
+
+    if (direction === 'right') {
+      transform = getTransform(xv + 15, yv, 180);
+    }
+
+    if (direction === 'up') {
+      transform = getTransform(xv, yv - 15, 90);
+    }
+
+    if (direction === 'down') {
+      transform = getTransform(xv, yv + 15, 270);
+    }
+
+    return /*#__PURE__*/React.createElement("path", {
+      d: "m 0,0 8,-5 0,10 -8,-5",
+      transform: transform,
+      className: names
+    });
+  }
+
+};
+Arrow$1.propTypes = {
+  y: PropTypes.number,
+  x: PropTypes.number,
+  direction: PropTypes.oneOf(['left', 'right', 'up', 'down']),
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  scale: types.ScaleType.isRequired
+};
+Arrow$1.defaultProps = {
+  y: 0,
+  x: 0,
+  direction: 'left'
+};
+var Arrow$2 = withStyles(style)(Arrow$1);
+
+const bounds = utils.bounds;
+const point = utils.point; //TODO: This can be removed?
+
+const getAngleDeg = () => 0; //TODO: This can be removed?
+
+const arrowDimensions = () => 0;
+const getTickValues = prop => {
+  const tickValues = [];
+  let tickVal = 0;
+
+  while (tickVal >= prop.min && tickValues.indexOf(tickVal) < 0) {
+    tickValues.push(tickVal);
+    tickVal = Math.round((tickVal - prop.step) * 10000) / 10000;
+  }
+
+  tickVal = Math.round(prop.step * 10000) / 10000;
+
+  while (tickVal <= prop.max && tickValues.indexOf(tickVal) < 0) {
+    tickValues.push(tickVal);
+    tickVal = Math.round((tickVal + prop.step) * 10000) / 10000;
+  } // return only ticks that are inside the min-max interval
+
+
+  if (tickValues) {
+    return tickValues.filter(tV => tV >= prop.min && tV <= prop.max);
+  }
+
+  return [];
+};
+const countWords = label => {
+  if (label == null || isEmpty(label)) {
+    return 1;
+  }
+
+  const words = label.split(' ');
+  return words.length;
+}; // findLongestWord is also used in plot
+
+const findLongestWord = label => {
+  let longestWord = (label || '').replace(/<[^>]+>/g, '').split(' ').sort((a, b) => b.length - a.length);
+  return longestWord[0].length;
+}; // amountToIncreaseWidth is also used in plot
+
+const amountToIncreaseWidth = longestWord => {
+  if (!longestWord) {
+    return 0;
+  }
+
+  return longestWord * 10;
+};
+const polygonToArea = points => {
+  const h = head(points);
+  const area = {
+    left: h.x,
+    top: h.y,
+    bottom: h.y,
+    right: h.x
+  };
+  return tail(points).reduce((a, p) => {
+    a.left = Math.min(a.left, p.x);
+    a.top = Math.max(a.top, p.y);
+    a.bottom = Math.min(a.bottom, p.y);
+    a.right = Math.max(a.right, p.x);
+    return a;
+  }, area);
+};
+const getRightestPoints = points => {
+  const sortedPoints = cloneDeep(points);
+  sortedPoints.sort((a, b) => b.x - a.x);
+  return {
+    a: sortedPoints[0],
+    b: sortedPoints[1]
+  };
+};
+const getMiddleOfTwoPoints = (a, b) => ({
+  x: (a.x + b.x) / 2,
+  y: (a.y + b.y) / 2
+});
+const roundNumber = number => parseFloat(number.toFixed(4));
+const sameAxes = (p1, p2) => p1 && p2 && (roundNumber(p1.x) === roundNumber(p2.x) || roundNumber(p1.y) === roundNumber(p2.y));
+const equalPoints = (p1, p2) => p1 && p2 && isEqual({
+  x: roundNumber(p1.x),
+  y: roundNumber(p1.y)
+}, {
+  x: roundNumber(p2.x),
+  y: roundNumber(p2.y)
+});
+
+const getDistanceBetweenTicks = (axis, size) => {
+  const {
+    min,
+    max,
+    step
+  } = axis;
+  const nbOfTicks = (max - min) / step;
+  return size / nbOfTicks;
+};
+
+const thinnerShapesNeeded = graphProps => {
+  const {
+    domain,
+    range,
+    size: {
+      width,
+      height
+    }
+  } = graphProps; // 14 is the default width of a point
+
+  return getDistanceBetweenTicks(domain, width) < 14 || getDistanceBetweenTicks(range, height) < 14;
+};
+const getAdjustedGraphLimits = graphProps => {
+  const {
+    domain,
+    range,
+    size: {
+      width,
+      height
+    }
+  } = graphProps;
+  const domainTicksDistance = getDistanceBetweenTicks(domain, width);
+  const rangeTicksDistance = getDistanceBetweenTicks(range, height); // 15 is the distance required for the arrow to extend the graph
+
+  const domainPadding = domain.step / (domainTicksDistance / 15);
+  const rangePadding = range.step / (rangeTicksDistance / 15);
+  return {
+    domain: {
+      min: domain.min - domainPadding,
+      max: domain.max + domainPadding
+    },
+    range: {
+      min: range.min - rangePadding,
+      max: range.max + rangePadding
+    }
+  };
+};
+
+const sortPoints = array => (array || []).sort((a, b) => a.x - b.x || a.y - b.y); // check colliniarity of 3 points (source: https://www.geeksforgeeks.org/program-check-three-points-collinear/)
+
+
+const checkCollinearity = (a, b, c) => (a.x - b.x) * (c.y - b.y) === (c.x - b.x) * (a.y - b.y); // 2 lines are overlapping if all 4 points are collinear
+
+
+const isSameLine = (markA, markB) => checkCollinearity(markA.from, markB.from, markB.to) && checkCollinearity(markA.to, markB.from, markB.to);
+
+const isDuplicatedMark = (mark, marks, oldMark) => {
+  const {
+    type,
+    building
+  } = mark;
+
+  if (building) {
+    return false;
+  }
+
+  const filteredMarks = (marks || []).filter(m => m.type === type && !m.building);
+  const index = filteredMarks.findIndex(m => isEqual(m, oldMark));
+
+  if (index !== -1) {
+    filteredMarks.splice(index, 1);
+  }
+
+  const duplicated = filteredMarks.find(m => {
+    if (type === 'line') {
+      const {
+        from,
+        to
+      } = mark;
+      return equalPoints(from, m.from) && equalPoints(to, m.to) || equalPoints(from, m.to) && equalPoints(to, m.from) || type === 'line' && isSameLine(m, mark);
+    } else if (type === 'polygon') {
+      return isEqual(sortPoints(cloneDeep(mark.points)), sortPoints(cloneDeep(m.points)));
+    }
+  });
+  return !!duplicated;
+};
+const areArraysOfObjectsEqual = (array1, array2) => {
+  // Check if both arrays have the same length
+  if (array1.length !== array2.length) {
+    return false;
+  } // Iterate through each object in the arrays
+
+
+  for (let i = 0; i < array1.length; i++) {
+    // Get the current objects in both arrays
+    const obj1 = array1[i];
+    const obj2 = array2[i]; // Check if the objects have the same number of properties
+
+    if (Object.keys(obj1).length !== Object.keys(obj2).length) {
+      return false;
+    } // Iterate through each property in the objects
+
+
+    for (const key in obj1) {
+      // Check if the properties and their values are equal
+      if (obj1[key] !== obj2[key]) {
+        return false;
+      }
+    }
+  } // If all objects are equal, the arrays are the same
+
+
+  return true;
+};
+
+const AxisPropTypes = {
+  includeArrows: PropTypes.object,
+  graphProps: PropTypes.object
+};
+const AxisDefaultProps = {
+  includeArrows: {
+    left: true,
+    right: true,
+    up: true,
+    down: true
+  }
+};
+
+const axisStyles = theme => ({
+  line: {
+    stroke: '#8a92c0',
+    strokeWidth: 4
+  },
+  arrow: {
+    fill: '#8a92c0'
+  },
+  tick: {
+    fill: color.defaults.BLACK,
+    '& > line': {
+      stroke: '#8a92c0'
+    }
+  },
+  labelFontSize: {
+    fontSize: theme.typography.fontSize
+  },
+  axisLabelHolder: {
+    padding: 0,
+    margin: 0,
+    textAlign: 'center',
+    '* > *': {
+      margin: 0,
+      padding: 0
+    },
+    fontSize: theme.typography.fontSize
+  }
+});
+
+const tickLabelStyles = {
+  fontFamily: 'Roboto',
+  fontSize: '14px',
+  cursor: 'inherit'
+};
+const sharedValues = (firstNegativeX, firstNegativeY, distanceFromOriginToFirstNegativeX, distanceFromOriginToFirstNegativeY, deltaAllowance, dy) => {
+  let result = [];
+
+  if (firstNegativeX === firstNegativeY && distanceFromOriginToFirstNegativeX - deltaAllowance < distanceFromOriginToFirstNegativeY && distanceFromOriginToFirstNegativeY < distanceFromOriginToFirstNegativeX + deltaAllowance && distanceFromOriginToFirstNegativeX - deltaAllowance < dy && dy < distanceFromOriginToFirstNegativeX + deltaAllowance) {
+    result.push(firstNegativeX);
+  }
+
+  return result;
+};
+const firstNegativeValue = interval => (interval || []).find(element => element < 0);
+class RawXAxis extends React.Component {
+  render() {
+    const {
+      includeArrows,
+      classes,
+      graphProps,
+      columnTicksValues,
+      skipValues,
+      distanceFromOriginToFirstNegativeY,
+      dy
+    } = this.props;
+    const {
+      scale,
+      domain,
+      size,
+      range
+    } = graphProps || {}; // Having 0 as a number in columnTicksValues does not make 0 to show up
+    // so we use this trick, by defining it as a string:
+
+    const tickValues = (domain.labelStep || range.labelStep) && domain.min <= 0 ? ['0', ...columnTicksValues] : columnTicksValues; // However, the '0' has to be displayed only if other tick labels (y-axis or x-axis) are displayed
+
+    const labelProps = label => {
+      const y = skipValues && skipValues[0] === label ? distanceFromOriginToFirstNegativeY + 4 : dy;
+      return _extends({}, tickLabelStyles, {
+        textAnchor: 'middle',
+        y: y,
+        dx: label === '0' ? -10 : 0,
+        dy: label === '0' ? -7 : 0
+      });
+    };
+
+    const necessaryRows = countWords(domain.axisLabel);
+    const longestWord = findLongestWord(domain.axisLabel);
+    const necessaryWidth = amountToIncreaseWidth(longestWord) + 2;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Axis, {
+      axisLineClassName: classes.line,
+      scale: scale.x,
+      top: scale.y(0),
+      left: 0,
+      label: domain.label,
+      rangePadding: 8,
+      tickClassName: classes.tick,
+      tickFormat: value => value,
+      tickLabelProps: labelProps,
+      tickValues: tickValues
+    }), includeArrows && includeArrows.left && /*#__PURE__*/React.createElement(Arrow$2, {
+      direction: "left",
+      x: domain.min,
+      y: 0,
+      className: classes.arrow,
+      scale: scale
+    }), includeArrows && includeArrows.right && /*#__PURE__*/React.createElement(Arrow$2, {
+      direction: "right",
+      x: domain.max,
+      y: 0,
+      className: classes.arrow,
+      scale: scale
+    }), domain.axisLabel && /*#__PURE__*/React.createElement("foreignObject", {
+      x: size.width + 17,
+      y: scale.y(0) - 9,
+      width: necessaryWidth,
+      height: 20 * necessaryRows
+    }, /*#__PURE__*/React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: domain.axisLabel
+      },
+      className: classes.labelFontSize
+    })));
+  }
+
+}
+RawXAxis.propTypes = _extends({}, AxisPropTypes, {
+  classes: PropTypes.object,
+  graphProps: types.GraphPropsType.isRequired
+});
+RawXAxis.defaultProps = AxisDefaultProps;
+const XAxis = withStyles$1(axisStyles)(RawXAxis);
+class RawYAxis extends React.Component {
+  render() {
+    const {
+      classes,
+      includeArrows,
+      graphProps,
+      skipValues,
+      rowTickValues
+    } = this.props;
+    const {
+      scale,
+      range,
+      size
+    } = graphProps || {};
+    const necessaryWidth = range.axisLabel ? amountToIncreaseWidth(range.axisLabel.length) : 0;
+
+    const customTickFormat = value => skipValues && skipValues.indexOf(value) >= 0 ? '' : value;
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Axis, {
+      axisLineClassName: classes.line,
+      orientation: 'left',
+      scale: scale.y,
+      top: 0,
+      height: size.height,
+      left: scale.x(0),
+      label: range.label,
+      labelProps: {
+        'data-pie-readable': false
+      },
+      rangePadding: 8,
+      tickLength: 10,
+      tickClassName: classes.tick,
+      tickFormat: customTickFormat,
+      tickLabelProps: value => {
+        let digits = value.toLocaleString().replace(/[.-]/g, '').length || 1;
+        return _extends({}, tickLabelStyles, {
+          dy: 4,
+          dx: -10 - digits * 9,
+          'data-pie-readable': false
+        });
+      },
+      hideZero: true,
+      tickTextAnchor: 'bottom',
+      tickValues: rowTickValues
+    }), includeArrows && includeArrows.down && /*#__PURE__*/React.createElement(Arrow$2, {
+      direction: "down",
+      x: 0,
+      y: range.min,
+      className: classes.arrow,
+      scale: scale
+    }), includeArrows && includeArrows.up && /*#__PURE__*/React.createElement(Arrow$2, {
+      direction: "up",
+      x: 0,
+      y: range.max,
+      className: classes.arrow,
+      scale: scale
+    }), range.axisLabel && /*#__PURE__*/React.createElement("foreignObject", {
+      x: scale.x(0) - necessaryWidth / 2,
+      y: -33,
+      width: necessaryWidth,
+      height: "20"
+    }, /*#__PURE__*/React.createElement(Readable, {
+      false: true
+    }, /*#__PURE__*/React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: range.axisLabel
+      },
+      className: classes.axisLabelHolder
+    }))));
+  }
+
+}
+RawYAxis.propTypes = _extends({}, AxisPropTypes, {
+  graphProps: types.GraphPropsType.isRequired
+});
+RawYAxis.defaultProps = AxisDefaultProps;
+const YAxis = withStyles$1(axisStyles)(RawYAxis);
+class Axes extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.xValues = () => {
+      const {
+        graphProps
+      } = this.props;
+      const {
+        scale,
+        domain
+      } = graphProps || {};
+
+      if (!domain || !scale) {
+        return;
+      }
+
+      const ticks = getTickValues(_extends({}, domain, {
+        step: domain.labelStep
+      }));
+      const negative = firstNegativeValue(ticks);
+      return {
+        columnTicksValues: ticks,
+        firstNegativeX: negative,
+        distanceFromOriginToFirstNegativeX: Math.abs(scale.y(0) - scale.y(negative))
+      };
+    };
+
+    this.yValues = () => {
+      const {
+        graphProps
+      } = this.props;
+      const {
+        scale,
+        range
+      } = graphProps || {};
+
+      if (!range || !scale) {
+        return;
+      }
+
+      const ticks = getTickValues(_extends({}, range, {
+        step: range.labelStep
+      }));
+      const negative = firstNegativeValue(ticks);
+      return {
+        rowTickValues: ticks,
+        firstNegativeY: negative,
+        distanceFromOriginToFirstNegativeY: Math.abs(scale.x(0) - scale.x(negative))
+      };
+    };
+  }
+
+  render() {
+    const {
+      graphProps
+    } = this.props;
+    const {
+      domain,
+      range
+    } = graphProps || {};
+    const {
+      columnTicksValues,
+      firstNegativeX,
+      distanceFromOriginToFirstNegativeX
+    } = this.xValues();
+    const {
+      rowTickValues,
+      firstNegativeY,
+      distanceFromOriginToFirstNegativeY
+    } = this.yValues();
+    const deltaAllowance = 6;
+    const dy = 25;
+    const skipValues = sharedValues(firstNegativeX, firstNegativeY, distanceFromOriginToFirstNegativeX, distanceFromOriginToFirstNegativeY, deltaAllowance, dy); // each axis has to be displayed only if the domain & range include it
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, range.min <= 0 ? /*#__PURE__*/React.createElement(XAxis, _extends({}, this.props, {
+      skipValues: skipValues,
+      columnTicksValues: columnTicksValues,
+      distanceFromOriginToFirstNegativeY: distanceFromOriginToFirstNegativeY,
+      dy: dy
+    })) : null, domain.min <= 0 ? /*#__PURE__*/React.createElement(YAxis, _extends({}, this.props, {
+      skipValues: skipValues,
+      rowTickValues: rowTickValues,
+      distanceFromOriginToFirstNegativeX: distanceFromOriginToFirstNegativeX
+    })) : null);
+  }
+
+}
+Axes.propTypes = _extends({}, AxisPropTypes, {
+  classes: PropTypes.object,
+  graphProps: types.GraphPropsType.isRequired
+});
+Axes.defaultProps = AxisDefaultProps;
+
+class Grid extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.getAdditionalGridProps = (rowTickValues, columnTickValues) => {
+      const {
+        graphProps: {
+          scale,
+          size: {
+            width,
+            height
+          },
+          domain,
+          range
+        }
+      } = this.props;
+      const rowTickLabelValues = getTickValues(_extends({}, range, {
+        step: range.labelStep
+      })).filter(value => rowTickValues.includes(value));
+      const columnTickLabelValues = getTickValues(_extends({}, domain, {
+        step: domain.labelStep
+      })).filter(value => columnTickValues.includes(value));
+      const minValueLength = rowTickLabelValues.length && Math.min(...rowTickLabelValues).toString().replace(/[.-]/g, '').length || 1;
+      const maxValueLength = rowTickLabelValues.length && Math.max(...rowTickLabelValues).toString().replace(/[.-]/g, '').length || 1;
+      const rowLabelLength = Math.max(minValueLength, maxValueLength) * 9 + 22;
+      const horizontalDistanceToZero = scale.x(0);
+      const verticalDistanceToZero = scale.y(0);
+      const columnLabelLength = 28;
+      const rowStrokeDasharray = `${horizontalDistanceToZero - rowLabelLength} ${rowLabelLength} ${width}`;
+      const columnStrokeDasharray = `${verticalDistanceToZero} ${columnLabelLength} ${height}`;
+      const displayAdditionalGrid = domain.labelStep > 0 && range.labelStep > 0 && rowTickLabelValues && columnTickLabelValues && rowTickLabelValues.length > 1 && columnTickLabelValues.length > 1 && (rowTickLabelValues.length !== rowTickValues.length || columnTickLabelValues.length !== columnTickValues.length);
+      const filteredColumnValues = columnTickLabelValues.filter(value => value >= 0 || horizontalDistanceToZero - scale.x(value) > rowLabelLength);
+      const filteredRowValues = rowTickLabelValues.filter(value => value >= 0 || scale.y(value) - verticalDistanceToZero > columnLabelLength);
+      return {
+        rowTickLabelValues: filteredRowValues,
+        columnTickLabelValues: filteredColumnValues,
+        rowStrokeDasharray,
+        columnStrokeDasharray,
+        displayAdditionalGrid
+      };
+    };
+  }
+
+  render() {
+    const {
+      graphProps
+    } = this.props;
+    const {
+      scale,
+      size: {
+        height,
+        width
+      },
+      domain,
+      range
+    } = graphProps;
+    const rowTickValues = getTickValues(range);
+    const columnTickValues = getTickValues(domain);
+    const {
+      rowTickLabelValues,
+      columnTickLabelValues,
+      rowStrokeDasharray,
+      columnStrokeDasharray,
+      displayAdditionalGrid
+    } = this.getAdditionalGridProps(rowTickValues, columnTickValues);
+    const additionalGridStroke = domain.labelStep * 2 === domain.step || range.labelStep * 2 === range.step ? '#9FA8DA' : '#7985CB';
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(vx.Grid, {
+      innerRef: r => this.grid = r,
+      xScale: scale.x,
+      yScale: scale.y,
+      width: width,
+      height: height,
+      stroke: "#D3D3D3",
+      rowTickValues: rowTickValues,
+      columnTickValues: columnTickValues
+    }), displayAdditionalGrid && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(vx.GridRows, {
+      scale: scale.y,
+      width: width,
+      tickValues: rowTickLabelValues,
+      stroke: additionalGridStroke,
+      strokeDasharray: rowStrokeDasharray
+    }), /*#__PURE__*/React.createElement(vx.GridColumns, {
+      scale: scale.x,
+      height: height,
+      tickValues: columnTickLabelValues,
+      stroke: additionalGridStroke,
+      strokeDasharray: columnStrokeDasharray
+    })));
+  }
+
+}
+Grid.propTypes = {
+  disabled: PropTypes.bool,
+  disabledAdditionalGrid: PropTypes.bool,
+  classes: PropTypes.object.isRequired,
+  graphProps: types.GraphPropsType.isRequired
+};
+var Grid$1 = withStyles(() => ({}))(Grid);
+
+const rotations = {
+  left: -90,
+  top: 0,
+  bottom: 0,
+  right: 90
+};
+const getTransform = (side, width, height) => {
+  const t = (x, y, rotate) => `translate(${x}, ${y}), rotate(${rotate})`;
+
+  if (side === 'left') {
+    return t(-20, height / 2, rotations[side]);
+  }
+
+  if (side === 'right') {
+    return t(width + 30, height / 2, rotations[side]);
+  }
+
+  if (side === 'top') {
+    return t(width / 2, -20, rotations[side]);
+  }
+
+  if (side === 'bottom') {
+    return t(width / 2, height + 30, rotations[side]);
+  }
+};
+
+const getY = (side, height) => {
+  switch (side) {
+    case 'left':
+      return -36;
+
+    case 'top':
+      return -36;
+
+    case 'right':
+      return -36 - 10;
+
+    default:
+      return -36 + 10;
+  }
+};
+
+class RawLabel extends React.Component {
+  render() {
+    const {
+      disabledLabel,
+      placeholder,
+      text,
+      side,
+      graphProps,
+      classes,
+      onChange,
+      mathMlOptions = {}
+    } = this.props;
+    const {
+      size,
+      domain,
+      range
+    } = graphProps;
+    const totalHeight = (size.height || 500) + (range.padding || 0) * 2;
+    const totalWidth = (size.width || 500) + (domain.padding || 0) * 2;
+    const transform = getTransform(side, totalWidth, totalHeight);
+    const width = side === 'left' || side === 'right' ? totalHeight : totalWidth;
+    const height = 36;
+    const y = getY(side);
+    const finalHeight = side === 'bottom' ? height + 22 : height + 18;
+    const activePlugins = ['bold', 'italic', 'underline', 'strikethrough', 'math' // 'languageCharacters'
+    ];
+    return /*#__PURE__*/React.createElement("foreignObject", {
+      x: -(width / 2),
+      y: y,
+      width: width,
+      height: finalHeight,
+      transform: transform,
+      textAnchor: "middle"
+    }, /*#__PURE__*/React.createElement(Readable, {
+      false: true
+    }, /*#__PURE__*/React.createElement(EditableHtml, {
+      className: classNames({
+        [classes.bottomLabel]: side === 'bottom',
+        [classes.disabledAxisLabel]: disabledLabel
+      }, classes.axisLabel),
+      markup: text || '',
+      onChange: onChange,
+      placeholder: !disabledLabel && placeholder,
+      toolbarOpts: {
+        position: side === 'bottom' ? 'top' : 'bottom',
+        noPadding: true,
+        noBorder: true
+      },
+      activePlugins: activePlugins,
+      mathMlOptions: mathMlOptions
+    })));
+  }
+
+}
+
+RawLabel.propTypes = {
+  text: PropTypes.string,
+  side: PropTypes.string,
+  classes: PropTypes.object,
+  disabledLabel: PropTypes.bool,
+  placeholder: PropTypes.string,
+  graphProps: types.GraphPropsType.isRequired,
+  onChange: PropTypes.func
+};
+RawLabel.defaultProps = {
+  onChange: () => {}
+};
+const Label = withStyles(theme => ({
+  label: {
+    fill: color.defaults.SECONDARY
+  },
+  axisLabel: {
+    fontSize: theme.typography.fontSize - 2,
+    textAlign: 'center',
+    padding: '0 4px'
+  },
+  disabledAxisLabel: {
+    pointerEvents: 'none'
+  },
+  bottomLabel: {
+    marginTop: '44px'
+  }
+}))(RawLabel);
+const LabelType = {
+  left: PropTypes.string,
+  top: PropTypes.string,
+  bottom: PropTypes.string,
+  right: PropTypes.string
+};
+class Labels extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.onChangeLabel = (newValue, side) => {
+      const {
+        value,
+        onChange
+      } = this.props;
+
+      const labels = _extends({}, value, {
+        [side]: newValue
+      });
+
+      onChange(labels);
+    };
+  }
+
+  render() {
+    const {
+      disabledLabels,
+      placeholders = {},
+      value = {},
+      graphProps,
+      mathMlOptions = {}
+    } = this.props;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, {
+      key: "left",
+      side: "left",
+      text: value.left,
+      disabledLabel: disabledLabels,
+      placeholder: placeholders.left,
+      graphProps: graphProps,
+      onChange: value => this.onChangeLabel(value, 'left'),
+      mathMlOptions: mathMlOptions
+    }), /*#__PURE__*/React.createElement(Label, {
+      key: "top",
+      side: "top",
+      text: value.top,
+      disabledLabel: disabledLabels,
+      placeholder: placeholders.top,
+      graphProps: graphProps,
+      onChange: value => this.onChangeLabel(value, 'top'),
+      mathMlOptions: mathMlOptions
+    }), /*#__PURE__*/React.createElement(Label, {
+      key: "bottom",
+      side: "bottom",
+      text: value.bottom,
+      disabledLabel: disabledLabels,
+      placeholder: placeholders.bottom,
+      graphProps: graphProps,
+      onChange: value => this.onChangeLabel(value, 'bottom'),
+      mathMlOptions: mathMlOptions
+    }), /*#__PURE__*/React.createElement(Label, {
+      key: "right",
+      side: "right",
+      text: value.right,
+      disabledLabel: disabledLabels,
+      placeholder: placeholders.right,
+      graphProps: graphProps,
+      onChange: value => this.onChangeLabel(value, 'right'),
+      mathMlOptions: mathMlOptions
+    }));
+  }
+
+}
+Labels.propTypes = {
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  disabledLabels: PropTypes.bool,
+  placeholders: PropTypes.object,
+  value: PropTypes.shape(LabelType),
+  graphProps: PropTypes.object,
+  onChange: PropTypes.object
+};
+Labels.defaultProps = {};
+
+class Bg extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.getRectPadding = () => {
+      const {
+        graphProps
+      } = this.props;
+      return thinnerShapesNeeded(graphProps) ? 6 : 10;
+    };
+
+    this.onRectClick = rect => {
+      const {
+        onClick,
+        graphProps
+      } = this.props;
+      const {
+        scale
+      } = graphProps;
+      const padding = this.getRectPadding();
+      const coords = mouse(rect._groups[0][0]); // decrease the padding from coordinates to indicate the correct point clicked
+
+      const x = scale.x.invert(coords[0] - padding);
+      const y = scale.y.invert(coords[1] - padding);
+      const rowTicks = getTickValues(graphProps.range);
+      const columnTicks = getTickValues(graphProps.domain);
+
+      const closest = (ticks, value) => {
+        return ticks.length && ticks.reduce((prev, curr) => {
+          const currentDistance = Math.abs(curr - value);
+          const previousDistance = Math.abs(prev - value);
+          return currentDistance <= previousDistance ? curr : prev;
+        });
+      };
+
+      let snapped = {};
+
+      if (columnTicks.indexOf(x) >= 0 && rowTicks.indexOf(y) >= 0) {
+        snapped.x = x;
+        snapped.y = y;
+      } else {
+        snapped.x = closest(columnTicks, x);
+        snapped.y = closest(rowTicks, y);
+      }
+
+      onClick(snapped);
+    };
+  }
+
+  componentDidMount() {
+    const rect = select(this.rect);
+    rect.on('click', this.onRectClick.bind(this, rect));
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return !utils.isDomainRangeEqual(this.props.graphProps, nextProps.graphProps) || this.props.width !== nextProps.width || this.props.height !== nextProps.height;
+  }
+
+  render() {
+    const {
+      width,
+      height
+    } = this.props;
+    const padding = this.getRectPadding(); // expand the size of clickable area so a small area outside the edges of the grid lines to be clickable
+
+    return /*#__PURE__*/React.createElement("rect", {
+      ref: rect => this.rect = rect,
+      transform: `translate(-${padding}, -${padding})`,
+      fill: "red",
+      fillOpacity: "0.0",
+      width: width + padding * 2,
+      height: height + padding * 2
+    });
+  }
+
+}
+Bg.propTypes = {
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  onClick: PropTypes.func.isRequired,
+  graphProps: types.GraphPropsType.isRequired
+};
+Bg.defaultProps = {};
+
+const log$1 = debug('pie-lib:graphing-solution-set:graph');
+const graphPropTypes = {
+  axesSettings: PropTypes.shape(AxisPropTypes),
+  backgroundMarks: PropTypes.array,
+  className: PropTypes.string,
+  collapsibleToolbar: PropTypes.bool,
+  collapsibleToolbarTitle: PropTypes.string,
+  disabledLabels: PropTypes.bool,
+  disabledTitle: PropTypes.bool,
+  domain: types.DomainType,
+  labels: PropTypes.shape(LabelType),
+  labelModeEnabled: PropTypes.bool,
+  coordinatesOnHover: PropTypes.bool,
+  marks: PropTypes.array,
+  onChangeLabels: PropTypes.func,
+  onChangeMarks: PropTypes.func,
+  onChangeTitle: PropTypes.func,
+  range: types.DomainType,
+  size: PropTypes.shape({
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired
+  }),
+  showLabels: PropTypes.bool,
+  showPixelGuides: PropTypes.bool,
+  showTitle: PropTypes.bool,
+  title: PropTypes.string,
+  tools: PropTypes.array
+};
+
+const getMaskSize = size => ({
+  x: -23,
+  y: -23,
+  width: size.width + 46,
+  height: size.height + 46
+});
+
+const removeBuildingToolIfCurrentToolDiffers = ({
+  marks,
+  currentTool
+}) => {
+  const buildingMark = marks.filter(m => m.building)[0];
+  let newMarks = cloneDeep(marks);
+
+  if (buildingMark && currentTool && buildingMark.type !== currentTool.type) {
+    const index = newMarks.findIndex(m => isEqual(m, buildingMark));
+
+    if (index >= 0) {
+      newMarks.splice(index, 1);
+    }
+  }
+
+  return newMarks;
+};
+class Graph extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+
+    this.componentDidMount = () => this.setState({
+      labelNode: this.labelNode
+    });
+
+    this.changeMark = (oldMark, newMark) => {
+      const {
+        onChangeMarks,
+        marks,
+        gssLineData
+      } = this.props;
+
+      if ((gssLineData == null ? void 0 : gssLineData.selectedTool) === 'solutionSet') {
+        return;
+      }
+
+      let newMarks = cloneDeep(marks);
+      const index = newMarks.findIndex(m => isEqual(m, oldMark));
+
+      if (index >= 0 && !isDuplicatedMark(newMark, marks, oldMark)) {
+        newMarks.splice(index, 1, newMark);
+        onChangeMarks(newMarks);
+      }
+    };
+
+    this.completeMark = markData => {
+      const {
+        currentTool,
+        marks
+      } = this.props;
+      const buildingMark = marks.filter(m => m.building)[0];
+      if (!buildingMark || !currentTool) return;
+      const updatedMark = currentTool.complete(buildingMark, markData);
+      this.updateMarks(buildingMark, updatedMark);
+    };
+
+    this.updateMarks = (existing, update, addIfMissing = false) => {
+      const {
+        onChangeMarks,
+        marks
+      } = this.props;
+      let newMarks = cloneDeep(marks);
+
+      if (!update || !update.building && isDuplicatedMark(update, marks)) {
+        return;
+      }
+
+      const index = newMarks.findIndex(m => isEqual(m, existing));
+
+      if (index >= 0) {
+        newMarks.splice(index, 1, update);
+        onChangeMarks(newMarks);
+      } else if (addIfMissing) {
+        onChangeMarks([...newMarks, update]);
+      }
+    };
+
+    this.getComponent = mark => {
+      if (!mark) return null;
+      const tool = (this.props.tools || []).find(t => t.type === mark.type);
+      return tool && tool.Component || null;
+    };
+
+    this.onBgClick = point => {
+      const {
+        x,
+        y
+      } = point || {};
+      const {
+        labelModeEnabled,
+        currentTool,
+        marks,
+        gssLineData,
+        onSolutionSetSelected
+      } = this.props;
+
+      if (gssLineData) {
+        if (gssLineData.selectedTool === 'solutionSet') {
+          onSolutionSetSelected(point);
+          return;
+        }
+
+        if (gssLineData.numberOfLines === 1 && gssLineData.selectedTool === 'lineA' && marks.length === 1 && !marks[0].building) {
+          return;
+        }
+
+        if (gssLineData.numberOfLines === 2 && gssLineData.selectedTool === 'lineA' && marks.length === 2) {
+          return;
+        }
+
+        if (gssLineData.numberOfLines === 2 && gssLineData.selectedTool === 'lineA' && marks.length === 1 && !marks[0].building) {
+          return;
+        }
+
+        if (gssLineData.numberOfLines === 2 && gssLineData.selectedTool === 'lineB' && marks.length === 2 && !marks[1].building) {
+          return;
+        }
+      }
+
+      if (labelModeEnabled || !currentTool || [null, undefined].includes(x) || [null, undefined].includes(y)) {
+        return;
+      }
+
+      log$1('[onBgClick] x,y: ', x, y);
+      const buildingMark = marks.filter(m => m.building)[0];
+      let updatedMark; // if the building mark has a different type, we just replace it
+
+      if (buildingMark && currentTool && buildingMark.type === currentTool.type) {
+        updatedMark = currentTool.addPoint({
+          x,
+          y
+        }, _extends({}, buildingMark));
+      } else {
+        updatedMark = currentTool.addPoint({
+          x,
+          y
+        }, undefined);
+      }
+
+      this.updateMarks(buildingMark, updatedMark, true);
+    };
+
+    this.maskUid = this.generateMaskId();
+  }
+
+  generateMaskId() {
+    return 'graph-' + (Math.random() * 10000).toFixed();
+  }
+
+  render() {
+    const {
+      axesSettings,
+      currentTool,
+      coordinatesOnHover,
+      size,
+      disabledLabels,
+      disabledTitle,
+      domain,
+      backgroundMarks,
+      range,
+      title,
+      labels,
+      labelModeEnabled,
+      labelsPlaceholders,
+      showLabels,
+      showPixelGuides,
+      showTitle,
+      titlePlaceholder,
+      onChangeLabels,
+      onChangeTitle,
+      mathMlOptions = {},
+      gssLineData,
+      disabled
+    } = this.props;
+    let {
+      marks
+    } = this.props;
+    const graphProps = createGraphProps(domain, range, size, () => this.rootNode);
+    const maskSize = getMaskSize(size);
+    let common = {
+      graphProps,
+      labelModeEnabled,
+      gssLineData
+    };
+    marks = removeBuildingToolIfCurrentToolDiffers({
+      marks: marks || [],
+      currentTool
+    });
+    let solutionSet = marks.filter(mark => mark.type === 'polygon');
+
+    if (gssLineData && gssLineData.selectedTool === 'solutionSet') {
+      gssLineData.sections.forEach(section => {
+        if (solutionSet.length === 0 || !areArraysOfObjectsEqual(section, solutionSet[0].points)) {
+          let polygon = {
+            type: 'polygon',
+            building: false,
+            closed: true,
+            points: section,
+            isSolution: false
+          };
+          if (!disabled) marks.push(polygon);
+        }
+      });
+    } //Adjusted layering of added svg elements so that polygons will be added first and lines will be added second
+
+
+    let newMarks = [];
+    newMarks.push(...marks.filter(mark => mark.type === 'polygon'));
+    newMarks.push(...marks.filter(mark => mark.type === 'line'));
+    return /*#__PURE__*/React.createElement(Root$1, _extends({
+      rootRef: r => this.rootNode = r,
+      disabledTitle: disabledTitle,
+      disabledLabels: disabledLabels,
+      labels: labels,
+      labelsPlaceholders: labelsPlaceholders || {},
+      showPixelGuides: showPixelGuides,
+      showLabels: showLabels,
+      showTitle: showTitle,
+      title: title,
+      titlePlaceholder: titlePlaceholder,
+      onChangeTitle: onChangeTitle,
+      onChangeLabels: onChangeLabels,
+      mathMlOptions: mathMlOptions
+    }, common), /*#__PURE__*/React.createElement("g", {
+      transform: domain && domain.padding && domain.range ? `translate(${domain.padding}, ${range.padding})` : undefined
+    }, /*#__PURE__*/React.createElement(Grid$1, common), /*#__PURE__*/React.createElement(Axes, _extends({}, axesSettings, common)), /*#__PURE__*/React.createElement(Bg, _extends({}, size, {
+      onClick: this.onBgClick
+    }, common)), /*#__PURE__*/React.createElement("mask", {
+      id: `${this.maskUid}`
+    }, /*#__PURE__*/React.createElement("rect", _extends({}, maskSize, {
+      fill: "white"
+    })), " "), /*#__PURE__*/React.createElement("g", {
+      id: "marks",
+      mask: `url('#${this.maskUid}')`
+    }, (backgroundMarks || []).map((m, index) => {
+      const Component = this.getComponent(m);
+      const markType = m.type;
+      return /*#__PURE__*/React.createElement(Component, _extends({
+        key: `${markType}-${index}-bg`,
+        mark: _extends({}, m, {
+          disabled: true,
+          isBackground: true
+        }),
+        labelNode: this.state.labelNode,
+        onClick: this.onBgClick
+      }, common));
+    }), newMarks.map((m, index) => {
+      const Component = this.getComponent(m);
+      const markType = m.type;
+      return /*#__PURE__*/React.createElement(Component, _extends({
+        key: `${markType}-${index}`,
+        mark: m,
+        coordinatesOnHover: coordinatesOnHover,
+        onChange: this.changeMark,
+        onComplete: this.completeMark,
+        onClick: this.onBgClick,
+        onDragStart: this.startDrag,
+        onDragStop: this.stopDrag,
+        labelNode: this.state.labelNode,
+        isToolActive: currentTool && markType === currentTool.type
+      }, common));
+    }), /*#__PURE__*/React.createElement("foreignObject", _extends({
+      ref: labelNode => this.labelNode = labelNode,
+      x: "0",
+      y: "0"
+    }, size, {
+      style: {
+        pointerEvents: 'none',
+        fontSize: '14px'
+      }
+    })))));
+  }
+
+}
+Graph.propTypes = _extends({}, graphPropTypes, {
+  currentTool: PropTypes.object
+});
+Graph.defaultProps = {
+  onChangeMarks: () => {},
+  disabledLabels: false,
+  disabledTitle: false
+};
+
+const marks = (state = [], action) => {
+  switch (action.type) {
+    case 'CHANGE_MARKS':
+      if (Array.isArray(action.marks)) {
+        return action.marks;
+      } else {
+        throw new Error('marks must be an array');
+      }
+
+    default:
+      return state;
+  }
+};
+
+var reducer = (() => combineReducers({
+  marks: undoable(marks, {
+    debug: false
+  })
+}));
+
+const changeMarks = marks => ({
+  type: 'CHANGE_MARKS',
+  marks
+});
+
+class ToolMenu extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.onChangeRadioValue = event => {
+      let {
+        gssLineData,
+        onChange
+      } = this.props;
+      let oldSelectedTool = gssLineData.selectedTool;
+      gssLineData.selectedTool = event.target.value;
+      onChange(gssLineData, oldSelectedTool);
+    };
+
+    this.lineTypeChange = (line, type) => {
+      let {
+        gssLineData,
+        onChange
+      } = this.props;
+      let oldSelectedTool = gssLineData.selectedTool;
+      gssLineData[`line${line}`].lineType = type;
+      onChange(gssLineData, oldSelectedTool);
+    };
+  }
+
+  render() {
+    let {
+      classes,
+      gssLineData,
+      disabled
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.selectLineRadioGroup
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.radioFieldOuter
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.radioFieldInner
+    }, /*#__PURE__*/React.createElement(Radio, {
+      name: 'select-line-radio-buttons',
+      onChange: this.onChangeRadioValue,
+      value: 'lineA',
+      disabled: !!disabled,
+      checked: gssLineData.selectedTool === 'lineA',
+      className: classes.lineTypeRadio
+    }), /*#__PURE__*/React.createElement(Typography, {
+      className: classes.lineNameFont
+    }, "Line A")), /*#__PURE__*/React.createElement("div", {
+      className: classes.radioFieldButtons
+    }, gssLineData.lineA.lineType === 'Solid' ? /*#__PURE__*/React.createElement(Button, {
+      size: 'small',
+      variant: 'contained',
+      color: 'primary',
+      onClick: () => this.lineTypeChange('A', 'Solid'),
+      className: disabled ? classes.lineTypeButtonLeftSelectedDisabled : classes.lineTypeButtonLeftSelected
+    }, "\u2714 Solid") : /*#__PURE__*/React.createElement(Button, {
+      size: 'small',
+      variant: 'contained',
+      disabled: !!disabled,
+      onClick: () => this.lineTypeChange('A', 'Solid'),
+      className: disabled ? classes.lineTypeButtonLeftUnSelectedDisabled : classes.lineTypeButtonLeftUnSelected
+    }, "Solid"), gssLineData.lineA.lineType === 'Dashed' ? /*#__PURE__*/React.createElement(Button, {
+      size: 'small',
+      variant: 'contained',
+      color: 'primary',
+      onClick: () => this.lineTypeChange('A', 'Dashed'),
+      className: disabled ? classes.lineTypeButtonRightSelectedDisabled : classes.lineTypeButtonRightSelected
+    }, "\u2714 Dashed") : /*#__PURE__*/React.createElement(Button, {
+      size: 'small',
+      variant: 'contained',
+      disabled: !!disabled,
+      onClick: () => this.lineTypeChange('A', 'Dashed'),
+      className: disabled ? classes.lineTypeButtonRightUnSelectedDisabled : classes.lineTypeButtonRightUnSelected
+    }, "Dashed"))), gssLineData.numberOfLines === 2 ? /*#__PURE__*/React.createElement("div", {
+      className: classes.radioFieldOuter
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.radioFieldInner
+    }, /*#__PURE__*/React.createElement(Radio, {
+      name: 'select-line-radio-buttons',
+      onChange: this.onChangeRadioValue,
+      value: 'lineB',
+      disabled: !!disabled,
+      checked: gssLineData.selectedTool === 'lineB',
+      className: classes.lineTypeRadio
+    }), /*#__PURE__*/React.createElement(Typography, {
+      className: classes.lineNameFont
+    }, "Line B")), /*#__PURE__*/React.createElement("div", {
+      className: classes.radioFieldButtons
+    }, gssLineData.lineB.lineType === 'Solid' ? /*#__PURE__*/React.createElement(Button, {
+      size: 'small',
+      variant: 'contained',
+      color: 'primary',
+      onClick: () => this.lineTypeChange('B', 'Solid'),
+      className: disabled ? classes.lineTypeButtonLeftSelectedDisabled : classes.lineTypeButtonLeftSelected
+    }, "\u2714 Solid") : /*#__PURE__*/React.createElement(Button, {
+      size: 'small',
+      variant: 'contained',
+      disabled: !!disabled,
+      onClick: () => this.lineTypeChange('B', 'Solid'),
+      className: disabled ? classes.lineTypeButtonLeftUnSelectedDisabled : classes.lineTypeButtonLeftUnSelected
+    }, "Solid"), gssLineData.lineB.lineType === 'Dashed' ? /*#__PURE__*/React.createElement(Button, {
+      size: 'small',
+      variant: 'contained',
+      color: 'primary',
+      onClick: () => this.lineTypeChange('B', 'Dashed'),
+      className: disabled ? classes.lineTypeButtonRightSelectedDisabled : classes.lineTypeButtonRightSelected
+    }, "\u2714 Dashed") : /*#__PURE__*/React.createElement(Button, {
+      size: 'small',
+      variant: 'contained',
+      disabled: !!disabled,
+      onClick: () => this.lineTypeChange('B', 'Dashed'),
+      className: disabled ? classes.lineTypeButtonRightUnSelectedDisabled : classes.lineTypeButtonRightUnSelected
+    }, "Dashed"))) : null, /*#__PURE__*/React.createElement("div", {
+      className: classes.radioFieldOuter
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.radioFieldInner
+    }, /*#__PURE__*/React.createElement(Radio, {
+      name: 'select-line-radio-buttons',
+      onChange: this.onChangeRadioValue,
+      value: 'solutionSet',
+      disabled: !!disabled,
+      checked: gssLineData.selectedTool === 'solutionSet',
+      className: classes.lineTypeRadio
+    }), /*#__PURE__*/React.createElement(Typography, {
+      className: classes.lineNameFont
+    }, "Solution Set"))));
+  }
+
+}
+ToolMenu.propTypes = {
+  classes: PropTypes.object,
+  gssLineData: PropTypes.object,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func
+};
+
+const styles$7 = theme => ({
+  radioButtonClass: {},
+  selectLineRadioGroup: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row'
+  },
+  radioFieldInner: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  radioFieldOuter: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'column'
+  },
+  radioFieldButtons: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    padding: '0 .9rem'
+  },
+  lineTypeText: {
+    marginLeft: '.7rem'
+  },
+  lineNameFont: {
+    fontWeight: 'bold',
+    padding: '0 5px 0 0'
+  },
+  lineTypeButtonLeftSelected: {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    borderRadius: '0',
+    backgroundColor: '#3E4EB1 !important',
+    borderTopLeftRadius: '4px',
+    borderBottomLeftRadius: '4px',
+    color: '#FFFFFF !important'
+  },
+  lineTypeButtonLeftUnSelected: {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    borderRadius: '0',
+    backgroundColor: '#FFFFFF !important',
+    borderTopLeftRadius: '4px',
+    borderBottomLeftRadius: '4px',
+    color: '#3E4EB1 !important'
+  },
+  lineTypeButtonRightSelected: {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    borderRadius: '0',
+    backgroundColor: '#3E4EB1 !important',
+    borderTopRightRadius: '4px',
+    borderBottomRightRadius: '4px',
+    color: '#FFFFFF !important'
+  },
+  lineTypeButtonRightUnSelected: {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    borderRadius: '0',
+    backgroundColor: '#FFFFFF !important',
+    borderTopRightRadius: '4px',
+    borderBottomRightRadius: '4px',
+    color: '#3E4EB1 !important'
+  },
+  lineTypeRadio: {
+    color: '#000000 !important'
+  },
+  lineTypeButtonLeftSelectedDisabled: {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    borderRadius: '0',
+    backgroundColor: '#3E4EB1 !important',
+    borderTopLeftRadius: '4px',
+    borderBottomLeftRadius: '4px',
+    color: '#FFFFFF !important',
+    cursor: 'default',
+    pointerEvents: 'none'
+  },
+  lineTypeButtonLeftUnSelectedDisabled: {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    borderRadius: '0',
+    backgroundColor: '#FFFFFF !important',
+    borderTopLeftRadius: '4px',
+    borderBottomLeftRadius: '4px',
+    color: '#3E4EB1 !important',
+    cursor: 'default',
+    pointerEvents: 'none'
+  },
+  lineTypeButtonRightSelectedDisabled: {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    borderRadius: '0',
+    backgroundColor: '#3E4EB1 !important',
+    borderTopRightRadius: '4px',
+    borderBottomRightRadius: '4px',
+    color: '#FFFFFF !important',
+    cursor: 'default',
+    pointerEvents: 'none'
+  },
+  lineTypeButtonRightUnSelectedDisabled: {
+    textTransform: 'none',
+    border: '1px solid #3E4EB1',
+    borderRadius: '0',
+    backgroundColor: '#FFFFFF !important',
+    borderTopRightRadius: '4px',
+    borderBottomRightRadius: '4px',
+    color: '#3E4EB1 !important',
+    cursor: 'default',
+    pointerEvents: 'none'
+  }
+});
+
+var ToolMenu$1 = withStyles(styles$7)(ToolMenu);
+
+const {
+  translator
+} = Translator;
+class UndoRedo extends React.Component {
+  render() {
+    const {
+      classes,
+      className,
+      onReset = false,
+      language
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(className)
+    }, /*#__PURE__*/React.createElement(Button$1, {
+      classes: {
+        root: classes.button
+      },
+      onClick: () => onReset()
+    }, translator.t('graphing.reset', {
+      lng: language
+    })));
+  }
+
+}
+UndoRedo.propTypes = {
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  onReset: PropTypes.func.isRequired,
+  language: PropTypes.string
+};
+UndoRedo.defaultProps = {};
+
+const styles$6 = theme => ({
+  button: {
+    color: color.text(),
+    fontWeight: 'bold',
+    marginBottom: theme.spacing.unit / 2,
+    '&:not(:last-of-type)': {
+      marginRight: theme.spacing.unit / 2
+    }
+  },
+  undoRedoDiv: {
+    display: 'flex',
+    flexDirection: 'row'
+  }
+});
+
+var UndoRedo$1 = withStyles$1(styles$6)(UndoRedo);
+
+const ToolPropTypeFields = {
+  mark: PropTypes.any,
+  onChange: PropTypes.func,
+  onDragStart: PropTypes.func,
+  onDragStop: PropTypes.func
+};
+
+const disabled = (key = 'fill') => ({
+  [key]: color.disabled(),
+  pointerEvents: 'none'
+});
+const correct = (key = 'fill') => ({
+  [key]: color.correct(),
+  pointerEvents: 'none'
+});
+const incorrect = (key = 'fill') => ({
+  [key]: color.incorrect(),
+  pointerEvents: 'none'
+});
+const missing = (key = 'fill') => ({
+  [key]: color.missing(),
+  pointerEvents: 'none'
+});
+
+const _excluded$5 = ["points", "classes", "className", "correctness", "graphProps", "closed", "isSolution"];
+const getPointString = (points, scale) => {
+  return (points || []).map(p => {
+    const scaledPoint = {
+      x: scale.x(p.x),
+      y: scale.y(p.y)
+    };
+    return `${scaledPoint.x},${scaledPoint.y}`;
+  }).join(' ');
+};
+class RawPolygon extends React.Component {
+  render() {
+    const _this$props = this.props,
+          {
+      points,
+      classes,
+      className,
+      correctness,
+      graphProps,
+      closed,
+      isSolution
+    } = _this$props,
+          rest = _objectWithoutPropertiesLoose(_this$props, _excluded$5);
+
+    const {
+      scale
+    } = graphProps;
+    const pointString = getPointString(points, scale);
+    const Tag = closed ? 'polygon' : 'polyline';
+    return /*#__PURE__*/React.createElement(Tag, _extends({
+      points: pointString,
+      className: classNames(isSolution ? classes.gssSolution : classes.gssClosed, classes[correctness], className)
+    }, rest));
+  }
+
+}
+RawPolygon.propTypes = {
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  isSolution: PropTypes.bool,
+  points: PropTypes.arrayOf(types.PointType),
+  graphProps: types.GraphPropsType.isRequired,
+  closed: PropTypes.bool.isRequired,
+  correctness: PropTypes.string
+};
+RawPolygon.defaultProps = {
+  points: []
+};
+const Polygon = withStyles(theme => ({
+  closed: {
+    fill: fade(theme.palette.primary.light, 0.2),
+    // TODO hardcoded color
+    strokeWidth: 2,
+    stroke: color.defaults.SECONDARY_LIGHT
+  },
+  open: {
+    fill: fade(theme.palette.primary.light, 0.0),
+    // TODO hardcoded color
+    strokeWidth: 2,
+    stroke: color.defaults.SECONDARY_LIGHT,
+    pointerEvents: 'none'
+  },
+  gssClosed: {
+    fill: 'transparent',
+    '&:hover': {
+      fill: 'rgb(0, 0, 0, 0.25)'
+    }
+  },
+  gssSolution: {
+    fill: 'rgb(60, 73, 150, 0.6)'
+  },
+  disabled: _extends({}, disabled('stroke')),
+  correct: _extends({}, correct('stroke')),
+  incorrect: _extends({}, incorrect('stroke'))
+}))(RawPolygon);
+var DraggablePolygon = gridDraggable({
+  bounds: (props, {
+    domain,
+    range
+  }) => {
+    const {
+      points
+    } = props;
+    const area = polygonToArea(points);
+    return bounds(area, domain, range);
+  },
+  anchorPoint: props => {
+    const {
+      points
+    } = props;
+    return points[0];
+  },
+  fromDelta: (props, delta) => {
+    const {
+      points
+    } = props;
+    return points.map(p => point(p).add(point(delta)));
+  }
+})(Polygon);
+
+const useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => clearTimeout(handler);
+  }, [value]);
+  return debouncedValue;
+};
+
+const styles$5 = theme => ({
+  input: {
+    float: 'right',
+    padding: theme.spacing.unit * 0.5,
+    fontFamily: theme.typography.fontFamily,
+    fontSize: theme.typography.fontSize,
+    border: `solid 1px ${color.defaults.SECONDARY}`,
+    borderRadius: '3px',
+    color: color.defaults.PRIMARY_DARK
+  },
+  disabled: {
+    border: `solid 1px ${color.defaults.PRIMARY_DARK}`,
+    background: theme.palette.background.paper
+  },
+  disabledMark: {
+    border: `solid 1px ${color.disabled()}`,
+    background: theme.palette.background.paper,
+    color: color.disabled()
+  }
+});
+
+const position = (graphProps, mark, rect) => {
+  rect = rect || {
+    width: 0,
+    height: 0
+  };
+  const {
+    scale,
+    domain,
+    range
+  } = graphProps;
+  const shift = 10;
+  const rightEdge = scale.x(mark.x) + rect.width + shift;
+  const bottomEdge = scale.y(mark.y) + rect.height + shift;
+  const h = rightEdge >= scale.x(domain.max) ? 'left' : 'right';
+  const v = bottomEdge >= scale.y(range.min) ? 'top' : 'bottom';
+  return `${v}-${h}`;
+};
+const coordinates = (graphProps, mark, rect, position) => {
+  const {
+    scale
+  } = graphProps;
+  const shift = 10;
+  rect = rect || {
+    width: 0,
+    height: 0
+  };
+
+  switch (position) {
+    case 'bottom-right':
+      {
+        return {
+          left: scale.x(mark.x) + shift,
+          top: scale.y(mark.y) + shift
+        };
+      }
+
+    case 'bottom-left':
+      {
+        return {
+          left: scale.x(mark.x) - shift - rect.width,
+          top: scale.y(mark.y) + shift
+        };
+      }
+
+    case 'top-left':
+      {
+        return {
+          left: scale.x(mark.x) - shift - rect.width,
+          top: scale.y(mark.y) - shift - rect.height
+        };
+      }
+
+    case 'top-right':
+      {
+        return {
+          left: scale.x(mark.x) + shift,
+          top: scale.y(mark.y) - shift - rect.height
+        };
+      }
+  }
+};
+const MarkLabel = props => {
+  const [input, setInput] = useState(null);
+
+  const _ref = useCallback(node => setInput(node));
+
+  const {
+    mark,
+    graphProps,
+    classes,
+    disabled,
+    inputRef: externalInputRef,
+    theme
+  } = props;
+  const [label, setLabel] = useState(mark.label);
+
+  const onChange = e => setLabel(e.target.value);
+
+  const debouncedLabel = useDebounce(label, 200); // useState only sets the value once, to synch props to state need useEffect
+
+  useEffect(() => {
+    setLabel(mark.label);
+  }, [mark.label]); // pick up the change to debouncedLabel and save it
+
+  useEffect(() => {
+    if (typeof debouncedLabel === 'string' && debouncedLabel !== mark.label) {
+      props.onChange(debouncedLabel);
+    }
+  }, [debouncedLabel]);
+  const rect = input ? input.getBoundingClientRect() : {
+    width: 0,
+    height: 0
+  };
+  const pos = position(graphProps, mark, rect);
+  const leftTop = coordinates(graphProps, mark, rect, pos);
+
+  const style = _extends({
+    position: 'fixed',
+    pointerEvents: 'auto'
+  }, leftTop);
+
+  const disabledInput = disabled || mark.disabled;
+  return /*#__PURE__*/React.createElement(AutosizeInput, {
+    inputRef: r => {
+      _ref(r);
+
+      externalInputRef(r);
+    },
+    disabled: disabledInput,
+    inputClassName: classNames(classes.input, {
+      [classes.disabled]: disabled,
+      [classes.disabledMark]: mark.disabled
+    }),
+    value: label,
+    style: style,
+    onChange: onChange
+  });
+};
+MarkLabel.propTypes = {
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  graphProps: types.GraphPropsType,
+  classes: PropTypes.object,
+  inputRef: PropTypes.func,
+  mark: PropTypes.object,
+  theme: PropTypes.object
+};
+var MarkLabel$1 = withStyles(styles$5, {
+  withTheme: true
+})(MarkLabel);
+
+const log = debug('pie-lib:graphing-solution-set:polygon');
+const swap = (arr, ...rest) => {
+  const pairs = chunk(rest, 2);
+  return pairs.reduce((acc, pr) => {
+    if (pr.length === 2) {
+      let [e, replacement] = pr;
+      invariant(Number.isFinite(e.index), 'Index must be defined');
+      const index = e.index; // const i = acc.findIndex(pt => pt.x === e.x && pt.y === e.y);
+
+      if (index >= 0) {
+        acc.splice(index, 1, replacement);
+        return acc;
+      } else {
+        return acc;
+      }
+    } else {
+      return acc;
+    }
+  }, [...arr]);
+};
+class RawBaseComponent extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.dragPoint = (index, from, to) => {
+      log('[dragPoint] from, to:', from, to);
+      const {
+        onChange,
+        points
+      } = this.props;
+      const update = [...points];
+      const overlapPoint = !!(points || []).find(p => equalPoints(p, to));
+
+      if (equalPoints(from, to) || overlapPoint) {
+        return;
+      }
+
+      if (points[index].label) {
+        to.label = points[index].label;
+      }
+
+      update.splice(index, 1, to);
+      onChange(update);
+    };
+
+    this.dragLine = (existing, next) => {
+      log('[dragLine]: ', existing, next);
+      const {
+        onChange
+      } = this.props;
+
+      if (existing.from.label) {
+        next.from.label = existing.from.label;
+      }
+
+      if (existing.to.label) {
+        next.to.label = existing.to.label;
+      }
+
+      const points = swap(this.props.points, existing.from, next.from, existing.to, next.to);
+      onChange(points);
+    };
+
+    this.dragPoly = (existing, next) => {
+      log('[dragPoly] ', existing, next);
+      const {
+        onChange
+      } = this.props;
+      next.forEach((point, index) => {
+        if (existing[index].label) {
+          next[index].label = existing[index].label;
+        }
+      });
+      onChange(next);
+    };
+
+    this.close = () => {
+      const {
+        points,
+        onClosePolygon
+      } = this.props;
+      log('[close] ...');
+
+      if (points.length >= 3) {
+        onClosePolygon();
+      } else {
+        log('[close] - nope');
+      }
+    };
+
+    this.labelChange = (point, index) => {
+      const {
+        points,
+        onChangeProps
+      } = this.props;
+
+      const updatedPoint = _extends({}, point);
+
+      if (!point.label || isEmpty(point.label)) {
+        delete updatedPoint.label;
+      }
+
+      const update = [...points];
+      update.splice(index, 1, updatedPoint);
+      onChangeProps(update);
+    };
+
+    this.clickPoint = (point, index, data) => {
+      const {
+        closed,
+        disabled,
+        onClick,
+        isToolActive,
+        labelModeEnabled,
+        onChangeProps,
+        onChangeLabelProps,
+        points
+      } = this.props;
+
+      if (labelModeEnabled) {
+        if (disabled) {
+          return;
+        }
+
+        if (points && index === points.length) {
+          const {
+            a,
+            b
+          } = getRightestPoints(points);
+
+          const middle = _extends({
+            label: ''
+          }, point, getMiddleOfTwoPoints(a, b));
+
+          onChangeLabelProps(middle);
+        } else {
+          const update = [...points];
+          update.splice(index, 1, _extends({
+            label: ''
+          }, point));
+          onChangeProps(update);
+        }
+
+        if (this.input[index]) {
+          this.input[index].focus();
+        }
+
+        return;
+      }
+
+      if (isToolActive && !closed && index === 0) {
+        this.close();
+        return;
+      }
+
+      onClick(point || data);
+    };
+
+    this.input = {};
+  }
+
+  render() {
+    const {
+      closed,
+      graphProps,
+      onChangeLabelProps,
+      points,
+      middle,
+      labelNode,
+      labelModeEnabled,
+      isSolution = false
+    } = this.props;
+    const polygonLabelIndex = points && points.length || 0;
+
+    if (labelNode && middle && middle.hasOwnProperty('label')) ;
+
+    return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DraggablePolygon, {
+      points: points,
+      closed: closed,
+      isSolution: isSolution,
+      graphProps: graphProps,
+      onClick: this.clickPoint.bind(this, middle, polygonLabelIndex)
+    })));
+  }
+
+}
+RawBaseComponent.propTypes = {
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  correctness: PropTypes.string,
+  points: PropTypes.arrayOf(types.PointType),
+  closed: PropTypes.bool,
+  isSolution: PropTypes.bool,
+  coordinatesOnHover: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  onClosePolygon: PropTypes.func.isRequired,
+  onDragStart: PropTypes.func,
+  onDragStop: PropTypes.func,
+  onClick: PropTypes.func,
+  graphProps: types.GraphPropsType.isRequired,
+  isToolActive: PropTypes.bool,
+  middle: PropTypes.object,
+  labelNode: PropTypes.object,
+  labelModeEnabled: PropTypes.bool,
+  onChangeLabelProps: PropTypes.func,
+  onChangeProps: PropTypes.func
+};
+RawBaseComponent.defaultProps = {
+  points: []
+};
+const BaseComponent = withStyles(() => ({}))(RawBaseComponent);
+let Component$1 = class Component extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.change = points => {
+      const {
+        mark: {
+          middle
+        }
+      } = this.props;
+
+      const mark = _extends({}, this.state.mark, {
+        points
+      });
+
+      if (middle) {
+        const {
+          a,
+          b
+        } = getRightestPoints(points);
+        mark.middle = _extends({}, middle, getMiddleOfTwoPoints(a, b));
+      }
+
+      this.setState({
+        mark
+      });
+    };
+
+    this.changeProps = points => {
+      const mark = _extends({}, this.props.mark, {
+        points
+      });
+
+      this.props.onChange(this.props.mark, mark);
+    };
+
+    this.changeLabelProps = point => {
+      const {
+        mark,
+        onChange
+      } = this.props;
+
+      const middle = _extends({}, mark.middle, point);
+
+      onChange(mark, _extends({}, mark, {
+        middle
+      }));
+    };
+
+    this.closePolygon = () => {
+      log('[closePolygon] ...');
+      const {
+        onComplete,
+        mark
+      } = this.props;
+
+      const update = _extends({}, mark, {
+        closed: true
+      });
+
+      onComplete(mark, update);
+    };
+
+    this.dragStart = () => this.setState({
+      mark: this.props.mark
+    });
+
+    this.dragStop = () => {
+      const {
+        onChange
+      } = this.props;
+
+      const m = _extends({}, this.state.mark);
+
+      this.setState({
+        mark: undefined
+      }, () => {
+        onChange(this.props.mark, m);
+      });
+    };
+
+    this.state = {};
+  }
+
+  render() {
+    const {
+      coordinatesOnHover,
+      mark,
+      graphProps,
+      onClick,
+      isToolActive,
+      labelNode,
+      labelModeEnabled
+    } = this.props;
+    const {
+      mark: stateMark
+    } = this.state;
+    return /*#__PURE__*/React.createElement(BaseComponent, _extends({}, stateMark || mark, {
+      coordinatesOnHover: coordinatesOnHover,
+      onChange: this.change,
+      onChangeLabelProps: this.changeLabelProps,
+      onChangeProps: this.changeProps,
+      onClosePolygon: this.closePolygon,
+      onDragStart: this.dragStart,
+      onDragStop: this.dragStop,
+      onClick: onClick,
+      graphProps: graphProps,
+      isToolActive: isToolActive,
+      labelNode: labelNode,
+      labelModeEnabled: labelModeEnabled
+    }));
+  }
+
+};
+Component$1.propTypes = _extends({}, ToolPropTypeFields, {
+  graphProps: types.GraphPropsType.isRequired
+});
+Component$1.defaultProps = {};
+
+const addPointToArray = (point, arr) => {
+  arr = arr || [];
+
+  if (arr.length === 0) {
+    return {
+      points: [point],
+      closed: false
+    };
+  } else if (arr.length === 1) {
+    if (equalPoints(point, arr[0])) {
+      return {
+        points: arr,
+        closed: false
+      };
+    } else {
+      return {
+        points: [...arr, point],
+        closed: false
+      };
+    }
+  } else if (arr.length >= 2) {
+    const closed = equalPoints(point, arr[0]);
+
+    if (closed) {
+      return {
+        points: arr,
+        closed
+      };
+    } else {
+      const hasPoint = !!arr.find(p => equalPoints(p, point));
+
+      if (hasPoint) {
+        return {
+          points: arr,
+          closed: false
+        };
+      } else {
+        return {
+          points: [...arr, point],
+          closed: false
+        };
+      }
+    }
+  }
+};
+const tool$1 = () => ({
+  type: 'polygon',
+  Component: Component$1,
+  complete: (data, mark) => {
+    return _extends({}, mark, {
+      building: false,
+      closed: true
+    });
+  },
+  addPoint: (point, mark) => {
+    if (!mark) {
+      return {
+        type: 'polygon',
+        points: [point],
+        closed: false,
+        building: true
+      };
+    } else {
+      const {
+        closed,
+        points
+      } = addPointToArray(point, mark.points);
+      return _extends({}, mark, {
+        closed,
+        points,
+        building: !closed
+      });
+    }
+  }
+});
+
+const styles$4 = theme => ({
+  input: {
+    fontFamily: theme.typography.fontFamily,
+    fontSize: theme.typography.fontSize,
+    borderRadius: '8px',
+    background: theme.palette.common.white,
+    color: color.defaults.BLACK
+  },
+  inputLabel: {
+    padding: 0
+  }
+});
+
+const getLabelPosition = (graphProps, x, y, labelLength) => {
+  const {
+    scale,
+    domain,
+    range
+  } = graphProps; // treat corner cases for maximum and minimum
+
+  const topShift = y === range.min ? 16 : y === range.max ? 0 : 8;
+  const leftShift = 10;
+  const rightEdge = scale.x(x) + labelLength + leftShift;
+
+  if (rightEdge >= scale.x(domain.max)) {
+    return {
+      left: scale.x(x) - leftShift - labelLength,
+      top: scale.y(y) - topShift
+    };
+  }
+
+  return {
+    left: scale.x(x) + leftShift,
+    top: scale.y(y) - topShift
+  };
+};
+const CoordinatesLabel = ({
+  x,
+  y,
+  graphProps,
+  classes
+}) => {
+  const label = `(${roundNumber(x)}, ${roundNumber(y)})`;
+  const labelLength = (label.length || 0) * 6;
+  const labelPosition = getLabelPosition(graphProps, x, y, labelLength);
+
+  const style = _extends({
+    position: 'absolute',
+    pointerEvents: 'auto',
+    width: labelLength,
+    padding: 0
+  }, labelPosition);
+
+  return /*#__PURE__*/React.createElement(InputBase, {
+    style: style,
+    classes: {
+      input: classes.inputLabel
+    },
+    className: classes.input,
+    value: label,
+    inputProps: {
+      ariaLabel: 'naked'
+    }
+  });
+};
+CoordinatesLabel.propTypes = {
+  graphProps: types.GraphPropsType,
+  classes: PropTypes.object,
+  x: PropTypes.number,
+  y: PropTypes.number
+};
+var CoordinatesLabel$1 = withStyles(styles$4)(CoordinatesLabel);
+
+const _excluded$4 = ["classes", "className", "coordinatesOnHover", "x", "y", "disabled", "correctness", "graphProps", "labelNode", "style", "onClick", "onTouchStart", "onTouchEnd"];
+class RawBp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showCoordinates: false
+    };
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      classes,
+      className,
+      coordinatesOnHover,
+      x,
+      y,
+      disabled,
+      correctness,
+      graphProps,
+      labelNode,
+      onClick,
+      // Refactored RawBp component by isolating onTouchStart and onTouchEnd handlers to the outer circle, resolving erratic touch event behavior.
+      // Remaining props are now applied only to the inner circle for improved event handling consistency.
+      onTouchStart,
+      onTouchEnd
+    } = _this$props,
+          rest = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
+
+    const {
+      showCoordinates
+    } = this.state;
+    const {
+      scale
+    } = graphProps;
+    const r = thinnerShapesNeeded(graphProps) ? 5 : 7;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("circle", {
+      style: {
+        fill: 'transparent',
+        cursor: 'pointer',
+        pointerEvents: 'all'
+      },
+      r: r * 3,
+      cx: scale.x(x),
+      cy: scale.y(y),
+      onMouseEnter: () => this.setState({
+        showCoordinates: true
+      }),
+      onMouseLeave: () => this.setState({
+        showCoordinates: false
+      }),
+      onTouchStart: onTouchStart,
+      onTouchEnd: onTouchEnd,
+      onClick: onClick
+    }), /*#__PURE__*/React.createElement("g", {
+      className: classNames(classes.point, disabled && classes.disabled, classes[correctness], className),
+      onMouseEnter: () => this.setState({
+        showCoordinates: true
+      }),
+      onMouseLeave: () => this.setState({
+        showCoordinates: false
+      })
+    }, /*#__PURE__*/React.createElement("circle", _extends({}, rest, {
+      style: {
+        fill: color.defaults.BLACK,
+        cursor: 'pointer'
+      },
+      r: r,
+      cx: scale.x(x),
+      cy: scale.y(y)
+    })), labelNode && coordinatesOnHover && showCoordinates && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(CoordinatesLabel$1, {
+      graphProps: graphProps,
+      x: x,
+      y: y
+    }), labelNode)));
+  }
+
+}
+RawBp.propTypes = {
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  coordinatesOnHover: PropTypes.bool,
+  correctness: PropTypes.string,
+  disabled: PropTypes.bool,
+  labelNode: PropTypes.object,
+  x: PropTypes.number,
+  y: PropTypes.number,
+  graphProps: types.GraphPropsType.isRequired
+};
+
+const _excluded$3 = ["classes", "className", "x", "y", "disabled", "correctness", "graphProps", "from", "to"];
+class RawArrow extends React.Component {
+  render() {
+    const _this$props = this.props,
+          {
+      classes,
+      className,
+      x,
+      y,
+      disabled,
+      correctness,
+      graphProps,
+      from,
+      to
+    } = _this$props,
+          rest = _objectWithoutPropertiesLoose(_this$props, _excluded$3); // x & y are the initial coordinates for the arrow
+    // from & to are used only to calculate the angle that the arrow should be rotated with
+
+
+    const {
+      scale
+    } = graphProps;
+    const angle = getAngleDeg(from.x, from.y, to.x, to.y);
+    let points = '';
+
+    if (isEqual(from, to)) {
+      points = '0,0 0,0 0,0';
+    } else {
+      points = `0,0 ${arrowDimensions.vector},${arrowDimensions.vector * 2} 
+      -${arrowDimensions.vector},${arrowDimensions.vector * 2}`;
+    }
+
+    return /*#__PURE__*/React.createElement("g", _extends({
+      className: classNames(classes.point, disabled && classes.disabled, classes[correctness], className)
+    }, rest), /*#__PURE__*/React.createElement("polygon", {
+      points: points,
+      transform: `
+          translate(${scale.x(x)}, ${scale.y(y)})
+          rotate(${angle} 0 0)`
+    }));
+  }
+
+}
+RawArrow.propTypes = {
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  correctness: PropTypes.string,
+  disabled: PropTypes.bool,
+  x: PropTypes.number,
+  y: PropTypes.number,
+  from: PropTypes.shape({
+    x: PropTypes.number,
+    y: PropTypes.number
+  }).isRequired,
+  to: PropTypes.shape({
+    x: PropTypes.number,
+    y: PropTypes.number
+  }),
+  graphProps: types.GraphPropsType.isRequired
+};
+RawArrow.defaultProps = {
+  from: {},
+  to: {}
+};
+
+const ArrowHead = ({
+  size,
+  transform,
+  points
+}) => /*#__PURE__*/React.createElement("polygon", {
+  points: points || `0,0 ${size},${size / 2} 0,${size}`,
+  transform: transform
+});
+ArrowHead.propTypes = {
+  points: PropTypes.string,
+  size: PropTypes.number,
+  transform: PropTypes.string
+};
+ArrowHead.defaultProps = {
+  points: '',
+  size: 10,
+  transform: ''
+};
+const genUid = () => {
+  const v = (Math.random() * 1000).toFixed(0);
+  return `arrow-${v}`;
+};
+const ArrowMarker = ({
+  id,
+  size,
+  className
+}) => {
+  return /*#__PURE__*/React.createElement("marker", {
+    id: id,
+    viewBox: `0 0 ${size} ${size}`,
+    refX: size / 2,
+    refY: size / 2,
+    markerWidth: size,
+    markerHeight: size,
+    orient: "auto-start-reverse",
+    className: className,
+    style: {
+      fill: color.defaults.BLACK
+    }
+  }, /*#__PURE__*/React.createElement(ArrowHead, {
+    size: size
+  }));
+};
+ArrowMarker.propTypes = {
+  id: PropTypes.string,
+  size: PropTypes.number,
+  className: PropTypes.string
+};
+ArrowMarker.defaultProps = {
+  size: 5
+};
+
+const _excluded$2 = ["classes", "angle", "className", "x", "y", "disabled", "correctness", "graphProps"];
+class Arrow extends React.Component {
+  render() {
+    const _this$props = this.props,
+          {
+      classes,
+      angle,
+      className,
+      x,
+      y,
+      disabled,
+      correctness,
+      graphProps
+    } = _this$props,
+          rest = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
+
+    const size = thinnerShapesNeeded(graphProps) ? 12 : 14;
+    const {
+      scale
+    } = graphProps;
+    const scaledX = scale.x(x);
+    const scaledY = scale.y(y);
+    const transform = `rotate(${-angle}, ${scaledX},${scaledY})`;
+    const points = `${scaledX},${scaledY}
+        ${scaledX - size},${scaledY - size / 2}
+        ${scaledX - size}, ${scaledY + size / 2}`;
+    return /*#__PURE__*/React.createElement("g", _extends({
+      className: classNames(classes.point, disabled && classes.disabled, classes[correctness], className)
+    }, rest), /*#__PURE__*/React.createElement(ArrowHead, {
+      size: size,
+      transform: transform,
+      points: points
+    }));
+  }
+
+}
+Arrow.propTypes = {
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  correctness: PropTypes.string,
+  disabled: PropTypes.bool,
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired,
+  angle: PropTypes.number.isRequired,
+  graphProps: types.GraphPropsType.isRequired
+};
+
+const opts = {
+  bounds: (props, {
+    domain,
+    range
+  }) => {
+    const {
+      x,
+      y
+    } = props;
+    const area = {
+      left: x,
+      top: y,
+      bottom: y,
+      right: x
+    };
+    return bounds(area, domain, range);
+  },
+  anchorPoint: props => {
+    const {
+      x,
+      y
+    } = props;
+    return {
+      x,
+      y
+    };
+  },
+  fromDelta: (props, delta) => {
+    return point(props).add(point(delta));
+  }
+};
+
+const styles$3 = () => {
+  return {
+    point: {
+      '& circle, & polygon': {
+        cursor: 'pointer',
+        fill: color.defaults.SECONDARY
+      }
+    },
+    disabled: {
+      '& circle, & polygon': _extends({}, disabled())
+    },
+    correct: {
+      '& circle, & polygon': _extends({}, correct())
+    },
+    incorrect: {
+      '& circle, & polygon': _extends({}, incorrect())
+    },
+    missing: {
+      '& circle, & polygon': _extends({}, missing())
+    }
+  };
+};
+
+const BasePoint = withStyles$2(styles$3)(gridDraggable(opts)(RawBp));
+withStyles$2(styles$3)(gridDraggable(opts)(RawArrow));
+withStyles$2(styles$3)(gridDraggable(opts)(Arrow));
+
+const lineTool = (type, Component) => () => ({
+  type,
+  Component,
+  addPoint: (point, mark) => {
+    if (mark && equalPoints(mark.root, point)) {
+      return mark;
+    }
+
+    if (!mark) {
+      return {
+        type,
+        building: true,
+        from: point
+      };
+    }
+
+    if (equalPoints(point, mark.from)) {
+      return _extends({}, mark);
+    }
+
+    return _extends({}, mark, {
+      building: false,
+      to: point
+    });
+  }
+});
+const lineToolComponent = Component => {
+  var _class;
+
+  return _class = class LineToolComponent extends React.Component {
+    constructor(props) {
+      super(props);
+
+      this.startDrag = () => this.setState({
+        mark: _extends({}, this.props.mark)
+      });
+
+      this.stopDrag = () => {
+        const {
+          onChange,
+          mark
+        } = this.props;
+
+        const update = _extends({}, this.state.mark);
+
+        this.setState({
+          mark: undefined
+        }, () => {
+          const {
+            type
+          } = update;
+          let shouldNotChange = type && (type === 'parabola' || type === 'sine' || type === 'absolute' || type === 'exponential') && sameAxes(update.from, update.to);
+
+          if (!shouldNotChange && type && type === 'exponential' && update.from && update.to) {
+            shouldNotChange = update.from.y === 0 || update.to.y === 0 || update.from.y * update.to.y < 0;
+          }
+
+          if (!isEqual(mark, update) && !shouldNotChange) {
+            onChange(mark, update);
+          }
+        });
+      };
+
+      this.changeMark = ({
+        from,
+        to,
+        middle
+      }) => {
+        let mark = _extends({}, this.state.mark, {
+          from,
+          to
+        });
+
+        if (middle) {
+          mark = _extends({}, mark, {
+            middle
+          });
+        }
+
+        this.setState({
+          mark
+        });
+      };
+
+      this.changeMarkProps = ({
+        from,
+        to,
+        middle
+      }) => {
+        const {
+          onChange,
+          mark
+        } = this.props;
+
+        let update = _extends({}, mark, this.state.mark);
+
+        if (from) {
+          update = _extends({}, update, {
+            from
+          });
+        }
+
+        if (to) {
+          update = _extends({}, update, {
+            to
+          });
+        }
+
+        if (middle) {
+          update = _extends({}, update, {
+            middle
+          });
+        }
+
+        if (!isEqual(mark, update)) {
+          onChange(mark, update);
+        }
+      };
+
+      this.state = {};
+    }
+
+    render() {
+      const {
+        graphProps,
+        onClick,
+        labelNode,
+        labelModeEnabled,
+        coordinatesOnHover,
+        gssLineData
+      } = this.props;
+      const mark = this.state.mark ? this.state.mark : this.props.mark;
+      const from = cloneDeep(mark.from);
+      const to = cloneDeep(mark.to);
+      const middle = cloneDeep(mark.middle); // SET DISABLED
+      // if it's a background mark, we need to force disable it
+
+      if (from && mark.isBackground) {
+        from.disabled = true;
+      }
+
+      if (to && mark.isBackground) {
+        to.disabled = true;
+      }
+
+      if (middle && mark.isBackground) {
+        middle.disabled = true;
+      }
+
+      return /*#__PURE__*/React.createElement(Component, {
+        disabled: mark.disabled,
+        coordinatesOnHover: coordinatesOnHover,
+        correctness: mark.correctness,
+        from: from,
+        to: to,
+        middle: middle,
+        graphProps: graphProps,
+        fill: mark && mark.fill,
+        gssLineData: gssLineData,
+        onChange: this.changeMark,
+        changeMarkProps: this.changeMarkProps,
+        onClick: onClick,
+        onDragStart: this.startDrag,
+        onDragStop: this.stopDrag,
+        labelNode: labelNode,
+        labelModeEnabled: labelModeEnabled
+      });
+    }
+
+  }, _class.propTypes = _extends({}, types.ToolPropTypeFields, {
+    graphProps: types.GraphPropsType.isRequired
+  }), _class;
+};
+
+const dragOpts = () => ({
+  bounds: (props, {
+    domain,
+    range
+  }) => {
+    const area = utils.lineToArea(props.from, props.to);
+    return utils.bounds(area, domain, range);
+  },
+  anchorPoint: props => {
+    const {
+      from
+    } = props;
+    return from;
+  },
+  fromDelta: (props, delta) => {
+    const {
+      from,
+      to
+    } = props;
+    return {
+      from: utils.point(from).add(utils.point(delta)),
+      to: utils.point(to).add(utils.point(delta))
+    };
+  }
+});
+
+const lineBase = (Comp, opts) => {
+  const DraggableComp = gridDraggable(dragOpts())(Comp);
+  const FromPoint = BasePoint;
+  const ToPoint = BasePoint;
+
+  class LineBase extends React.Component {
+    constructor(...args) {
+      super(...args);
+
+      this.onChangePoint = point => {
+        const {
+          middle,
+          onChange
+        } = this.props;
+        const {
+          from,
+          to
+        } = point; // because point.from.label and point.to.label can be different
+
+        if (!equalPoints(from, to)) {
+          if (middle) {
+            point.middle = _extends({}, middle, getMiddleOfTwoPoints(from, to));
+          }
+
+          onChange(point);
+        }
+      };
+
+      this.dragComp = ({
+        from: draggedFrom,
+        to: draggedTo
+      }) => {
+        const {
+          from,
+          to,
+          onChange,
+          middle
+        } = this.props;
+
+        if (from.label) {
+          draggedFrom.label = from.label;
+        }
+
+        if (to.label) {
+          draggedTo.label = to.label;
+        }
+
+        const updated = {
+          from: draggedFrom,
+          to: draggedTo
+        };
+
+        if (middle) {
+          updated.middle = _extends({}, middle, getMiddleOfTwoPoints(draggedFrom, draggedTo));
+        }
+
+        onChange(updated);
+      };
+
+      this.dragFrom = draggedFrom => {
+        const {
+          from,
+          to
+        } = this.props;
+
+        if (from.label) {
+          draggedFrom.label = from.label;
+        }
+
+        if (!equalPoints(draggedFrom, to)) {
+          this.onChangePoint({
+            from: draggedFrom,
+            to: to
+          });
+        }
+      };
+
+      this.dragTo = draggedTo => {
+        const {
+          from,
+          to
+        } = this.props;
+
+        if (to.label) {
+          draggedTo.label = to.label;
+        }
+
+        if (!equalPoints(from, draggedTo)) {
+          this.onChangePoint({
+            from: from,
+            to: draggedTo
+          });
+        }
+      };
+
+      this.labelChange = (point, type) => {
+        const {
+          changeMarkProps
+        } = this.props;
+
+        const update = _extends({}, point);
+
+        if (!point.label || isEmpty(point.label)) {
+          delete update.label;
+        }
+
+        changeMarkProps({
+          [type]: update
+        });
+      };
+
+      this.clickPoint = (point, type, data) => {
+        const {
+          changeMarkProps,
+          disabled,
+          from,
+          to,
+          labelModeEnabled,
+          onClick
+        } = this.props;
+
+        if (!labelModeEnabled) {
+          onClick(point || data);
+          return;
+        }
+
+        if (disabled) {
+          return;
+        }
+
+        if (type === 'middle' && !point && from && to) {
+          point = _extends({}, point, getMiddleOfTwoPoints(from, to));
+        }
+
+        changeMarkProps({
+          from,
+          to,
+          [type]: _extends({
+            label: ''
+          }, point)
+        });
+
+        if (this.input[type]) {
+          this.input[type].focus();
+        }
+      };
+
+      this.input = {};
+    }
+
+    render() {
+      const {
+        coordinatesOnHover,
+        graphProps,
+        fill,
+        gssLineData,
+        onDragStart,
+        onDragStop,
+        from,
+        to,
+        middle,
+        disabled,
+        correctness,
+        onClick,
+        labelNode,
+        labelModeEnabled
+      } = this.props;
+      let common = {
+        graphProps,
+        fill,
+        onDragStart,
+        onDragStop,
+        disabled,
+        correctness,
+        onClick
+      };
+
+      if (gssLineData && gssLineData.selectedTool === 'solutionSet') {
+        //removing dragging option for line if solution set is clicked.
+        common = {
+          graphProps,
+          fill,
+          disabled,
+          correctness,
+          onClick
+        };
+      }
+
+      const angle = to ? trig.toDegrees(trig.angle(from, to)) : 0;
+      let fromLabelNode = null;
+      let toLabelNode = null;
+      let lineLabelNode = null;
+
+      if (labelNode) {
+        if (from && from.hasOwnProperty('label')) {
+          fromLabelNode = /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MarkLabel$1, {
+            inputRef: r => this.input.from = r,
+            disabled: !labelModeEnabled,
+            mark: from,
+            graphProps: graphProps,
+            onChange: label => this.labelChange(_extends({}, from, {
+              label
+            }), 'from')
+          }), labelNode);
+        }
+
+        if (to && to.hasOwnProperty('label')) {
+          toLabelNode = /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MarkLabel$1, {
+            inputRef: r => this.input.to = r,
+            disabled: !labelModeEnabled,
+            mark: to,
+            graphProps: graphProps,
+            onChange: label => this.labelChange(_extends({}, to, {
+              label
+            }), 'to')
+          }), labelNode);
+        }
+
+        if (middle && middle.hasOwnProperty('label')) {
+          lineLabelNode = /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MarkLabel$1, {
+            inputRef: r => this.input.middle = r,
+            disabled: !labelModeEnabled,
+            mark: middle,
+            graphProps: graphProps,
+            onChange: label => this.labelChange(_extends({}, middle, {
+              label
+            }), 'middle')
+          }), labelNode);
+        }
+      }
+
+      if (gssLineData && gssLineData.selectedTool === 'solutionSet') {
+        //removing dragging feature of line and point if solution set is true.
+        return /*#__PURE__*/React.createElement("g", null, to && /*#__PURE__*/React.createElement(DraggableComp, _extends({
+          from: from,
+          to: to,
+          middle: middle
+        }, common)), lineLabelNode, /*#__PURE__*/React.createElement(FromPoint, _extends({
+          x: from.x,
+          y: from.y,
+          labelNode: labelNode,
+          coordinatesOnHover: coordinatesOnHover
+        }, common)), fromLabelNode, to && /*#__PURE__*/React.createElement(ToPoint, _extends({
+          x: to.x,
+          y: to.y,
+          angle: angle //angle + 45}
+          ,
+          labelNode: labelNode,
+          coordinatesOnHover: coordinatesOnHover
+        }, common)), toLabelNode);
+      } else {
+        return /*#__PURE__*/React.createElement("g", null, to && /*#__PURE__*/React.createElement(DraggableComp, _extends({
+          from: from,
+          to: to,
+          middle: middle,
+          onDrag: this.dragComp
+        }, common, {
+          onClick: data => this.clickPoint(middle, 'middle', data)
+        })), lineLabelNode, /*#__PURE__*/React.createElement(FromPoint, _extends({
+          x: from.x,
+          y: from.y,
+          labelNode: labelNode,
+          coordinatesOnHover: coordinatesOnHover,
+          onDrag: this.dragFrom
+        }, common, {
+          onClick: data => this.clickPoint(from, 'from', data)
+        })), fromLabelNode, to && /*#__PURE__*/React.createElement(ToPoint, _extends({
+          x: to.x,
+          y: to.y,
+          angle: angle //angle + 45}
+          ,
+          labelNode: labelNode,
+          coordinatesOnHover: coordinatesOnHover,
+          onDrag: this.dragTo
+        }, common, {
+          onClick: data => this.clickPoint(to, 'to', data)
+        })), toLabelNode);
+      }
+    }
+
+  }
+
+  LineBase.propTypes = {
+    coordinatesOnHover: PropTypes.bool,
+    graphProps: types.GraphPropsType,
+    from: types.PointType,
+    to: types.PointType,
+    middle: types.PointType,
+    onChange: PropTypes.func,
+    onDragStart: PropTypes.func,
+    onDragStop: PropTypes.func,
+    onClick: PropTypes.func,
+    correctness: PropTypes.string,
+    fill: PropTypes.string,
+    gssLineData: PropTypes.object,
+    disabled: PropTypes.bool,
+    labelNode: PropTypes.object,
+    labelModeEnabled: PropTypes.bool,
+    changeMarkProps: PropTypes.func
+  };
+  return LineBase;
+};
+const styles$2 = {
+  line: () => ({
+    fill: 'transparent',
+    stroke: color.defaults.BLACK,
+    strokeWidth: 4,
+    transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
+    '&:hover': {
+      strokeWidth: 6,
+      stroke: color.defaults.BLACK
+    }
+  }),
+  dashedLine: () => ({
+    fill: 'transparent',
+    stroke: color.defaults.BLACK,
+    strokeWidth: 4,
+    transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
+    '&:hover': {
+      strokeWidth: 6,
+      stroke: color.defaults.BLACK
+    },
+    strokeDasharray: '3,3'
+  }),
+  arrow: () => ({
+    fill: color.defaults.SECONDARY
+  }),
+  disabledArrow: () => _extends({}, disabled()),
+  disabled: () => _extends({}, disabled('stroke'), {
+    strokeWidth: 2
+  }),
+  correct: (theme, key) => _extends({}, correct(key)),
+  incorrect: (theme, key) => _extends({}, incorrect(key)),
+  missing: (theme, key) => _extends({}, missing(key))
+};
+
+const _excluded$1 = ["className", "classes", "correctness", "disabled", "graphProps", "fill", "from", "to"];
+
+const lineStyles = theme => ({
+  line: styles$2.line(theme),
+  dashedLine: styles$2.dashedLine(theme),
+  enabledArrow: styles$2.arrow(theme),
+  disabledArrow: styles$2.disabledArrow(theme),
+  disabled: styles$2.disabled(theme),
+  correct: styles$2.correct(theme, 'stroke'),
+  correctArrow: styles$2.correct(theme),
+  incorrect: styles$2.incorrect(theme, 'stroke'),
+  incorrectArrow: styles$2.incorrect(theme),
+  missing: styles$2.missing(theme, 'stroke'),
+  missingArrow: styles$2.missing(theme)
+});
+
+const ArrowedLine = props => {
+  const markerId = genUid();
+
+  const {
+    className,
+    classes,
+    correctness,
+    disabled,
+    graphProps,
+    fill = 'Solid',
+    from,
+    to
+  } = props,
+        rest = _objectWithoutPropertiesLoose(props, _excluded$1);
+
+  const {
+    scale
+  } = graphProps;
+  const {
+    domain,
+    range
+  } = getAdjustedGraphLimits(graphProps);
+  const [eFrom, eTo] = trig.edges(domain, range)(from, to);
+  const suffix = correctness || disabled && 'disabled' || 'enabled';
+  return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement(ArrowMarker, {
+    size: thinnerShapesNeeded(graphProps) ? 4 : 5,
+    id: `${props.markerId || markerId}-${suffix}`,
+    className: classNames(classes[`${suffix}Arrow`])
+  })), /*#__PURE__*/React.createElement("line", _extends({
+    x1: scale.x(eFrom.x),
+    y1: scale.y(eFrom.y),
+    x2: scale.x(eTo.x),
+    y2: scale.y(eTo.y),
+    className: classNames(fill === 'Solid' ? classes.line : classes.dashedLine, disabled && classes.disabled, classes[correctness], className),
+    markerEnd: `url(#${props.markerId || markerId}-${suffix})`,
+    markerStart: `url(#${props.markerId || markerId}-${suffix})`
+  }, rest)));
+};
+ArrowedLine.propTypes = {
+  className: PropTypes.string,
+  classes: PropTypes.object,
+  fill: PropTypes.string,
+  correctness: PropTypes.string,
+  disabled: PropTypes.bool,
+  graphProps: types.GraphPropsType,
+  from: types.PointType,
+  to: types.PointType,
+  markerId: PropTypes.string
+};
+const StyledArrowedLine = withStyles(lineStyles)(ArrowedLine);
+const Line = lineBase(StyledArrowedLine);
+const Component = lineToolComponent(Line);
+
+const tool = lineTool('line', Component);
+
+const allTools = ['line', 'polygon'];
+const toolsArr = [tool(), tool$1()];
+
+var index = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  allTools: allTools,
+  line: tool,
+  polygon: tool$1,
+  toolsArr: toolsArr
+});
+
+const setToolbarAvailability = toolbarTools => toolsArr.map(tA => _extends({}, tA, {
+  toolbar: !!toolbarTools.find(t => t === tA.type)
+})) || [];
+const toolIsAvailable = (tools, currentTool) => currentTool && tools && (tools.find(tool => tool.type === currentTool.type) || {}).toolbar;
+const getAvailableTool = tools => tools.find(tool => tool.toolbar);
+const filterByValidToolTypes = backgroundMarks => backgroundMarks.filter(bM => !!allTools.find(tool => tool === bM.type));
+const filterByVisibleToolTypes = (toolbarTools, marks) => marks.filter(bM => !!toolbarTools.find(tool => tool === bM.type));
+
+const getDefaultCurrentTool = toolType => toolsArr.find(tool => tool.type === toolType) || null;
+
+const Collapsible = ({
+  classes,
+  children,
+  title
+}) => /*#__PURE__*/React.createElement(ExpansionPanel, {
+  elevation: 0,
+  className: classes.expansionPanel,
+  disabledGutters: true,
+  square: true
+}, /*#__PURE__*/React.createElement(ExpansionPanelSummary, {
+  classes: {
+    root: classes.summaryRoot,
+    content: classes.summaryContent
+  },
+  expandIcon: /*#__PURE__*/React.createElement(ExpandMoreIcon, null)
+}, /*#__PURE__*/React.createElement(Typography, {
+  variant: "subheading"
+}, title)), /*#__PURE__*/React.createElement(ExpansionPanelDetails, {
+  className: classes.details
+}, children));
+
+Collapsible.propTypes = {
+  classes: PropTypes.object,
+  children: PropTypes.array,
+  title: PropTypes.string
+};
+class GraphWithControls extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.changeCurrentTool = (tool, tools) => this.setState({
+      currentTool: tools.find(t => t.type === tool)
+    });
+
+    this.toggleLabelMode = () => this.setState(state => ({
+      labelModeEnabled: !state.labelModeEnabled
+    }));
+
+    this.state = {
+      currentTool: getDefaultCurrentTool(props.defaultTool),
+      labelModeEnabled: false
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      defaultTool
+    } = this.props;
+
+    if (prevProps.defaultTool !== defaultTool) {
+      const currentTool = getDefaultCurrentTool(defaultTool);
+      this.setState({
+        currentTool
+      });
+    }
+  }
+
+  render() {
+    let {
+      currentTool,
+      labelModeEnabled
+    } = this.state;
+    const {
+      axesSettings,
+      classes,
+      className,
+      coordinatesOnHover,
+      collapsibleToolbar,
+      collapsibleToolbarTitle,
+      disabled,
+      disabledLabels,
+      disabledTitle,
+      domain,
+      labels,
+      labelsPlaceholders,
+      onChangeLabels,
+      onChangeMarks,
+      onChangeTitle,
+      onUndo,
+      onRedo,
+      range,
+      size,
+      showLabels,
+      showPixelGuides,
+      showTitle,
+      title,
+      titlePlaceholder,
+      language,
+      disableToolbar = false,
+      gssLineData,
+      onChangeGssLineData,
+      onSolutionSetSelected,
+      onCustomReset
+    } = this.props;
+    let {
+      backgroundMarks,
+      marks,
+      toolbarTools
+    } = this.props; // make sure only valid tool types are kept (string) and without duplicates
+
+    toolbarTools = uniq(toolbarTools || []).filter(tT => !!isString(tT)) || []; // keep only the backgroundMarks that have valid types
+
+    backgroundMarks = filterByValidToolTypes(backgroundMarks || []); // keep only the marks that have types which appear in toolbar
+
+    marks = filterByVisibleToolTypes(toolbarTools, marks || []);
+    if (gssLineData && gssLineData.lineA && marks[0] && marks[0].type === 'line') marks[0].fill = gssLineData.lineA.lineType;
+    if (gssLineData && gssLineData.lineB && marks[1] && marks[1].type === 'line') marks[1].fill = gssLineData.lineB.lineType;
+    const tools = setToolbarAvailability(toolbarTools); // set current tool if there's no current tool or if the existing one is no longer available
+
+    if (!currentTool || !toolIsAvailable(tools, currentTool)) {
+      currentTool = getAvailableTool(tools);
+    }
+
+    const gssActions = gssLineData && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolMenu$1, {
+      numberOfLines: gssLineData.numberOfLines,
+      gssLineData: gssLineData,
+      onChange: onChangeGssLineData,
+      disabled: !!disabled,
+      language: language
+    }), !disabled && /*#__PURE__*/React.createElement(UndoRedo$1, {
+      className: classes.undoRedoOuterDiv,
+      onUndo: onUndo,
+      onRedo: onRedo,
+      onReset: onCustomReset,
+      language: language
+    }));
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(classes.graphWithControls, className)
+    }, !disableToolbar && /*#__PURE__*/React.createElement("div", {
+      className: classes.controls
+    }, collapsibleToolbar ? /*#__PURE__*/React.createElement(Collapsible, {
+      classes: classes,
+      title: collapsibleToolbarTitle
+    }, gssActions) : gssActions), /*#__PURE__*/React.createElement("div", {
+      ref: r => this.labelNode = r
+    }), /*#__PURE__*/React.createElement(Graph, {
+      axesSettings: axesSettings,
+      backgroundMarks: backgroundMarks,
+      coordinatesOnHover: coordinatesOnHover,
+      currentTool: currentTool,
+      disabledLabels: disabledLabels,
+      disabledTitle: disabledTitle,
+      domain: domain,
+      labels: labels,
+      labelModeEnabled: labelModeEnabled,
+      labelsPlaceholders: labelsPlaceholders,
+      marks: marks,
+      onChangeMarks: !disabled ? onChangeMarks : undefined,
+      onChangeLabels: onChangeLabels,
+      onChangeTitle: onChangeTitle,
+      range: range,
+      size: size,
+      showLabels: showLabels,
+      showPixelGuides: showPixelGuides,
+      showTitle: showTitle,
+      title: title,
+      titlePlaceholder: titlePlaceholder,
+      tools: tools,
+      gssLineData: gssLineData,
+      onSolutionSetSelected: onSolutionSetSelected,
+      disabled: !!disabled
+    }));
+  }
+
+}
+GraphWithControls.propTypes = _extends({}, graphPropTypes, {
+  onUndo: PropTypes.func,
+  onRedo: PropTypes.func,
+  onReset: PropTypes.func,
+  toolbarTools: PropTypes.arrayOf(PropTypes.string),
+  // array of tool types that have to be displayed in the toolbar, same shape as 'allTools'
+  language: PropTypes.string
+});
+GraphWithControls.defaultProps = {
+  collapsibleToolbar: false,
+  collapsibleToolbarTitle: '',
+  disabledLabels: false,
+  disabledTitle: false,
+  showLabels: true,
+  showTitle: true,
+  toolbarTools: []
+};
+
+const styles$1 = theme => ({
+  graphWithControls: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: 'min-content'
+  },
+  controls: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: 'calc(1.25rem - 12px) calc(1.25rem - 12px) 1.25rem',
+    color: color.text(),
+    backgroundColor: '#9FA8DA',
+    '& button': {
+      fontSize: '0.875rem',
+      padding: '0.25rem .3rem',
+      width: '5rem'
+    }
+  },
+  expansionPanel: {
+    backgroundColor: color.primaryLight(),
+    width: '100%'
+  },
+  summaryRoot: {
+    padding: `0 ${theme.spacing.unit}px`,
+    minHeight: '32px !important'
+  },
+  summaryContent: {
+    margin: '4px 0 !important'
+  },
+  details: {
+    padding: 0,
+    marginTop: theme.spacing.unit,
+    display: 'flex',
+    justifyContent: 'space-between'
+  },
+  undoRedoOuterDiv: {
+    display: 'flex',
+    flexDirection: 'column',
+    marginTop: '.5rem'
+  }
+});
+
+var GraphWithControls$1 = withStyles(styles$1)(GraphWithControls);
+
+let lastAction = null;
+const getLastAction = () => lastAction;
+const lastActionMiddleware = () => next => action => {
+  lastAction = action;
+  return next(action);
+};
+
+const _excluded = ["onChangeMarks", "marks"];
+
+const mapStateToProps = s => ({
+  marks: s.marks.present
+});
+
+const mapDispatchToProps = dispatch => ({
+  onChangeMarks: m => dispatch(changeMarks(m)),
+  onUndo: () => dispatch(ActionCreators.undo()),
+  onRedo: () => dispatch(ActionCreators.redo()),
+  onReset: () => dispatch(changeMarks([]))
+});
+
+const GraphContainer = connect(mapStateToProps, mapDispatchToProps)(GraphWithControls$1);
+/**
+ * The graph component entry point with undo/redo
+ * Redux is an implementation detail, hide it in the react component.
+ */
+
+class Root extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.onStoreChange = () => {
+      const {
+        marks,
+        onChangeMarks
+      } = this.props;
+      const storeState = this.store.getState();
+      const lastAction = getLastAction();
+      const isUndoOperation = lastAction.type.includes('UNDO') || lastAction.type.includes('REDO');
+
+      if (!isEqual(storeState.marks.present, marks)) {
+        onChangeMarks(storeState.marks.present, isUndoOperation);
+      }
+    };
+
+    const r = reducer();
+    this.store = createStore(r, {
+      marks: props.marks
+    }, applyMiddleware(lastActionMiddleware));
+    this.store.subscribe(this.onStoreChange);
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      marks
+    } = this.props;
+    const storeState = this.store.getState();
+
+    if (isEqual(storeState.marks.present, marks)) {
+      return;
+    }
+
+    if (!isEqual(prevProps.marks, marks)) {
+      this.store.dispatch(changeMarks(marks));
+    }
+  }
+
+  render() {
+    // eslint-disable-next-line no-unused-vars
+    const _this$props = this.props,
+          {
+      marks
+    } = _this$props,
+          rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
+
+    const correctnessSet = marks && marks.find(m => m.correctness);
+
+    if (correctnessSet) {
+      return /*#__PURE__*/React.createElement(GraphWithControls$1, _extends({}, rest, {
+        marks: marks,
+        disabled: correctnessSet
+      }));
+    }
+
+    return /*#__PURE__*/React.createElement(Provider, {
+      store: this.store
+    }, /*#__PURE__*/React.createElement(GraphContainer, rest));
+  }
+
+}
+
+Root.propTypes = {
+  onChangeMarks: PropTypes.func,
+  marks: PropTypes.array
+};
+
+const GridConfig = props => {
+  const {
+    classes,
+    disabled,
+    displayedFields,
+    labelValue,
+    labelValues,
+    gridValue,
+    gridValues,
+    onChange
+  } = props;
+  const {
+    labelStep = {},
+    step = {}
+  } = displayedFields;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.columnView
+  }, step && step.enabled && /*#__PURE__*/React.createElement(NumberTextFieldCustom, {
+    className: classes.mediumTextField,
+    label: step.label || '',
+    value: gridValue,
+    customValues: gridValues,
+    variant: "outlined",
+    disabled: disabled,
+    onChange: (e, v) => onChange('step', v)
+  }), labelStep && labelStep.enabled && /*#__PURE__*/React.createElement(NumberTextFieldCustom, {
+    className: classes.mediumTextField,
+    label: labelStep.label || '',
+    value: labelValue,
+    customValues: labelValues,
+    variant: "outlined",
+    disabled: disabled,
+    onChange: (e, v) => onChange('labelStep', v)
+  }));
+};
+
+GridConfig.propTypes = {
+  classes: PropTypes.object,
+  disabled: PropTypes.bool,
+  displayedFields: PropTypes.object,
+  labelValue: PropTypes.number,
+  labelValues: PropTypes.array,
+  gridValue: PropTypes.number,
+  gridValues: PropTypes.array,
+  onChange: PropTypes.func
+};
+
+const AxisConfig = props => {
+  const {
+    classes,
+    disabled,
+    displayedFields,
+    displayHeader,
+    label,
+    maxValue,
+    minValue,
+    onChange,
+    type
+  } = props;
+  const {
+    axisLabel = {},
+    min = {},
+    max = {}
+  } = displayedFields;
+  const activePlugins = ['bold', 'italic', 'underline', 'strikethrough' // 'languageCharacters'
+  ];
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.columnView
+  }, displayHeader && /*#__PURE__*/React.createElement(Typography$1, {
+    variant: "subtitle2"
+  }, /*#__PURE__*/React.createElement("i", null, type === 'domain' ? 'x' : 'y'), "-axis"), min && min.enabled && /*#__PURE__*/React.createElement(NumberTextFieldCustom, {
+    className: classes.mediumTextField,
+    label: min.label || '',
+    value: minValue,
+    min: -1e4,
+    max: maxValue - 0.05,
+    variant: "outlined",
+    disabled: disabled,
+    onChange: (e, v) => onChange('min', v)
+  }), max && max.enabled && /*#__PURE__*/React.createElement(NumberTextFieldCustom, {
+    className: classes.mediumTextField,
+    label: max.label || '',
+    value: maxValue,
+    min: minValue + 0.05,
+    max: 10000,
+    variant: "outlined",
+    disabled: disabled,
+    onChange: (e, v) => onChange('max', v)
+  }), axisLabel && axisLabel.enabled && /*#__PURE__*/React.createElement(InputContainer, {
+    label: axisLabel.label || '',
+    className: classes.mediumTextField
+  }, /*#__PURE__*/React.createElement(EditableHtml, {
+    className: classes.axisLabel,
+    onChange: value => onChange('axisLabel', value),
+    markup: label || '',
+    charactersLimit: 5,
+    activePlugins: activePlugins
+  })));
+};
+
+AxisConfig.propTypes = {
+  classes: PropTypes.object,
+  disabled: PropTypes.bool,
+  displayedFields: PropTypes.object,
+  displayHeader: PropTypes.bool,
+  label: PropTypes.string,
+  maxValue: PropTypes.number,
+  minValue: PropTypes.number,
+  type: PropTypes.string,
+  onChange: PropTypes.func
+};
+
+const GridSetup = props => {
+  const {
+    classes,
+    domain,
+    displayedFields = {},
+    gridValues = {},
+    includeAxes,
+    labelValues = {},
+    onChange,
+    onChangeView,
+    range,
+    size,
+    sizeConstraints,
+    standardGrid
+  } = props;
+  const gridProps = {
+    min: 2,
+    max: 41
+  };
+  const {
+    axisLabel = {},
+    dimensionsEnabled,
+    includeAxesEnabled,
+    labelStep = {},
+    min = {},
+    max = {},
+    standardGridEnabled,
+    step = {}
+  } = displayedFields || {};
+  const displayAxisType = min.enabled || max.enabled || axisLabel.enabled || step.enabled || labelStep.enabled;
+  const gridConfigFields = {
+    step,
+    labelStep
+  };
+  const axisConfigFields = {
+    min,
+    max,
+    axisLabel
+  };
+
+  const onIncludeAxes = includeAxes => {
+    const noAxesConfig = type => {
+      const axis = type === 'domain' ? domain : range;
+      return {
+        min: 1,
+        max: axis.max < gridProps.min || axis.max > gridProps.max ? 16 : axis.max,
+        step: 1,
+        labelStep: 0
+      };
+    };
+
+    const updatedRange = _extends({}, range, includeAxes ? {
+      labelStep: 1
+    } : noAxesConfig('range'));
+
+    const updatedDomain = _extends({}, domain, includeAxes ? {
+      labelStep: 1
+    } : noAxesConfig('domain'));
+
+    onChange({
+      includeAxes,
+      range: updatedRange,
+      domain: updatedDomain
+    });
+  };
+
+  const onStandardGridChanged = value => {
+    onChange({
+      standardGrid: value,
+      range: _extends({}, domain, {
+        axisLabel: range.axisLabel
+      }),
+      graph: _extends({}, size, {
+        height: size.width
+      })
+    });
+  };
+
+  const onSizeChanged = (key, value) => {
+    const graph = _extends({}, size, {
+      [key]: value
+    });
+
+    if (standardGrid) {
+      graph.height = value;
+    }
+
+    onChange({
+      graph
+    });
+  };
+
+  const onDomainChanged = (key, value) => {
+    domain[key] = value;
+
+    if (standardGrid && key !== 'axisLabel') {
+      range[key] = value;
+    }
+
+    onChange({
+      domain,
+      range
+    });
+  };
+
+  const onRangeChanged = (key, value) => {
+    range[key] = value;
+    onChange({
+      range
+    });
+  };
+
+  const axesConfig = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: classes.rowView
+  }, /*#__PURE__*/React.createElement(AxisConfig, {
+    classes: classes,
+    displayedFields: axisConfigFields,
+    displayHeader: displayAxisType,
+    type: "domain",
+    minValue: domain.min,
+    maxValue: domain.max,
+    label: domain.axisLabel,
+    includeAxes: includeAxes,
+    onChange: onDomainChanged
+  }), /*#__PURE__*/React.createElement(AxisConfig, {
+    classes: classes,
+    displayedFields: axisConfigFields,
+    displayHeader: displayAxisType,
+    type: "range",
+    minValue: range.min,
+    maxValue: range.max,
+    label: range.axisLabel,
+    disabled: standardGrid,
+    includeAxes: includeAxes,
+    onChange: onRangeChanged
+  })), (min.enabled || max.enabled) && /*#__PURE__*/React.createElement(Typography$1, {
+    className: classes.text
+  }, "If you want the axis to be visible, use a zero or negative Min Value, and a positive Max Value"), (step.enabled || labelStep.enabled) && /*#__PURE__*/React.createElement("div", {
+    className: classes.rowView
+  }, /*#__PURE__*/React.createElement(GridConfig, {
+    classes: classes,
+    displayedFields: gridConfigFields,
+    gridValue: domain.step,
+    labelValue: domain.labelStep,
+    gridValues: gridValues.domain || [],
+    labelValues: labelValues.domain || [],
+    onChange: onDomainChanged
+  }), /*#__PURE__*/React.createElement(GridConfig, {
+    classes: classes,
+    disabled: standardGrid,
+    displayedFields: gridConfigFields,
+    gridValue: range.step,
+    labelValue: range.labelStep,
+    gridValues: gridValues.range || [],
+    labelValues: labelValues.range || [],
+    onChange: onRangeChanged
+  })), labelStep.enabled && /*#__PURE__*/React.createElement(Typography$1, {
+    className: classes.text
+  }, "For unnumbered gridlines, enter a label interval of 0"));
+  const gridlinesConfig = max.enabled ? /*#__PURE__*/React.createElement("div", {
+    className: classes.columnView
+  }, /*#__PURE__*/React.createElement(NumberTextFieldCustom, {
+    className: classes.largeTextField,
+    label: "Number of Vertical Gridlines",
+    value: domain.max,
+    min: !includeAxes && gridProps.min,
+    max: !includeAxes && gridProps.max,
+    variant: "outlined",
+    onChange: (e, v) => onDomainChanged('max', v)
+  }), /*#__PURE__*/React.createElement(NumberTextFieldCustom, {
+    className: classes.largeTextField,
+    label: "Number of Horizontal Gridlines",
+    value: range.max,
+    min: !includeAxes && gridProps.min,
+    max: !includeAxes && gridProps.max,
+    variant: "outlined",
+    disabled: standardGrid,
+    onChange: (e, v) => onRangeChanged('max', v)
+  })) : null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.wrapper
+  }, /*#__PURE__*/React.createElement(ExpansionPanel$1, {
+    onChange: onChangeView
+  }, /*#__PURE__*/React.createElement(ExpansionPanelSummary$1, {
+    expandIcon: /*#__PURE__*/React.createElement(ExpandMoreIcon, null)
+  }, /*#__PURE__*/React.createElement(Typography$1, {
+    variant: "subtitle1"
+  }, "Customize Grid Setup")), /*#__PURE__*/React.createElement(ExpansionPanelDetails$1, null, /*#__PURE__*/React.createElement("div", {
+    className: classes.content
+  }, includeAxesEnabled && /*#__PURE__*/React.createElement(Toggle, {
+    label: "Include axes and labels?",
+    toggle: onIncludeAxes,
+    checked: includeAxes
+  }), standardGridEnabled && /*#__PURE__*/React.createElement(Toggle, {
+    label: "Constrain to standard coordinate grid?",
+    toggle: onStandardGridChanged,
+    checked: standardGrid
+  }), includeAxes ? axesConfig : gridlinesConfig, dimensionsEnabled && /*#__PURE__*/React.createElement("div", {
+    className: classes.dimensions
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography$1, null, "Dimensions(px)"), /*#__PURE__*/React.createElement(Typography$1, {
+    className: classes.disabled
+  }, "Min ", sizeConstraints.min, ", Max ", sizeConstraints.max)), /*#__PURE__*/React.createElement(NumberTextFieldCustom, {
+    className: classes.textField,
+    label: "Width",
+    value: size.width,
+    min: sizeConstraints.min,
+    max: sizeConstraints.max,
+    step: sizeConstraints.step,
+    variant: "outlined",
+    onChange: (e, v) => onSizeChanged('width', v)
+  }), /*#__PURE__*/React.createElement(NumberTextFieldCustom, {
+    className: classes.textField,
+    label: "Height",
+    value: size.height,
+    min: sizeConstraints.min,
+    max: sizeConstraints.max,
+    step: sizeConstraints.step,
+    variant: "outlined",
+    disabled: standardGrid,
+    onChange: (e, v) => onSizeChanged('height', v)
+  }))))));
+};
+
+GridSetup.propTypes = {
+  classes: PropTypes.object,
+  domain: PropTypes.object,
+  displayedFields: PropTypes.object,
+  gridValues: PropTypes.object,
+  includeAxes: PropTypes.bool,
+  labelValues: PropTypes.object,
+  onChange: PropTypes.func,
+  onChangeView: PropTypes.func,
+  range: PropTypes.object,
+  size: PropTypes.object,
+  sizeConstraints: PropTypes.object,
+  standardGrid: PropTypes.bool
+};
+
+const styles = theme => ({
+  wrapper: {
+    width: '450px'
+  },
+  content: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%'
+  },
+  columnView: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  },
+  rowView: {
+    display: 'flex',
+    justifyContent: 'space-around',
+    alignItems: 'center'
+  },
+  textField: {
+    width: '130px',
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
+  },
+  mediumTextField: {
+    width: '160px',
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
+  },
+  largeTextField: {
+    width: '230px',
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
+  },
+  text: {
+    fontStyle: 'italic',
+    margin: `${theme.spacing.unit}px 0`
+  },
+  dimensions: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  disabled: {
+    color: color.disabled()
+  },
+  axisLabel: {
+    paddingTop: theme.spacing.unit * 2
+  }
+});
+
+var gridSetup = withStyles(styles)(GridSetup);
+
+export { Graph, Root as GraphContainer, gridSetup as GridSetup, ToolMenu$1 as ToolMenu, index as tools };
+//# sourceMappingURL=index.js.map