@khanacademy/perseus 21.3.1 → 21.4.0

package/dist/index.js

@@ -10366,7 +10366,7 @@ class WrappedPath extends WrappedDrawing {
   }
 }
 
-class Arrowhead extends WrappedPath {
+class Arrowhead$1 extends WrappedPath {
   static scale = 1.4;
   constructor(graphie, style) {
     // Points that define the arrowhead
@@ -10374,7 +10374,7 @@ class Arrowhead extends WrappedPath {
     const points = [[-3, 4], [-2.75, 2.5], [0, 0.25], center, [0, -0.25], [-2.75, -2.5], [-3, -4]].map(point => {
       // Scale points by `Arrowhead.scale` around `center`
       const pv = kmath.vector.subtract(point, center);
-      const pvScaled = kmath.vector.scale(pv, Arrowhead.scale);
+      const pvScaled = kmath.vector.scale(pv, Arrowhead$1.scale);
       return kmath.vector.add(center, pvScaled);
     });
     const unscaledPoints = points.map(graphie.unscalePoint);
@@ -10391,7 +10391,7 @@ class Arrowhead extends WrappedPath {
   }
   toCoordAtAngle(coord, angle) {
     const clipPoint = this.graphie.scalePoint(getClipPoint(this.graphie, coord, angle));
-    this.transform("translateX(" + (clipPoint[0] + Arrowhead.scale * this.center[0]) + "px) " + "translateY(" + (clipPoint[1] + Arrowhead.scale * this.center[1]) + "px) " + "translateZ(0) " + "rotate(" + (360 - KhanMath.bound(angle)) + "deg)");
+    this.transform("translateX(" + (clipPoint[0] + Arrowhead$1.scale * this.center[0]) + "px) " + "translateY(" + (clipPoint[1] + Arrowhead$1.scale * this.center[1]) + "px) " + "translateZ(0) " + "rotate(" + (360 - KhanMath.bound(angle)) + "deg)");
   }
 }
 
@@ -11632,10 +11632,10 @@ ___default["default"].extend(GraphUtils.Graphie.prototype, {
       if (this._arrows == null) {
         this._arrows = [];
         if (this.extendLine) {
-          this._arrows.push(new Arrowhead(graph, this.normalStyle));
-          this._arrows.push(new Arrowhead(graph, this.normalStyle));
+          this._arrows.push(new Arrowhead$1(graph, this.normalStyle));
+          this._arrows.push(new Arrowhead$1(graph, this.normalStyle));
         } else if (this.extendRay) {
-          this._arrows.push(new Arrowhead(graph, this.normalStyle));
+          this._arrows.push(new Arrowhead$1(graph, this.normalStyle));
         }
       }
       const coordForArrow = [this.coordA, this.coordZ];
@@ -14162,16 +14162,16 @@ const draw$3 = {
         // @ts-expect-error - TS2551 - Property '_arrows' does not exist on type '{ readonly basic: (state: any) => void; readonly arrows: (state: any) => void; readonly highlight: (state: any, prevState: any) => void; }'. Did you mean 'arrows'?
         this._arrows.push(
         // @ts-expect-error - TS2339 - Property 'graphie' does not exist on type '{ readonly basic: (state: any) => void; readonly arrows: (state: any) => void; readonly highlight: (state: any, prevState: any) => void; }'. | TS2339 - Property 'normalStyle' does not exist on type '{ readonly basic: (state: any) => void; readonly arrows: (state: any) => void; readonly highlight: (state: any, prevState: any) => void; }'.
-        new Arrowhead(this.graphie, this.normalStyle()));
+        new Arrowhead$1(this.graphie, this.normalStyle()));
         // @ts-expect-error - TS2551 - Property '_arrows' does not exist on type '{ readonly basic: (state: any) => void; readonly arrows: (state: any) => void; readonly highlight: (state: any, prevState: any) => void; }'. Did you mean 'arrows'?
         this._arrows.push(
         // @ts-expect-error - TS2339 - Property 'graphie' does not exist on type '{ readonly basic: (state: any) => void; readonly arrows: (state: any) => void; readonly highlight: (state: any, prevState: any) => void; }'. | TS2339 - Property 'normalStyle' does not exist on type '{ readonly basic: (state: any) => void; readonly arrows: (state: any) => void; readonly highlight: (state: any, prevState: any) => void; }'.
-        new Arrowhead(this.graphie, this.normalStyle()));
+        new Arrowhead$1(this.graphie, this.normalStyle()));
       } else if (state.extendRay) {
         // @ts-expect-error - TS2551 - Property '_arrows' does not exist on type '{ readonly basic: (state: any) => void; readonly arrows: (state: any) => void; readonly highlight: (state: any, prevState: any) => void; }'. Did you mean 'arrows'?
         this._arrows.push(
         // @ts-expect-error - TS2339 - Property 'graphie' does not exist on type '{ readonly basic: (state: any) => void; readonly arrows: (state: any) => void; readonly highlight: (state: any, prevState: any) => void; }'. | TS2339 - Property 'normalStyle' does not exist on type '{ readonly basic: (state: any) => void; readonly arrows: (state: any) => void; readonly highlight: (state: any, prevState: any) => void; }'.
-        new Arrowhead(this.graphie, this.normalStyle()));
+        new Arrowhead$1(this.graphie, this.normalStyle()));
       }
     }
 
@@ -19398,6 +19398,7 @@ class Renderer extends React__namespace.Component {
     images: {},
     highlightedWidgets: [],
     questionCompleted: false,
+    showSolutions: "none",
     // onRender may be called multiple times per render, for example
     // if there are multiple images or TeX pieces within `content`.
     // It is a good idea to debounce any functions passed here.
@@ -19688,6 +19689,7 @@ class Renderer extends React__namespace.Component {
       apiOptions: this.getApiOptions(),
       keypadElement: this.props.keypadElement,
       questionCompleted: this.props.questionCompleted,
+      showSolutions: this.props.showSolutions,
       onFocus: ___default["default"].partial(this._onWidgetFocus, id),
       onBlur: ___default["default"].partial(this._onWidgetBlur, id),
       findWidgets: this.findWidgets,
@@ -23171,14 +23173,6 @@ const ellipsisHorizontalIcon = {
   width: 100,
   height: 27.284
 };
-// Note(TB): Received errors when using useUniqueIdWithMock
-// so created this workaround function. Will update when
-// useUniqueIdWithMock is available.
-// https://khanacademy.atlassian.net/browse/FEI-4861?atlOrigin=eyJpIjoiNDJlZWMwNjM1NWJhNDBkMWFjY2FmN2I0ZjcxZmQxOGUiLCJwIjoiaiJ9
-let id = 0;
-function uniqueId() {
-  return `choice-${id++}`;
-}
 const Choice = function (props) {
   const {
     disabled = false,
@@ -23228,7 +23222,8 @@ const Choice = function (props) {
   const showDimmed = !reviewMode && apiOptions.readOnly || crossedOut;
   const letter = getChoiceLetter(pos);
   const a11yText = getA11yText(letter, checked, correct, crossedOut, showCorrectness);
-  const choiceId = uniqueId();
+  const idFactory = wonderBlocksCore.useUniqueIdWithMock(`choice`);
+  const choiceId = idFactory.get(letter);
   return /*#__PURE__*/React__namespace.createElement("div", {
     style: {
       // @ts-expect-error - TS2322 - Type '{ dispay: string; flexDirection: "column"; color: string; }' is not assignable to type 'Properties<string | number, string & {}>'.
@@ -23815,7 +23810,8 @@ class Radio$1 extends React__namespace.Component {
     multipleSelect: false,
     countChoices: false,
     deselectEnabled: false,
-    linterContext: PerseusLinter.linterContextDefault
+    linterContext: PerseusLinter.linterContextDefault,
+    showSolutions: "none"
   };
   static validate(userInput, rubric) {
     const numSelected = userInput.choicesSelected.reduce((sum, selected) => {
@@ -23925,6 +23921,11 @@ class Radio$1 extends React__namespace.Component {
       choicesSelected: props.choices.map(() => false)
     };
   }
+  componentDidUpdate(prevProps) {
+    if (this.props.showSolutions === "selected" && prevProps.showSolutions !== "selected") {
+      this.showRationalesForCurrentlySelectedChoices(this.props);
+    }
+  }
   _renderRenderer = (() => {
     var _this = this;
     return function () {
@@ -24047,6 +24048,7 @@ class Radio$1 extends React__namespace.Component {
    * Turn on rationale display for the currently selected choices. Note that
    * this leaves rationales on for choices that are already showing
    * rationales.
+   * @deprecated Internal only. Use `showSolutions` prop instead.
    */
   showRationalesForCurrentlySelectedChoices = rubric => {
     const {
@@ -24068,7 +24070,7 @@ class Radio$1 extends React__namespace.Component {
         // We use the same behavior for the readOnly flag as for
         // rationaleShown, but we keep it separate in case other
         // behaviors want to disable choices without showing rationales.
-        readOnly: state.selected || state.readOnly || widgetCorrect,
+        readOnly: state.selected || state.readOnly || widgetCorrect || this.props.showSolutions !== "none",
         correctnessShown: state.selected || state.correctnessShown,
         previouslyAnswered: state.previouslyAnswered || state.selected
       }));
@@ -24119,6 +24121,23 @@ class Radio$1 extends React__namespace.Component {
         correctnessShown: true,
         previouslyAnswered: false
       }));
+    } else if (this.props.showSolutions === "all") {
+      choiceStates = choices.map(_ref => {
+        let {
+          correct
+        } = _ref;
+        return {
+          selected: correct,
+          // to draw the eye to the correct answer
+          crossedOut: false,
+          readOnly: true,
+          highlighted: false,
+          // has no effect in this mode
+          rationaleShown: true,
+          correctnessShown: true,
+          previouslyAnswered: false
+        };
+      });
     } else if (this.props.choiceStates) {
       choiceStates = this.props.choiceStates;
     } else if (this.props.values) {
@@ -28477,6 +28496,118 @@ const getLines = points => points.map((point, i) => {
   return [point, next];
 });
 
+function SVGLine(props) {
+  const {
+    start,
+    end,
+    style,
+    className,
+    testId
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement("line", {
+    x1: start[0],
+    y1: start[1],
+    x2: end[0],
+    y2: end[1],
+    style: style,
+    className: `${className}`,
+    "data-test-id": testId
+  });
+}
+
+function pathBuilder() {
+  return new PathBuilder();
+}
+class PathBuilder {
+  path = [];
+  scaleFactor = 1;
+  build() {
+    return this.path.map(scaleCommandBy(this.scaleFactor)).map(commandToString).join("");
+  }
+
+  // add a move (M) command to the path
+  move(x, y) {
+    this.path.push({
+      action: "M",
+      coords: [x, y]
+    });
+    return this;
+  }
+
+  // add a curve (C) command to the path
+  curve(control1X, control1Y, control2X, control2Y, endX, endY) {
+    this.path.push({
+      action: "C",
+      coords: [control1X, control1Y, control2X, control2Y, endX, endY]
+    });
+    return this;
+  }
+
+  // Scale all coordinates of the path by a factor
+  scale(factor) {
+    this.scaleFactor *= factor;
+    return this;
+  }
+}
+function commandToString(command) {
+  return `${command.action}${command.coords.join(" ")}`;
+}
+function scaleCommandBy(scaleFactor) {
+  return command => ({
+    ...command,
+    coords: command.coords.map(c => c * scaleFactor)
+  });
+}
+
+// We use the pathBuilder here to scale up the SVG path coordinates used
+// elsewhere for arrowheads. We scale in the path itself instead of using a CSS
+// transform because a transform would also scale up the stroke weight, and we
+// don't want that.
+const arrowPath = pathBuilder().move(-3, 4).curve(-2.75, 2.5, 0, 0.25, 0.75, 0).curve(0, -0.25, -2.75, -2.5, -3, -4).scale(1.4).build();
+function Arrowhead(props) {
+  const [point] = useTransform([props.x, props.y]);
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    transform: `translate(${point[0]} ${point[1]}) rotate(${-props.angle})`
+  }, /*#__PURE__*/React__namespace.createElement("g", {
+    transform: "translate(-1.5)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: arrowPath,
+    fill: "none",
+    style: {
+      stroke: "inherit"
+    },
+    strokeLinejoin: "round",
+    strokeLinecap: "round"
+  })));
+}
+
+function Vector(props) {
+  const {
+    tail,
+    tip,
+    color
+  } = props;
+  const [tailPx, tipPx] = useTransform(tail, tip);
+  const direction = mafs.vec.sub(tip, tail);
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    style: {
+      stroke: color,
+      strokeWidth: 2
+    }
+  }, /*#__PURE__*/React__namespace.createElement(SVGLine, {
+    start: tailPx,
+    end: tipPx
+  }), /*#__PURE__*/React__namespace.createElement(Arrowhead, {
+    x: tip[0],
+    y: tip[1],
+    angle: angleDegrees(direction)
+  }));
+}
+function angleDegrees(_ref) {
+  let [x, y] = _ref;
+  return Math.atan2(y, x) * 180 / Math.PI;
+}
+
 const defaultStroke = "var(--movable-line-stroke-color)";
 const MovableLine = props => {
   const {
@@ -28537,45 +28668,27 @@ const MovableLine = props => {
       stroke,
       strokeWidth: "var(--movable-line-stroke-weight)"
     },
-    dragging: dragging,
+    className: dragging ? "movable-dragging" : "",
     testId: "movable-line__line"
-  })), startExtend && /*#__PURE__*/React__namespace.createElement(mafs.Vector, {
+  })), startExtend && /*#__PURE__*/React__namespace.createElement(Vector, {
     tail: start,
     tip: startExtend,
     color: stroke
-  }), endExtend && /*#__PURE__*/React__namespace.createElement(mafs.Vector, {
+  }), endExtend && /*#__PURE__*/React__namespace.createElement(Vector, {
     tail: end,
     tip: endExtend,
     color: stroke
   }));
 };
-function SVGLine(props) {
-  const {
-    start,
-    end,
-    style,
-    dragging,
-    className,
-    testId
-  } = props;
-  const draggingClass = dragging ? "movable-dragging" : "";
-  return /*#__PURE__*/React__namespace.createElement("line", {
-    x1: start[0],
-    y1: start[1],
-    x2: end[0],
-    y2: end[1],
-    style: style,
-    className: `${className} ${draggingClass}`,
-    "data-test-id": testId
-  });
-}
 
-const GraphStateContext = /*#__PURE__*/React.createContext({
-  state: {},
-  dispatch: () => {}
-});
-function useGraphState() {
-  return React__default["default"].useContext(GraphStateContext);
+const defaultGraphConfig = {
+  range: [[0, 1], [0, 1]],
+  snapStep: [1, 1],
+  markings: "none"
+};
+const GraphConfigContext = /*#__PURE__*/React.createContext(defaultGraphConfig);
+function useGraphConfig() {
+  return React__default["default"].useContext(GraphConfigContext);
 }
 
 // The hitbox size of 48px by 48px is preserved from the legacy interactive
@@ -28583,8 +28696,10 @@ function useGraphState() {
 const hitboxSizePx = 48;
 const StyledMovablePoint = props => {
   const {
-    state
-  } = useGraphState();
+    range,
+    snapStep,
+    markings
+  } = useGraphConfig();
   const hitboxRef = React.useRef(null);
   const {
     point,
@@ -28597,11 +28712,30 @@ const StyledMovablePoint = props => {
     gestureTarget: hitboxRef,
     point,
     onMove,
-    constrain: p => snap(state.snapStep, p)
+    constrain: p => snap(snapStep, p)
   });
   const pointClasses = `movable-point ${dragging ? "movable-point--dragging" : ""}`;
   const [[x, y]] = useTransform(point);
-  return /*#__PURE__*/React__namespace.createElement("g", {
+  const [xMin, xMax] = range[0];
+  const [yMin, yMax] = range[1];
+  const [[verticalStartX]] = useTransform([xMin, 0]);
+  const [[verticalEndX]] = useTransform([xMax, 0]);
+  const [[_, horizontalStartY]] = useTransform([0, yMin]);
+  const [[__, horizontalEndY]] = useTransform([0, yMax]);
+  const showHairlines = dragging && markings !== "none";
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, showHairlines && /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("line", {
+    x1: verticalStartX,
+    y1: y,
+    x2: verticalEndX,
+    y2: y,
+    stroke: wonderBlocksTokens.color.green
+  }), /*#__PURE__*/React__namespace.createElement("line", {
+    x1: x,
+    y1: horizontalStartY,
+    x2: x,
+    y2: horizontalEndY,
+    stroke: wonderBlocksTokens.color.green
+  })), /*#__PURE__*/React__namespace.createElement("g", {
     ref: hitboxRef,
     className: pointClasses,
     tabIndex: 0,
@@ -28634,7 +28768,7 @@ const StyledMovablePoint = props => {
       fill: color
     },
     "data-test-id": "movable-point__center"
-  }));
+  })));
 };
 
 const SegmentGraph = props => {
@@ -28642,15 +28776,11 @@ const SegmentGraph = props => {
     dispatch
   } = props;
   const {
-    coords: segments,
-    snapStep,
-    range
+    coords: segments
   } = props.graphState;
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, segments?.map((segment, i) => /*#__PURE__*/React__namespace.createElement(SegmentView, {
     key: i,
-    collinearPair: segment,
-    snaps: snapStep,
-    range: range,
+    points: segment,
     onMoveLine: delta => {
       dispatch(moveLine(i, delta));
     },
@@ -28663,7 +28793,7 @@ const SegmentGraph = props => {
 const SegmentView = props => {
   const {
     onMoveLine: onMoveSegment,
-    collinearPair: [start, end]
+    points: [start, end]
   } = props;
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(MovableLine, {
     start: start,
@@ -28688,16 +28818,12 @@ const LinearGraph = props => {
   } = props;
   const {
     coords: lines,
-    snapStep,
-    range,
     type
   } = props.graphState;
   const colors = ["var(--movable-line-stroke-color)", "var(--mafs-violet)"];
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, lines?.map((line, i) => /*#__PURE__*/React__namespace.createElement(LineView, {
     key: i,
-    collinearPair: line,
-    snaps: snapStep,
-    range: range,
+    points: line,
     onMoveLine: delta => {
       dispatch(moveLine(i, delta));
     },
@@ -28712,10 +28838,12 @@ const LineView = props => {
   const {
     onMoveLine,
     onMovePoint,
-    collinearPair: [start, end],
-    range,
+    points: [start, end],
     stroke
   } = props;
+  const {
+    range
+  } = useGraphConfig();
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(MovableLine, {
     start: start,
     end: end,
@@ -29037,46 +29165,26 @@ function PointGraph(props) {
   })));
 }
 
-function Arrow(props) {
-  const {
-    userTransform,
-    viewTransform
-  } = mafs.useTransformContext();
-  const point = [props.x, props.y];
-  const userTransformedPoint = mafs.vec.transform(point, userTransform);
-  const viewTransformedPoint = mafs.vec.transform(userTransformedPoint, viewTransform);
-  return /*#__PURE__*/React__default["default"].createElement("g", {
-    transform: `translate(${viewTransformedPoint[0]} ${viewTransformedPoint[1]}) rotate(${props.rotate}) scale(1.25)`
-  }, /*#__PURE__*/React__default["default"].createElement("g", {
-    transform: "translate(-1)"
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M-3 4 C-2.75 2.5 0 0.25 0.75 0C0 -0.25 -2.75 -2.5 -3 -4",
-    fill: "none"
-  })));
-}
 function AxisArrows() {
   const {
-    state
-  } = useGraphState();
-  const range = state.range;
-  const [xMin, xMax] = range[0];
-  const [yMin, yMax] = range[1];
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Arrow, {
+    range: [[xMin, xMax], [yMin, yMax]]
+  } = useGraphConfig();
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Arrowhead, {
     x: xMax,
     y: 0,
-    rotate: 0
-  }), /*#__PURE__*/React__default["default"].createElement(Arrow, {
+    angle: 0
+  }), /*#__PURE__*/React__default["default"].createElement(Arrowhead, {
     x: 0,
     y: yMin,
-    rotate: 90
-  }), /*#__PURE__*/React__default["default"].createElement(Arrow, {
+    angle: 90
+  }), /*#__PURE__*/React__default["default"].createElement(Arrowhead, {
     x: xMin,
     y: 0,
-    rotate: 180
-  }), /*#__PURE__*/React__default["default"].createElement(Arrow, {
+    angle: 180
+  }), /*#__PURE__*/React__default["default"].createElement(Arrowhead, {
     x: 0,
     y: yMax,
-    rotate: 270
+    angle: 270
   }));
 }
 
@@ -29085,9 +29193,20 @@ 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 = _ref => {
   let {
-    y
+    y,
+    gridStep,
+    tickStep
   } = _ref;
   const pointOnAxis = [0, y];
   const [[xPosition, yPosition]] = useTransform(pointOnAxis);
@@ -29099,7 +29218,7 @@ const YGridTick = _ref => {
     x2: xPosition + tickSize / 2,
     y2: yPosition,
     style: tickStyle
-  }), y !== -1 && /*#__PURE__*/React__namespace.createElement("text", {
+  }), showTickLabel(gridStep, tickStep, y) && /*#__PURE__*/React__namespace.createElement("text", {
     height: 20,
     width: 50,
     textAnchor: "end",
@@ -29109,7 +29228,9 @@ const YGridTick = _ref => {
 };
 const XGridTick = _ref2 => {
   let {
-    x
+    x,
+    gridStep,
+    tickStep
   } = _ref2;
   const pointOnAxis = [x, 0];
   const [[xPosition, yPosition]] = useTransform(pointOnAxis);
@@ -29121,7 +29242,7 @@ const XGridTick = _ref2 => {
     x2: xPosition,
     y2: yPosition - tickSize / 2,
     style: tickStyle
-  }), x !== -1 && /*#__PURE__*/React__namespace.createElement("text", {
+  }), showTickLabel(gridStep, tickStep, x) && /*#__PURE__*/React__namespace.createElement("text", {
     height: 20,
     width: 50,
     textAnchor: "middle",
@@ -29156,12 +29277,16 @@ const AxisTicks = props => {
   }, yGridTicks.map(y => {
     return /*#__PURE__*/React__namespace.createElement(YGridTick, {
       y: y,
-      key: `y-grid-tick-${y}`
+      key: `y-grid-tick-${y}`,
+      gridStep: props.gridStep[0],
+      tickStep: yTickStep
     });
   }), xGridTicks.map(x => {
     return /*#__PURE__*/React__namespace.createElement(XGridTick, {
       x: x,
-      key: `x-grid-tick-${x}`
+      key: `x-grid-tick-${x}`,
+      gridStep: props.gridStep[1],
+      tickStep: xTickStep
     });
   }));
 };
@@ -29187,10 +29312,13 @@ const Grid = props => {
   return props.markings === "none" ? null : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Coordinates.Cartesian, {
     xAxis: axisOptions(props, 0),
     yAxis: axisOptions(props, 1)
-  }), /*#__PURE__*/React__namespace.createElement(AxisTicks, {
+  }), props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(AxisArrows, null),
+  // Only render the axis ticks and arrows if the markings are set to a full "graph"
+  props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisTicks, {
     range: props.range,
-    tickStep: props.tickStep
-  }), props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(AxisArrows, null));
+    tickStep: props.tickStep,
+    gridStep: props.gridStep
+  }), /*#__PURE__*/React__namespace.createElement(AxisArrows, null)));
 };
 
 // Displays a stylized open eye: lint warnings are visible
@@ -30161,15 +30289,20 @@ function initializeGraphState(params) {
     graph,
     step,
     snapStep,
-    range
+    range,
+    markings
   } = params;
+  const shared = {
+    hasBeenInteractedWith: false,
+    range,
+    snapStep,
+    markings
+  };
   switch (graph.type) {
     case "segment":
       return {
+        ...shared,
         type: "segment",
-        hasBeenInteractedWith: false,
-        range,
-        snapStep,
         coords: getDefaultSegments({
           graph,
           step,
@@ -30180,10 +30313,8 @@ function initializeGraphState(params) {
     case "linear-system":
     case "ray":
       return {
+        ...shared,
         type: graph.type,
-        hasBeenInteractedWith: false,
-        range,
-        snapStep,
         // Linear and ray graphs have a single tuple of points, while a
         // linear system has two tuples of points.
         coords: getLineCoords({
@@ -30194,10 +30325,8 @@ function initializeGraphState(params) {
       };
     case "polygon":
       return {
+        ...shared,
         type: "polygon",
-        hasBeenInteractedWith: false,
-        range,
-        snapStep,
         showAngles: Boolean(graph.showAngles),
         showSides: Boolean(graph.showSides),
         coords: getPolygonCoords({
@@ -30208,10 +30337,8 @@ function initializeGraphState(params) {
       };
     case "point":
       return {
+        ...shared,
         type: graph.type,
-        hasBeenInteractedWith: false,
-        range,
-        snapStep,
         coords: getDefaultPoints({
           graph,
           step,
@@ -30464,10 +30591,11 @@ const MafsGraph = props => {
   React.useEffect(() => {
     dispatch(changeRange([[xMinRange, xMaxRange], [yMinRange, yMaxRange]]));
   }, [dispatch, xMinRange, xMaxRange, yMinRange, yMaxRange]);
-  return /*#__PURE__*/React__namespace.createElement(GraphStateContext.Provider, {
+  return /*#__PURE__*/React__namespace.createElement(GraphConfigContext.Provider, {
     value: {
-      state,
-      dispatch
+      range: state.range,
+      snapStep: state.snapStep,
+      markings: props.markings
     }
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
@@ -42516,7 +42644,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "21.3.1";
+const libVersion = "21.4.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {