@khanacademy/perseus 22.5.0 → 22.6.0

package/dist/es/index.js

@@ -29,7 +29,7 @@ import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-block
 import caretDown from '@phosphor-icons/core/regular/caret-down.svg';
 import caretUp from '@phosphor-icons/core/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
-import { vec, Line as Line$4, Point as Point$2, useMovable, Text as Text$1, Polygon, Circle as Circle$1, Coordinates, Mafs } from 'mafs';
+import { vec, Line as Line$4, Point as Point$2, useMovable, Text as Text$1, Polygon, Coordinates, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import { Body, LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
@@ -28474,6 +28474,8 @@ Graph.defaultProps = {
 
 const defaultGraphConfig = {
   range: [[0, 1], [0, 1]],
+  tickStep: [1, 1],
+  gridStep: [1, 1],
   snapStep: [1, 1],
   markings: "none",
   showTooltips: false,
@@ -28488,6 +28490,7 @@ function useGraphConfig() {
 }
 
 const matrixBuilder = vec.matrixBuilder;
+
 // When converting vectors, we don't need to translate because a vector
 // is like a pair of x and y distances, which are not bound to specific graph locations.
 function vectorsToPixels(vectors, graphState, translation = [0, 0]) {
@@ -28736,7 +28739,7 @@ function Arrowhead(props) {
   const [point] = useTransformVectorsToPixels(props.tip);
   return /*#__PURE__*/React.createElement("g", {
     className: "interactive-graph-arrowhead",
-    transform: `translate(${point[0]} ${point[1]}) rotate(${-props.angle})`
+    transform: `translate(${point[0]} ${point[1]}) rotate(${props.angle})`
   }, /*#__PURE__*/React.createElement("g", {
     transform: "translate(-1.5)"
   }, /*#__PURE__*/React.createElement("path", {
@@ -28746,7 +28749,8 @@ function Arrowhead(props) {
       stroke: (_props$color = props.color) != null ? _props$color : "inherit"
     },
     strokeLinejoin: "round",
-    strokeLinecap: "round"
+    strokeLinecap: "round",
+    strokeWidth: "2px"
   })));
 }
 
@@ -28782,10 +28786,7 @@ const getIntersectionOfRayWithBox = (initialPoint, throughPoint, box) => {
     case isBetween(xAtYExtreme, xMin, xMax):
       return [xAtYExtreme, yExtreme];
     default:
-      // This default case is only reachable if the input is invalid
-      // (initialPoint is outside the graph bounds, or initialPoint and
-      // throughPoint are the same).
-      return [0, 0];
+      return [xExtreme, yExtreme];
   }
 };
 const getLines = points => {
@@ -28825,7 +28826,7 @@ function Vector(props) {
     style
   } = props;
   const [tailPx, tipPx] = useTransformVectorsToPixels(tail, tip);
-  const direction = vec.sub(tip, tail);
+  const direction = vec.sub(tipPx, tailPx);
   const angle = calculateAngleInDegrees(direction);
   return /*#__PURE__*/React.createElement("g", {
     style: {
@@ -28869,7 +28870,9 @@ const LockedLine = props => {
   } else {
     const LineType = kind === "segment" ? Line$4.Segment : Line$4.ThroughPoints;
     let arrowTip = kind === "segment" ? point2.coord : getIntersectionOfRayWithBox(point1.coord, point2.coord, range);
-    const direction = vec.sub(point2.coord, point1.coord);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [tailPx, tipPx] = useTransformVectorsToPixels(point2.coord, point1.coord);
+    const direction = vec.sub(tailPx, tipPx);
     let angle = calculateAngleInDegrees(direction);
     const startArrowHead = kind !== "segment" && /*#__PURE__*/React.createElement(Arrowhead, {
       angle: angle,
@@ -29683,14 +29686,12 @@ function initializeGraphState(params) {
     graph,
     step,
     snapStep,
-    range,
-    markings
+    range
   } = params;
   const shared = {
     hasBeenInteractedWith: false,
     range,
-    snapStep,
-    markings
+    snapStep
   };
   switch (graph.type) {
     case "segment":
@@ -29869,19 +29870,24 @@ const getLineCoords = ({
   range,
   step
 }) => {
-  var _graph$coords2;
-  return (
-    // Return two lines for a linear system, one for a ray or linear
-    ((_graph$coords2 = graph.coords) != null ? _graph$coords2 : graph.type === "linear-system") ? defaultLinearCoords.map(collinear => normalizePoints(range, step, collinear)) : [normalizePoints(range, step, defaultLinearCoords[0])]
-  );
+  //  Return two lines for a linear system, one for a ray or linear
+  switch (graph.type) {
+    case "linear-system":
+      return defaultLinearCoords.map(points => normalizePoints(range, step, points));
+    case "linear":
+    case "ray":
+      return [normalizePoints(range, step, defaultLinearCoords[0])];
+    default:
+      throw new UnreachableCaseError(graph);
+  }
 };
 const getPolygonCoords = ({
   graph,
   range,
   step
 }) => {
-  var _graph$coords3;
-  let coords = (_graph$coords3 = graph.coords) == null ? void 0 : _graph$coords3.slice();
+  var _graph$coords2;
+  let coords = (_graph$coords2 = graph.coords) == null ? void 0 : _graph$coords2.slice();
   if (coords) {
     return coords;
   }
@@ -29967,11 +29973,12 @@ function MovableCircle(props) {
     cy: centerPx[1],
     rx: radiiPx[0] + 3,
     ry: radiiPx[1] + 3
-  }), /*#__PURE__*/React.createElement(Circle$1, {
-    center: center,
-    radius: radius,
-    fillOpacity: 0,
-    color: color.blue
+  }), /*#__PURE__*/React.createElement("ellipse", {
+    className: "circle",
+    cx: centerPx[0],
+    cy: centerPx[1],
+    rx: radiiPx[0],
+    ry: radiiPx[1]
   }), /*#__PURE__*/React.createElement(DragHandle, {
     center: center
   }));
@@ -30012,6 +30019,258 @@ function crossProduct(as, bs) {
   return result;
 }
 
+// Universal padding for the axis ticks to ensure that the labels
+// have enough space to render without overlapping the tick lines
+const tickPadding = 5;
+const AxisTickLabels = () => {
+  const graphConfig = useGraphConfig();
+  const {
+    tickStep,
+    range
+  } = graphConfig;
+  const [xMin, xMax] = range[0];
+  const [yMin, yMax] = range[1];
+  const yTickStep = tickStep[1];
+  const xTickStep = tickStep[0];
+  const yGridTicks = generateTickLocations$1(yTickStep, yMin, yMax);
+  const xGridTicks = generateTickLocations$1(xTickStep, xMin, xMax);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "axis-tick-labels"
+  }, /*#__PURE__*/React.createElement(YGridAxis, {
+    axisTicks: yGridTicks,
+    graphConfig: graphConfig
+  }), /*#__PURE__*/React.createElement(XGridAxis, {
+    axisTicks: xGridTicks,
+    graphConfig: graphConfig
+  }));
+};
+
+// Generate the necessary styles and ticks for the y-axis tick labels container
+const YGridAxis = props => {
+  const {
+    axisTicks,
+    graphConfig
+  } = props;
+  const {
+    width,
+    height
+  } = graphConfig;
+
+  // First get the label height by calculating the difference between the first two y-axis labels
+  const yTopPoint = pointToPixel([0, axisTicks[0]], graphConfig);
+  const ySecondPoint = pointToPixel([0, axisTicks[1]], graphConfig);
+  const yLabelHeight = ySecondPoint[1] - yTopPoint[1];
+
+  // When rendering purely positive y-axis labels, we want to adjust the left position
+  // from the lowest calculated tick, as yMin may be negative
+  const yLowestTick = axisTicks[axisTicks.length - 1];
+  const yLeftAdjustment = Math.min(Math.max(yTopPoint[0] - tickPadding, 0), width);
+
+  // We only want to render the 0 label on the y-axis if it is left of the grid
+  const yAxisIsLeftOfGrid = yLeftAdjustment === 0;
+
+  // If the y-axis is right of the graph's viewbox/range,
+  // we want to adjust both the positioning and text alignment
+  const yAxisRightOfGrid = yLeftAdjustment === width;
+
+  // Determine the default spacing for the labels based on whether the y-axis is right of the grid
+  const defaultSpacing = yAxisRightOfGrid ? 0.5 : 0;
+
+  // We also want to adjust the spacing if there are no negative y-axis labels as the extra space is not needed
+  const marginSpacing = yLowestTick >= 0 ? defaultSpacing * 2 : defaultSpacing;
+
+  // Determine the text alignment based on whether the y-axis is right of the grid
+  // We need to cast this as a const as it is used in the inline styles
+  const textAlign = yAxisRightOfGrid ? "left" : "right";
+  const yAxisStyles = {
+    left: `calc(${yLeftAdjustment}px - ${marginSpacing}em)`,
+    top: `calc(${yTopPoint[1]}px - 0.5em)`,
+    height,
+    textAlign,
+    "--y-axis-label-height": yLabelHeight + "px"
+  };
+  const classNames = yAxisRightOfGrid ? "y-axis-tick-labels y-axis-right-of-grid" : "y-axis-tick-labels ";
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames,
+    "data-testid": "y-axis-tick-labels",
+    style: yAxisStyles
+  }, axisTicks.map(label => {
+    return /*#__PURE__*/React.createElement(AxisTickLabel, {
+      label: label,
+      axis: "y",
+      key: `y-grid-tick-${label}`,
+      graphConfig: graphConfig,
+      axisOutOfBounds: yAxisIsLeftOfGrid
+    });
+  }));
+};
+
+// Generate the necessary styles and ticks for the x-axis tick labels container
+const XGridAxis = props => {
+  const {
+    axisTicks,
+    graphConfig
+  } = props;
+  const {
+    width,
+    height
+  } = graphConfig;
+
+  // Determine label width by calculating the difference between the first two x-axis labels
+  const xFirstPoint = pointToPixel([axisTicks[0], 0], graphConfig);
+  const xSecondPoint = pointToPixel([axisTicks[1], 0], graphConfig);
+  const xLabelWidth = Math.abs(xSecondPoint[0] - xFirstPoint[0]);
+
+  // Determine the top position of the x-axis labels based on
+  // whether the x-axis is above, within, or below the graph
+  const xAxisAboveGraph = xFirstPoint[1] < 0;
+  const xTopAdjustment = xAxisAboveGraph ? 0 : Math.min(xFirstPoint[1] + tickPadding, height);
+
+  // Determine whether the x-axis is outside of the graph's viewbox/range
+  // This is used to conditionally render the 0 label on the x-axis
+  const xAxisOutOfBounds = xTopAdjustment === height || xAxisAboveGraph;
+
+  // Determine the available space to the right of the x-axis labels
+  const availableSpaceRight = width - xFirstPoint[0];
+
+  // Calculate the total combined width of ALL the x-axis labels
+  const axisTicksWidth = axisTicks.length * xLabelWidth;
+
+  // Determine if we need to increase the width of the axis past the graph width
+  const calculatedWidth = axisTicksWidth > width ? axisTicksWidth : width;
+
+  // Determine the right adjustment for the x-axis labels based on the available space
+  // We're adjusting the right as the flex-direction is row-reverse
+  const xRightAdjustment = availableSpaceRight - xLabelWidth / 2;
+  const xAxisStyles = {
+    top: xTopAdjustment,
+    right: xRightAdjustment,
+    width: calculatedWidth,
+    "--x-axis-label-width": xLabelWidth + "px"
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: `x-axis-tick-labels ${xAxisAboveGraph && "x-axis-top-of-grid"}`,
+    "data-testid": "x-axis-tick-labels",
+    style: xAxisStyles
+  }, axisTicks.map(label => {
+    return /*#__PURE__*/React.createElement(AxisTickLabel, {
+      axis: "x",
+      label: label,
+      key: `x-grid-tick-${label}`,
+      graphConfig: graphConfig,
+      axisOutOfBounds: xAxisOutOfBounds
+    });
+  }));
+};
+
+// Generate the individual tick label elements
+const AxisTickLabel = ({
+  label,
+  graphConfig,
+  axisOutOfBounds,
+  axis
+}) => {
+  const {
+    gridStep,
+    tickStep
+  } = graphConfig;
+  // Determine the point on the axis based on the axis type
+  const pointOnAxis = axis === "x" ? [label, 0] : [0, label];
+  const pixelPoint = pointToPixel(pointOnAxis, graphConfig);
+
+  // Remove the negative sign from the label string as it is handled in the data-content attribute
+  const labelString = Math.abs(label).toString();
+
+  // Determine the relevant edge of the graph based on the axis type
+  const graphEdge = axis === "x" ? graphConfig.width : graphConfig.height;
+
+  // Determine the vector index based on the axis type
+  const vectorIndex = axis === "x" ? 0 : 1;
+
+  // Determine whether or not to render the tick label text
+  const shouldShowLabel = showTickLabel({
+    label,
+    axisOutOfBounds,
+    graphEdge,
+    position: pixelPoint[vectorIndex],
+    gridStep: gridStep[vectorIndex],
+    tickStep: tickStep[vectorIndex]
+  });
+
+  // Determine whether or not to render a negative symbol for the tick label
+  // as the negative sign is handled in the data-content attribute in order to
+  // maintain the correct spacing between the labels
+  const dataContent = label < 0 && shouldShowLabel ? "−" : null;
+  return /*#__PURE__*/React.createElement("span", {
+    className: `${axis}-axis-tick-label`,
+    "data-content": dataContent
+  }, shouldShowLabel && labelString);
+};
+
+// Determine whether or not to show the tick label text
+const showTickLabel = ({
+  gridStep,
+  tickStep,
+  label,
+  graphEdge,
+  position,
+  axisOutOfBounds
+}) => {
+  let showLabel = true;
+
+  // We only want to show the initial negative tick labels (e.g. -1) on each
+  // axis if the tickStep > gridStep, to ensure that these labels do not overlap.
+  // e.g. If gridStep = 1 and tickStep = 2, there are 2 grid lines for every 1 tick,
+  // which allows enough room for both these tick labels to render.
+  showLabel = tickStep > gridStep ? true : label !== -tickStep;
+
+  // If the tick label position is greater than the relevant edge of the graph, don't render it
+  if (position <= -graphEdge || position >= graphEdge) {
+    showLabel = false;
+  }
+
+  // If the label is 0, we only want to show it if the axis is to the left of the graph's viewbox/range
+  // otherwise it will overlap with graph axis labels
+  if (label === 0 && !axisOutOfBounds) {
+    showLabel = false;
+  }
+  return showLabel;
+};
+
+// Generate the tick labels for an axis based on the tick step
+function generateTickLocations$1(tickStep, min, max) {
+  const positiveTicks = [];
+  const negativeTicks = [];
+  const ticks = [];
+
+  // Add 0 if it is applicable.
+  // This will be conditionally rendered using showTickLabel.
+  if (min <= 0 && max >= 0) {
+    positiveTicks.push(0);
+  }
+
+  // Add ticks on the positive axis
+  // Start at the first tick after 0 or the minimum value,
+  // taking into account that the graph may be zoomed in on the positive axis
+  let i = Math.max(min, 0) + tickStep;
+  for (i; min < i && i < max; i += tickStep) {
+    positiveTicks.push(i);
+  }
+
+  // Add ticks on the negative axis
+  // Start at the first tick before 0 or the maximum value,
+  // taking into account that the graph may be zoomed in on the negative axis
+  i = Math.min(max, 0) - tickStep;
+  for (i; i > min; i -= tickStep) {
+    negativeTicks.push(i);
+  }
+
+  // Reverse the ticks so that they are in the correct render order
+  positiveTicks.reverse();
+  ticks.push(...positiveTicks, ...negativeTicks);
+  return ticks;
+}
+
 function PointGraph(props) {
   const {
     dispatch
@@ -30039,11 +30298,11 @@ function AxisArrows() {
   }), /*#__PURE__*/React__default.createElement(Arrowhead, {
     color: axisColor,
     tip: [0, yMin],
-    angle: 270
+    angle: 90
   }), /*#__PURE__*/React__default.createElement(Arrowhead, {
     color: axisColor,
     tip: [0, yMax],
-    angle: 90
+    angle: 270
   }));
 }
 
@@ -30052,81 +30311,119 @@ const tickStyle = {
   stroke: "black",
   strokeWidth: 1
 };
-
-// We only want to show the initial negative tick labels (e.g. -1) on each
-// axis if the tickStep > gridStep, to ensure that these labels do not overlap.
-// e.g. If gridStep = 1 and tickStep = 2, there are 2 grid lines for every 1 tick,
-// which allows enough room for both these tick labels to render.
-const showTickLabel = (gridStep, tickStep, label) => {
-  const showLabel = tickStep > gridStep ? true : label !== -tickStep;
-  return showLabel;
-};
 const YGridTick = ({
   y,
-  gridStep,
-  tickStep
+  graphInfo
 }) => {
-  const pointOnAxis = [0, y];
+  let xPointOnAxis = 0;
+
+  // If the graph is zoomed in, we want to make sure the ticks are still visible
+  // even if they are outside the graph's range.
+  if (graphInfo.range[0][0] > 0) {
+    // If the graph is on the positive side of the x-axis, lock the ticks to the left side of the graph
+    xPointOnAxis = graphInfo.range[0][0];
+  }
+  if (graphInfo.range[0][1] < 0) {
+    // If the graph is on the negative side of the x-axis, lock the ticks to the right side of the graph
+    xPointOnAxis = graphInfo.range[0][1];
+  }
+  const pointOnAxis = [xPointOnAxis, y];
   const [[xPosition, yPosition]] = useTransformVectorsToPixels(pointOnAxis);
+
+  // If the tick is on the edge of the graph's range, don't render it
+  if (yPosition === -graphInfo.height || yPosition === graphInfo.height + 20) {
+    return null;
+  }
+
+  // Position of the start of the tick
+  const x1 = xPosition - tickSize / 2;
+  const y1 = yPosition;
+
+  // Position of the end of the tick
+  const x2 = xPosition + tickSize / 2;
+  const y2 = yPosition;
   return /*#__PURE__*/React.createElement("g", {
     className: "y-axis-ticks"
   }, /*#__PURE__*/React.createElement("line", {
-    x1: xPosition - tickSize / 2,
-    y1: yPosition,
-    x2: xPosition + tickSize / 2,
-    y2: yPosition,
+    x1: x1,
+    y1: y1,
+    x2: x2,
+    y2: y2,
     style: tickStyle
-  }), showTickLabel(gridStep, tickStep, y) && /*#__PURE__*/React.createElement("text", {
-    height: 20,
-    width: 50,
-    textAnchor: "end",
-    x: xPosition - 10,
-    y: yPosition + 5
-  }, y.toString()));
+  }));
 };
 const XGridTick = ({
   x,
-  gridStep,
-  tickStep
+  graphInfo
 }) => {
-  const pointOnAxis = [x, 0];
+  let yPointOnAxis = 0;
+  // If the graph is zoomed in, we want to make sure the ticks are still visible
+  // even if they are outside the graph's range.
+  if (graphInfo.range[1][0] > 0) {
+    // If the graph is on the positive side of the y-axis, lock the ticks to the top of the graph
+    yPointOnAxis = graphInfo.range[1][0];
+  }
+  if (graphInfo.range[1][1] < 0) {
+    // If the graph is on the negative side of the x-axis, lock the ticks to the bottom of the graph
+    yPointOnAxis = graphInfo.range[1][1];
+  }
+  const pointOnAxis = [x, yPointOnAxis];
   const [[xPosition, yPosition]] = useTransformVectorsToPixels(pointOnAxis);
+
+  // If the tick is on the edge of the graph's range, don't render it
+  if (xPosition === -graphInfo.width / 2 || xPosition === graphInfo.width) {
+    return null;
+  }
+
+  // Position of the start of the tick
+  const x1 = xPosition;
+  const y1 = yPosition + tickSize / 2;
+
+  // Position of the end of the tick
+  const x2 = xPosition;
+  const y2 = yPosition - tickSize / 2;
   return /*#__PURE__*/React.createElement("g", {
     className: "x-axis-ticks"
   }, /*#__PURE__*/React.createElement("line", {
-    x1: xPosition,
-    y1: yPosition + tickSize / 2,
-    x2: xPosition,
-    y2: yPosition - tickSize / 2,
+    x1: x1,
+    y1: y1,
+    x2: x2,
+    y2: y2,
     style: tickStyle
-  }), showTickLabel(gridStep, tickStep, x) && /*#__PURE__*/React.createElement("text", {
-    height: 20,
-    width: 50,
-    textAnchor: "middle",
-    x: xPosition,
-    y: yPosition + 25
-  }, x.toString()));
+  }));
 };
 function generateTickLocations(tickStep, min, max) {
   const ticks = [];
 
   // Add ticks in the positive direction
-  for (let i = 0 + tickStep; i < max; i += tickStep) {
-    ticks.push(i);
+  for (let _i = 0 + tickStep; _i < max; _i += tickStep) {
+    ticks.push(_i);
   }
 
   // Add ticks in the negative direction
-  for (let i = 0 - tickStep; i > min; i -= tickStep) {
+  // Start at the first tick after 0 or the maximum value if it is negative
+  let i = Math.min(max, 0) - tickStep;
+  for (i; i > min; i -= tickStep) {
     ticks.push(i);
   }
   return ticks;
 }
-const AxisTicks = props => {
-  const range = props.range;
+const AxisTicks = () => {
+  const {
+    tickStep,
+    range,
+    width,
+    height
+  } = useGraphConfig();
+  const graphInfo = {
+    range,
+    width,
+    height
+  };
   const [xMin, xMax] = range[0];
   const [yMin, yMax] = range[1];
-  const yTickStep = props.tickStep[1];
-  const xTickStep = props.tickStep[0];
+  const yTickStep = tickStep[1];
+  const xTickStep = tickStep[0];
   const yGridTicks = generateTickLocations(yTickStep, yMin, yMax);
   const xGridTicks = generateTickLocations(xTickStep, xMin, xMax);
   return /*#__PURE__*/React.createElement("g", {
@@ -30135,15 +30432,13 @@ const AxisTicks = props => {
     return /*#__PURE__*/React.createElement(YGridTick, {
       y: y,
       key: `y-grid-tick-${y}`,
-      gridStep: props.gridStep[0],
-      tickStep: yTickStep
+      graphInfo: graphInfo
     });
   }), xGridTicks.map(x => {
     return /*#__PURE__*/React.createElement(XGridTick, {
       x: x,
       key: `x-grid-tick-${x}`,
-      gridStep: props.gridStep[1],
-      tickStep: xTickStep
+      graphInfo: graphInfo
     });
   }));
 };
@@ -30171,11 +30466,7 @@ const Grid = props => {
     yAxis: axisOptions(props, 1)
   }),
   // Only render the axis ticks and arrows if the markings are set to a full "graph"
-  props.markings === "graph" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisTicks, {
-    range: props.range,
-    tickStep: props.tickStep,
-    gridStep: props.gridStep
-  }), /*#__PURE__*/React.createElement(AxisArrows, null)));
+  props.markings === "graph" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisTicks, null), /*#__PURE__*/React.createElement(AxisArrows, null)));
 };
 
 // Displays a stylized open eye: lint warnings are visible
@@ -31182,35 +31473,22 @@ function mafsStateToInteractiveGraph(state) {
   return _extends({}, state);
 }
 const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    onChange
+  } = props;
   const [state, dispatch] = React.useReducer(interactiveGraphReducer, props, initializeGraphState);
   useImperativeHandle(ref, () => ({
     getUserInput: () => getGradableGraph(state, props.graph)
   }));
-  function onChange(next) {
-    props.onChange(mafsStateToInteractiveGraph(next));
-  }
-  return /*#__PURE__*/React.createElement(MafsGraph, _extends({}, props, {
-    state: state,
-    dispatch: dispatch,
-    onChange: onChange
-  }));
-});
-const MafsGraph = props => {
-  const {
-    state,
-    dispatch,
-    labels
-  } = props;
-  const [width, height] = props.box;
   const prevState = useRef(state);
   useEffect(() => {
     if (prevState.current !== state) {
-      props.onChange({
+      onChange(mafsStateToInteractiveGraph({
         graph: state
-      });
+      }));
     }
     prevState.current = state;
-  }, [props, state]);
+  }, [onChange, state]);
 
   // Destructuring first to keep useEffect from making excess calls
   const [xSnap, ySnap] = props.snapStep;
@@ -31223,11 +31501,26 @@ const MafsGraph = props => {
   useEffect(() => {
     dispatch(changeRange([[xMinRange, xMaxRange], [yMinRange, yMaxRange]]));
   }, [dispatch, xMinRange, xMaxRange, yMinRange, yMaxRange]);
+  return /*#__PURE__*/React.createElement(MafsGraph, _extends({}, props, {
+    state: state,
+    dispatch: dispatch
+  }));
+});
+const MafsGraph = props => {
+  const {
+    state,
+    dispatch,
+    labels
+  } = props;
+  const [width, height] = props.box;
+  const tickStep = props.step;
   return /*#__PURE__*/React.createElement(GraphConfigContext.Provider, {
     value: {
       range: state.range,
       snapStep: state.snapStep,
       markings: props.markings,
+      tickStep: tickStep,
+      gridStep: props.gridStep,
       showTooltips: !!props.showTooltips,
       graphDimensionsInPixels: props.box,
       width,
@@ -31241,7 +31534,9 @@ const MafsGraph = props => {
       height,
       position: "relative",
       padding: "25px 25px 0 0",
-      boxSizing: "content-box"
+      boxSizing: "content-box",
+      marginLeft: "20px",
+      marginBottom: "20px"
     }
   }, /*#__PURE__*/React.createElement(LegacyGrid, {
     box: props.box,
@@ -31252,11 +31547,11 @@ const MafsGraph = props => {
       bottom: 0,
       left: 0
     }
-  }, props.markings === "graph" && /*#__PURE__*/React.createElement(AxisLabels, null), /*#__PURE__*/React.createElement(Mafs, {
+  }, props.markings === "graph" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisLabels, null), /*#__PURE__*/React.createElement(AxisTickLabels, null)), /*#__PURE__*/React.createElement(Mafs, {
     preserveAspectRatio: false,
     viewBox: {
-      x: props.range[0],
-      y: props.range[1],
+      x: state.range[0],
+      y: state.range[1],
       padding: 0
     },
     pan: false,
@@ -31266,12 +31561,12 @@ const MafsGraph = props => {
   }, /*#__PURE__*/React.createElement(SvgDefs, null), /*#__PURE__*/React.createElement(Grid, {
     tickStep: props.step,
     gridStep: props.gridStep,
-    range: props.range,
+    range: state.range,
     containerSizeClass: props.containerSizeClass,
     markings: props.markings
   }), props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures,
-    range: props.range
+    range: state.range
   }), renderGraph({
     state,
     dispatch
@@ -43372,7 +43667,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "22.5.0";
+const libVersion = "22.6.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {