@khanacademy/perseus 21.3.0 → 21.4.0

package/dist/es/index.js

@@ -2,7 +2,7 @@ import * as KAS from '@khanacademy/kas';
 import { keyTranslator, CursorContext, createMathField, getCursorContext, DesktopKeypad, convertDotToTimesByLocale, mathQuillInstance, KeypadInput, KeypadType, KeyArray, keypadElementPropType } from '@khanacademy/math-input';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule, linterContextProps } from '@khanacademy/perseus-linter';
-import { View, RenderStateRoot, UniqueIDProvider, useUniqueIdWithMock, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
+import { View, RenderStateRoot, useUniqueIdWithMock, UniqueIDProvider, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
 import * as i18n from '@khanacademy/wonder-blocks-i18n';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import classNames from 'classnames';
@@ -30,7 +30,7 @@ import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-block
 import caretDown from '@phosphor-icons/core/assets/regular/caret-down.svg';
 import caretUp from '@phosphor-icons/core/assets/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
-import { Point as Point$2, useTransformContext, vec, useMovable, Vector, Text as Text$1, Polygon, Coordinates, Mafs } from 'mafs';
+import { Point as Point$2, useTransformContext, vec, useMovable, Text as Text$1, Polygon, Coordinates, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
 import { LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
@@ -4259,9 +4259,9 @@ function _classPrivateFieldBase(receiver, privateKey) {
   return receiver;
 }
 
-var id$1 = 0;
+var id = 0;
 function _classPrivateFieldKey(name) {
-  return "__private_" + id$1++ + "_" + name;
+  return "__private_" + id++ + "_" + name;
 }
 
 /*!
@@ -10366,14 +10366,14 @@ class WrappedPath extends WrappedDrawing {
   }
 }
 
-class Arrowhead extends WrappedPath {
+class Arrowhead$1 extends WrappedPath {
   constructor(graphie, style) {
     // Points that define the arrowhead
     const center = [0.75, 0];
     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 = vector$1.subtract(point, center);
-      const pvScaled = vector$1.scale(pv, Arrowhead.scale);
+      const pvScaled = vector$1.scale(pv, Arrowhead$1.scale);
       return vector$1.add(center, pvScaled);
     });
     const unscaledPoints = points.map(graphie.unscalePoint);
@@ -10391,14 +10391,14 @@ 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)");
   }
 }
 
 // We can't just pass in a path to `graph.fixedPath` as we need to modify
 // the points in some way, so instead we provide a function for creating
 // the path once the points have been transformed
-Arrowhead.scale = 1.4;
+Arrowhead$1.scale = 1.4;
 const createCubicPath = function createCubicPath(points) {
   let path = "M" + points[0][0] + " " + points[0][1];
   for (let i = 1; i < points.length; i += 3) {
@@ -11638,10 +11638,10 @@ _.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];
@@ -14146,16 +14146,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()));
       }
     }
 
@@ -19463,6 +19463,7 @@ class Renderer extends React.Component {
         apiOptions: this.getApiOptions(),
         keypadElement: this.props.keypadElement,
         questionCompleted: this.props.questionCompleted,
+        showSolutions: this.props.showSolutions,
         onFocus: _.partial(this._onWidgetFocus, id),
         onBlur: _.partial(this._onWidgetBlur, id),
         findWidgets: this.findWidgets,
@@ -20657,6 +20658,7 @@ Renderer.defaultProps = {
   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.
@@ -23076,14 +23078,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 Choice(props) {
   const {
     disabled = false,
@@ -23134,7 +23128,8 @@ const Choice = function Choice(props) {
   const showDimmed = !reviewMode && apiOptions.readOnly || crossedOut;
   const letter = getChoiceLetter(pos);
   const a11yText = getA11yText(letter, checked, correct, crossedOut, showCorrectness);
-  const choiceId = uniqueId();
+  const idFactory = useUniqueIdWithMock(`choice`);
+  const choiceId = idFactory.get(letter);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       // @ts-expect-error - TS2322 - Type '{ dispay: string; flexDirection: "column"; color: string; }' is not assignable to type 'Properties<string | number, string & {}>'.
@@ -23807,6 +23802,7 @@ class Radio$1 extends React.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.
      */
     this.showRationalesForCurrentlySelectedChoices = rubric => {
       const {
@@ -23827,7 +23823,7 @@ class Radio$1 extends React.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
         }));
@@ -23969,6 +23965,11 @@ class Radio$1 extends React.Component {
       choicesSelected: props.choices.map(() => false)
     };
   }
+  componentDidUpdate(prevProps) {
+    if (this.props.showSolutions === "selected" && prevProps.showSolutions !== "selected") {
+      this.showRationalesForCurrentlySelectedChoices(this.props);
+    }
+  }
   // TODO(LP-10672): I think this might be unused right now. I can't find anywhere
   // that we pass a value to `.focus()` and it seems to have been used for
   // adding hints when editing.
@@ -24000,6 +24001,20 @@ class Radio$1 extends React.Component {
         correctnessShown: true,
         previouslyAnswered: false
       }));
+    } else if (this.props.showSolutions === "all") {
+      choiceStates = choices.map(({
+        correct
+      }) => ({
+        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) {
@@ -24087,7 +24102,8 @@ Radio$1.defaultProps = {
   multipleSelect: false,
   countChoices: false,
   deselectEnabled: false,
-  linterContext: linterContextDefault
+  linterContext: linterContextDefault,
+  showSolutions: "none"
 };
 
 const {
@@ -28322,6 +28338,118 @@ const getLines = points => points.map((point, i) => {
   return [point, next];
 });
 
+function SVGLine(props) {
+  const {
+    start,
+    end,
+    style,
+    className,
+    testId
+  } = props;
+  return /*#__PURE__*/React.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 {
+  constructor() {
+    this.path = [];
+    this.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 => _extends({}, 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.createElement("g", {
+    transform: `translate(${point[0]} ${point[1]}) rotate(${-props.angle})`
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(-1.5)"
+  }, /*#__PURE__*/React.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 = vec.sub(tip, tail);
+  return /*#__PURE__*/React.createElement("g", {
+    style: {
+      stroke: color,
+      strokeWidth: 2
+    }
+  }, /*#__PURE__*/React.createElement(SVGLine, {
+    start: tailPx,
+    end: tipPx
+  }), /*#__PURE__*/React.createElement(Arrowhead, {
+    x: tip[0],
+    y: tip[1],
+    angle: angleDegrees(direction)
+  }));
+}
+function angleDegrees([x, y]) {
+  return Math.atan2(y, x) * 180 / Math.PI;
+}
+
 const defaultStroke = "var(--movable-line-stroke-color)";
 const MovableLine = props => {
   const {
@@ -28382,7 +28510,7 @@ const MovableLine = props => {
       stroke,
       strokeWidth: "var(--movable-line-stroke-weight)"
     },
-    dragging: dragging,
+    className: dragging ? "movable-dragging" : "",
     testId: "movable-line__line"
   })), startExtend && /*#__PURE__*/React.createElement(Vector, {
     tail: start,
@@ -28394,33 +28522,15 @@ const MovableLine = props => {
     color: stroke
   }));
 };
-function SVGLine(props) {
-  const {
-    start,
-    end,
-    style,
-    dragging,
-    className,
-    testId
-  } = props;
-  const draggingClass = dragging ? "movable-dragging" : "";
-  return /*#__PURE__*/React.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__*/createContext({
-  state: {},
-  dispatch: () => {}
-});
-function useGraphState() {
-  return React__default.useContext(GraphStateContext);
+const defaultGraphConfig = {
+  range: [[0, 1], [0, 1]],
+  snapStep: [1, 1],
+  markings: "none"
+};
+const GraphConfigContext = /*#__PURE__*/createContext(defaultGraphConfig);
+function useGraphConfig() {
+  return React__default.useContext(GraphConfigContext);
 }
 
 // The hitbox size of 48px by 48px is preserved from the legacy interactive
@@ -28428,8 +28538,10 @@ function useGraphState() {
 const hitboxSizePx = 48;
 const StyledMovablePoint = props => {
   const {
-    state
-  } = useGraphState();
+    range,
+    snapStep,
+    markings
+  } = useGraphConfig();
   const hitboxRef = useRef(null);
   const {
     point,
@@ -28442,17 +28554,34 @@ 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.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.createElement(React.Fragment, null, showHairlines && /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+    x1: verticalStartX,
+    y1: y,
+    x2: verticalEndX,
+    y2: y,
+    stroke: color.green
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: x,
+    y1: horizontalStartY,
+    x2: x,
+    y2: horizontalEndY,
+    stroke: color.green
+  })), /*#__PURE__*/React.createElement("g", {
     ref: hitboxRef,
-    className: "movable-point",
+    className: pointClasses,
     tabIndex: 0,
     style: {
-      cursor: dragging ? "grabbing" : "grab",
-      touchAction: "none",
-      outline: "none",
       "--movable-point-color": color$1
     },
     "data-test-id": "movable-point"
@@ -28481,7 +28610,7 @@ const StyledMovablePoint = props => {
       fill: color$1
     },
     "data-test-id": "movable-point__center"
-  }));
+  })));
 };
 
 const SegmentGraph = props => {
@@ -28489,15 +28618,11 @@ const SegmentGraph = props => {
     dispatch
   } = props;
   const {
-    coords: segments,
-    snapStep,
-    range
+    coords: segments
   } = props.graphState;
   return /*#__PURE__*/React.createElement(React.Fragment, null, segments == null ? void 0 : segments.map((segment, i) => /*#__PURE__*/React.createElement(SegmentView, {
     key: i,
-    collinearPair: segment,
-    snaps: snapStep,
-    range: range,
+    points: segment,
     onMoveLine: delta => {
       dispatch(moveLine(i, delta));
     },
@@ -28510,7 +28635,7 @@ const SegmentGraph = props => {
 const SegmentView = props => {
   const {
     onMoveLine: onMoveSegment,
-    collinearPair: [start, end]
+    points: [start, end]
   } = props;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableLine, {
     start: start,
@@ -28535,16 +28660,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.createElement(React.Fragment, null, lines == null ? void 0 : lines.map((line, i) => /*#__PURE__*/React.createElement(LineView, {
     key: i,
-    collinearPair: line,
-    snaps: snapStep,
-    range: range,
+    points: line,
     onMoveLine: delta => {
       dispatch(moveLine(i, delta));
     },
@@ -28559,10 +28680,12 @@ const LineView = props => {
   const {
     onMoveLine,
     onMovePoint,
-    collinearPair: [start, end],
-    range,
+    points: [start, end],
     stroke
   } = props;
+  const {
+    range
+  } = useGraphConfig();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableLine, {
     start: start,
     end: end,
@@ -28876,46 +28999,26 @@ function PointGraph(props) {
   })));
 }
 
-function Arrow(props) {
-  const {
-    userTransform,
-    viewTransform
-  } = useTransformContext();
-  const point = [props.x, props.y];
-  const userTransformedPoint = vec.transform(point, userTransform);
-  const viewTransformedPoint = vec.transform(userTransformedPoint, viewTransform);
-  return /*#__PURE__*/React__default.createElement("g", {
-    transform: `translate(${viewTransformedPoint[0]} ${viewTransformedPoint[1]}) rotate(${props.rotate}) scale(1.25)`
-  }, /*#__PURE__*/React__default.createElement("g", {
-    transform: "translate(-1)"
-  }, /*#__PURE__*/React__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.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Arrow, {
+    range: [[xMin, xMax], [yMin, yMax]]
+  } = useGraphConfig();
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Arrowhead, {
     x: xMax,
     y: 0,
-    rotate: 0
-  }), /*#__PURE__*/React__default.createElement(Arrow, {
+    angle: 0
+  }), /*#__PURE__*/React__default.createElement(Arrowhead, {
     x: 0,
     y: yMin,
-    rotate: 90
-  }), /*#__PURE__*/React__default.createElement(Arrow, {
+    angle: 90
+  }), /*#__PURE__*/React__default.createElement(Arrowhead, {
     x: xMin,
     y: 0,
-    rotate: 180
-  }), /*#__PURE__*/React__default.createElement(Arrow, {
+    angle: 180
+  }), /*#__PURE__*/React__default.createElement(Arrowhead, {
     x: 0,
     y: yMax,
-    rotate: 270
+    angle: 270
   }));
 }
 
@@ -28924,8 +29027,19 @@ 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
+  y,
+  gridStep,
+  tickStep
 }) => {
   const pointOnAxis = [0, y];
   const [[xPosition, yPosition]] = useTransform(pointOnAxis);
@@ -28937,7 +29051,7 @@ const YGridTick = ({
     x2: xPosition + tickSize / 2,
     y2: yPosition,
     style: tickStyle
-  }), y !== -1 && /*#__PURE__*/React.createElement("text", {
+  }), showTickLabel(gridStep, tickStep, y) && /*#__PURE__*/React.createElement("text", {
     height: 20,
     width: 50,
     textAnchor: "end",
@@ -28946,7 +29060,9 @@ const YGridTick = ({
   }, y.toString()));
 };
 const XGridTick = ({
-  x
+  x,
+  gridStep,
+  tickStep
 }) => {
   const pointOnAxis = [x, 0];
   const [[xPosition, yPosition]] = useTransform(pointOnAxis);
@@ -28958,7 +29074,7 @@ const XGridTick = ({
     x2: xPosition,
     y2: yPosition - tickSize / 2,
     style: tickStyle
-  }), x !== -1 && /*#__PURE__*/React.createElement("text", {
+  }), showTickLabel(gridStep, tickStep, x) && /*#__PURE__*/React.createElement("text", {
     height: 20,
     width: 50,
     textAnchor: "middle",
@@ -28993,12 +29109,16 @@ const AxisTicks = props => {
   }, yGridTicks.map(y => {
     return /*#__PURE__*/React.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.createElement(XGridTick, {
       x: x,
-      key: `x-grid-tick-${x}`
+      key: `x-grid-tick-${x}`,
+      gridStep: props.gridStep[1],
+      tickStep: xTickStep
     });
   }));
 };
@@ -29024,10 +29144,13 @@ const Grid = props => {
   return props.markings === "none" ? null : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Coordinates.Cartesian, {
     xAxis: axisOptions(props, 0),
     yAxis: axisOptions(props, 1)
-  }), /*#__PURE__*/React.createElement(AxisTicks, {
+  }), props.markings === "graph" && /*#__PURE__*/React.createElement(AxisArrows, null),
+  // 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
-  }), props.markings === "graph" && /*#__PURE__*/React.createElement(AxisArrows, null));
+    tickStep: props.tickStep,
+    gridStep: props.gridStep
+  }), /*#__PURE__*/React.createElement(AxisArrows, null)));
 };
 
 // Displays a stylized open eye: lint warnings are visible
@@ -29986,29 +30109,30 @@ function initializeGraphState(params) {
     graph,
     step,
     snapStep,
-    range
+    range,
+    markings
   } = params;
+  const shared = {
+    hasBeenInteractedWith: false,
+    range,
+    snapStep,
+    markings
+  };
   switch (graph.type) {
     case "segment":
-      return {
+      return _extends({}, shared, {
         type: "segment",
-        hasBeenInteractedWith: false,
-        range,
-        snapStep,
         coords: getDefaultSegments({
           graph,
           step,
           range
         })
-      };
+      });
     case "linear":
     case "linear-system":
     case "ray":
-      return {
+      return _extends({}, 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({
@@ -30016,13 +30140,10 @@ function initializeGraphState(params) {
           range,
           step
         })
-      };
+      });
     case "polygon":
-      return {
+      return _extends({}, shared, {
         type: "polygon",
-        hasBeenInteractedWith: false,
-        range,
-        snapStep,
         showAngles: Boolean(graph.showAngles),
         showSides: Boolean(graph.showSides),
         coords: getPolygonCoords({
@@ -30030,19 +30151,16 @@ function initializeGraphState(params) {
           range,
           step
         })
-      };
+      });
     case "point":
-      return {
+      return _extends({}, shared, {
         type: graph.type,
-        hasBeenInteractedWith: false,
-        range,
-        snapStep,
         coords: getDefaultPoints({
           graph,
           step,
           range
         })
-      };
+      });
     case "angle":
     case "circle":
     case "sinusoid":
@@ -30282,10 +30400,11 @@ const MafsGraph = props => {
   useEffect(() => {
     dispatch(changeRange([[xMinRange, xMaxRange], [yMinRange, yMaxRange]]));
   }, [dispatch, xMinRange, xMaxRange, yMinRange, yMaxRange]);
-  return /*#__PURE__*/React.createElement(GraphStateContext.Provider, {
+  return /*#__PURE__*/React.createElement(GraphConfigContext.Provider, {
     value: {
-      state,
-      dispatch
+      range: state.range,
+      snapStep: state.snapStep,
+      markings: props.markings
     }
   }, /*#__PURE__*/React.createElement(View, {
     style: {
@@ -42370,7 +42489,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 = "21.3.0";
+const libVersion = "21.4.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {