@khanacademy/perseus 24.3.0 → 25.1.0

package/dist/es/index.js

@@ -1,5 +1,6 @@
 import * as KAS from '@khanacademy/kas';
 import { MathInputI18nContext, CursorContext, getKeyTranslator, createMathField, getCursorContext, DesktopKeypad, convertDotToTimesByLocale, mathQuillInstance, KeypadInput, KeypadType, KeyArray, keypadElementPropType } from '@khanacademy/math-input';
+import { PerseusError, Errors, addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule, linterContextProps } from '@khanacademy/perseus-linter';
 import { View, RenderStateRoot, UniqueIDProvider, useLatestRef, useUniqueIdWithMock, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
@@ -39,7 +40,6 @@ import Switch from '@khanacademy/wonder-blocks-switch';
 import Pill from '@khanacademy/wonder-blocks-pill';
 import { Popper } from 'react-popper';
 import Link from '@khanacademy/wonder-blocks-link';
-import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -699,52 +699,9 @@ var dependencies = /*#__PURE__*/Object.freeze({
 // TODO(LP-11481): Change the primary API we use for logging in Perseus to use
 // getDependencies() internally... simplify usage to just using a "singleton"
 // which get's the injected logger.
-/**
- * @typedef {Object} Errors utility for referencing the Perseus error taxonomy.
- */
-const Errors = Object.freeze({
-  /**
-   * @property {ErrorKind} Unknown The kind of error is not known.
-   */
-  Unknown: "Unknown",
-  /**
-   * @property {ErrorKind} Internal The error is internal to the executing code.
-   */
-  Internal: "Internal",
-  /**
-   * @property {ErrorKind} InvalidInput There was a problem with the provided
-   * input, such as the wrong format or a null value.
-   */
-  InvalidInput: "InvalidInput",
-  /**
-   * @property {ErrorKind} NotAllowed There was a problem due to the state of
-   * the system not matching the requested operation or input. For example,
-   * trying to create a username that is valid, but is already taken by
-   * another user. Use {@link InvalidInput} instead when the input isn't
-   * valid regardless of the state of the system. Use {@link NotFound} when
-   * the failure is due to not being able to find a resource.
-   */
-  NotAllowed: "NotAllowed",
-  /**
-   * @property {ErrorKind} TransientService There was a problem when making a
-   * request to a service.
-   */
-  TransientService: "TransientService",
-  /**
-   * @property {ErrorKind} Service There was a non-transient problem when
-   * making a request to service.
-   */
-  Service: "Service"
-});
-
-/**
- * @type {ErrorKind} The kind of error being reported
- */
-
 /**
  * Provides logging infrastructure for Perseus
  */
-
 const Log = {
   // Logs a message
   log: (message, extra) => {
@@ -756,16 +713,6 @@ const Log = {
   }
 };
 
-class PerseusError extends Error {
-  constructor(message, kind, options) {
-    super(message);
-    this.kind = void 0;
-    this.metadata = void 0;
-    this.kind = kind;
-    this.metadata = options == null ? void 0 : options.metadata;
-  }
-}
-
 /**
  * These are things that widgets should exclude when serializing themselves.
  *
@@ -28428,7 +28375,41 @@ function inset(amount, box) {
   return [trim(amount[X], box[X]), trim(amount[Y], box[Y])];
 }
 
+// [L]inear Int[erp]olation: gets the weighted average of two values `a` and
+// `b`, with the given `fraction` specifying how much weight `a` and `b` get:
+// - if `fraction` is 0, `lerp` returns `a`.
+// - if `fraction` is 0.5, `lerp` returns the average of `a` and `b`.
+// - if `fraction` is 1, `lerp` returns `b`.
+function lerp(a, b, fraction) {
+  return (b - a) * clamp(fraction, 0, 1) + a;
+}
+
+// Determines whether two line segments have exactly one intersection point.
+// The segments are treated as "open" - that is, not inclusive of their
+// endpoints.
+// Algorithm from https://stackoverflow.com/a/24392281/7347484
+const segmentsIntersect = ([[a, b], [c, d]], [[p, q], [r, s]]) => {
+  const determinant = (c - a) * (s - q) - (r - p) * (d - b);
+  if (determinant === 0) {
+    return false;
+  } else {
+    const lambda = ((s - q) * (r - a) + (p - r) * (s - b)) / determinant;
+    const gamma = ((b - d) * (r - a) + (c - a) * (s - b)) / determinant;
+    return 0 < lambda && lambda < 1 && 0 < gamma && gamma < 1;
+  }
+};
+
 // This file contains helper functions for working with angles.
+
+function convertDegreesToRadians(degrees) {
+  return degrees / 180 * Math.PI;
+}
+
+// Returns a value between -180 and 180, inclusive. The angle is measured
+// between the positive x-axis and the given vector.
+function calculateAngleInDegrees([x, y]) {
+  return Math.atan2(y, x) * 180 / Math.PI;
+}
 function polar(r, th) {
   if (typeof r === "number") {
     r = [r, r];
@@ -28766,51 +28747,6 @@ function Arrowhead(props) {
   })));
 }
 
-function calculateAngleInDegrees([x, y]) {
-  return Math.atan2(y, x) * 180 / Math.PI;
-}
-
-/**
- * Given a ray and a rectangular box, find the point where the ray intersects
- * the edge of the box. Assumes the `initialPoint` is inside the box.
- * @param initialPoint - The starting point of the ray.
- * @param throughPoint - A point that the ray passes through. Must be different from initialPoint.
- * @param box - The box with which to intersect the ray, in the form [[xMin, xMax], [yMin, yMax]]
- */
-const getIntersectionOfRayWithBox = (initialPoint, throughPoint, box) => {
-  const [[xMin, xMax], [yMin, yMax]] = box;
-  const [aX, aY] = initialPoint;
-  const [bX, bY] = throughPoint;
-  const yDiff = bY - aY;
-  const xDiff = bX - aX;
-  const slope = yDiff / xDiff;
-  const inverseSlope = 1 / slope;
-  const xExtreme = xDiff < 0 ? xMin : xMax;
-  const yExtreme = yDiff < 0 ? yMin : yMax;
-  const yAtXExtreme = aY + (xExtreme - aX) * slope;
-  const xAtYExtreme = aX + (yExtreme - aY) * inverseSlope;
-  switch (true) {
-    // does the ray exit the graph bounding box via the left or right edge?
-    case isBetween(yAtXExtreme, yMin, yMax):
-      return [xExtreme, yAtXExtreme];
-
-    // does the ray exit the graph bounding box via the top or bottom edge?
-    case isBetween(xAtYExtreme, xMin, xMax):
-      return [xAtYExtreme, yExtreme];
-    default:
-      return [xExtreme, yExtreme];
-  }
-};
-const getLines = points => {
-  return points.map((point, i) => {
-    const next = points[(i + 1) % points.length];
-    return [point, next];
-  });
-};
-function isBetween(x, low, high) {
-  return x >= low && x <= high;
-}
-
 function SVGLine(props) {
   const {
     start,
@@ -28856,6 +28792,41 @@ function Vector(props) {
   }));
 }
 
+/**
+ * Given a ray and a rectangular box, find the point where the ray intersects
+ * the edge of the box. Assumes the `initialPoint` is inside the box.
+ * @param initialPoint - The starting point of the ray.
+ * @param throughPoint - A point that the ray passes through. Must be different from initialPoint.
+ * @param box - The box with which to intersect the ray, in the form [[xMin, xMax], [yMin, yMax]]
+ */
+const getIntersectionOfRayWithBox = (initialPoint, throughPoint, box) => {
+  const [[xMin, xMax], [yMin, yMax]] = box;
+  const [aX, aY] = initialPoint;
+  const [bX, bY] = throughPoint;
+  const yDiff = bY - aY;
+  const xDiff = bX - aX;
+  const slope = yDiff / xDiff;
+  const inverseSlope = 1 / slope;
+  const xExtreme = xDiff < 0 ? xMin : xMax;
+  const yExtreme = yDiff < 0 ? yMin : yMax;
+  const yAtXExtreme = aY + (xExtreme - aX) * slope;
+  const xAtYExtreme = aX + (yExtreme - aY) * inverseSlope;
+  switch (true) {
+    // does the ray exit the graph bounding box via the left or right edge?
+    case isBetween(yAtXExtreme, yMin, yMax):
+      return [xExtreme, yAtXExtreme];
+
+    // does the ray exit the graph bounding box via the top or bottom edge?
+    case isBetween(xAtYExtreme, xMin, xMax):
+      return [xAtYExtreme, yExtreme];
+    default:
+      return [xExtreme, yExtreme];
+  }
+};
+function isBetween(x, low, high) {
+  return x >= low && x <= high;
+}
+
 const LockedLine = props => {
   const {
     color: color$1,
@@ -29311,10 +29282,7 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
   const wbColorName = (_Object$entries$find$ = (_Object$entries$find = Object.entries(color).find(([_, value]) => value === color$1)) == null ? void 0 : _Object$entries$find[0]) != null ? _Object$entries$find$ : "blue";
   const pointClasses = `movable-point ${dragging ? "movable-point--dragging" : ""} ${focusClass(focusBehavior)}`;
   const [[x, y]] = useTransformVectorsToPixels(point);
-
-  // TODO(benchristel): destructure range in one line
-  const [xMin, xMax] = range[X];
-  const [yMin, yMax] = range[Y];
+  const [[xMin, xMax], [yMin, yMax]] = range;
   const [[verticalStartX]] = useTransformVectorsToPixels([xMin, 0]);
   const [[verticalEndX]] = useTransformVectorsToPixels([xMax, 0]);
   const [[_, horizontalStartY]] = useTransformVectorsToPixels([0, yMin]);
@@ -29893,24 +29861,11 @@ const shouldDrawArcOutside = (midpoint, vertex, range, polygonLines) => {
   // Create a ray from the midpoint (inside angle) to the edge of the range
   const rangeIntersectionPoint = getIntersectionOfRayWithBox(midpoint, vertex, range);
   let lineIntersectionCount = 0;
-  polygonLines.forEach(line => linesIntersect([vertex, rangeIntersectionPoint], line) && lineIntersectionCount++);
+  polygonLines.forEach(line => segmentsIntersect([vertex, rangeIntersectionPoint], line) && lineIntersectionCount++);
 
   // If the number of intersections is even, the angle is inside the polygon
   return !isEven(lineIntersectionCount);
 };
-
-// https://stackoverflow.com/a/24392281/7347484
-// The "intersects" function in geometry doesn't seem to work for this use case
-const linesIntersect = ([[a, b], [c, d]], [[p, q], [r, s]]) => {
-  const determinant = (c - a) * (s - q) - (r - p) * (d - b);
-  if (determinant === 0) {
-    return false;
-  } else {
-    const lambda = ((s - q) * (r - a) + (p - r) * (s - b)) / determinant;
-    const gamma = ((b - d) * (r - a) + (c - a) * (s - b)) / determinant;
-    return 0 < lambda && lambda < 1 && 0 < gamma && gamma < 1;
-  }
-};
 const isEven = n => n % 2 === 0;
 
 // This function calculates the bisector point of an angle formed by two points
@@ -30103,6 +30058,12 @@ const PolygonGraph = props => {
     onMove: destination => dispatch(movePoint(i, destination))
   })));
 };
+function getLines(points) {
+  return points.map((point, i) => {
+    const next = points[(i + 1) % points.length];
+    return [point, next];
+  });
+}
 
 function getGradableGraph(state, initialGraph) {
   if (!state.hasBeenInteractedWith) {
@@ -30479,12 +30440,8 @@ const AxisTickLabels = () => {
     tickStep,
     range
   } = graphConfig;
-
-  // TODO(benchristel): use destructuring here
-  const [xMin, xMax] = range[X];
-  const [yMin, yMax] = range[Y];
-  const yTickStep = tickStep[Y];
-  const xTickStep = tickStep[X];
+  const [[xMin, xMax], [yMin, yMax]] = range;
+  const [xTickStep, yTickStep] = tickStep;
   const yGridTicks = generateTickLocations$1(yTickStep, yMin, yMax);
   const xGridTicks = generateTickLocations$1(xTickStep, xMin, xMax);
   return /*#__PURE__*/React.createElement("div", {
@@ -30864,12 +30821,8 @@ const AxisTicks = () => {
     width,
     height
   };
-
-  // TODO(benchristel): destructure these in one line
-  const [xMin, xMax] = range[X];
-  const [yMin, yMax] = range[Y];
-  const yTickStep = tickStep[Y];
-  const xTickStep = tickStep[X];
+  const [[xMin, xMax], [yMin, yMax]] = range;
+  const [xTickStep, yTickStep] = tickStep;
   const yGridTicks = generateTickLocations(yTickStep, yMin, yMax);
   const xGridTicks = generateTickLocations(xTickStep, xMin, xMax);
   return /*#__PURE__*/React.createElement("g", {
@@ -31597,7 +31550,7 @@ function Protractor() {
 function RotationArrow() {
   const radius = 175;
   const angleDeg = 10;
-  const angleRad = degreesToRadians(angleDeg);
+  const angleRad = convertDegreesToRadians(angleDeg);
   const endX = radius * (1 - Math.cos(angleRad));
   const endY = radius * -Math.sin(angleRad);
   const rotationArrow = pathBuilder().move(0, 0).circularArc(radius, endX, endY, {
@@ -31676,17 +31629,135 @@ function useDraggablePx(args) {
   });
 }
 
-// [L]inear Int[erp]olation: gets the weighted average of two values `a` and
-// `b`, with the given `fraction` specifying how much weight `a` and `b` get:
-// - if `fraction` is 0, `lerp` returns `a`.
-// - if `fraction` is 0.5, `lerp` returns the average of `a` and `b`.
-// - if `fraction` is 1, `lerp` returns `b`.
-function lerp(a, b, fraction) {
-  return (b - a) * fraction + a;
-}
-function degreesToRadians(degrees) {
-  return degrees / 180 * Math.PI;
-}
+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,
+      height,
+      labels
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "mafs-graph",
+    style: {
+      width,
+      height,
+      position: "relative",
+      padding: "25px 25px 0 0",
+      boxSizing: "content-box",
+      marginLeft: "20px",
+      marginBottom: "20px"
+    }
+  }, /*#__PURE__*/React.createElement(LegacyGrid, {
+    box: props.box,
+    backgroundImage: props.backgroundImage
+  }), /*#__PURE__*/React.createElement(View, {
+    style: {
+      position: "absolute",
+      bottom: 0,
+      left: 0
+    }
+  }, 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: state.range[X],
+      y: state.range[Y],
+      padding: 0
+    },
+    pan: false,
+    zoom: false,
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement(SvgDefs, null), /*#__PURE__*/React.createElement(Grid, {
+    tickStep: props.step,
+    gridStep: props.gridStep,
+    range: state.range,
+    containerSizeClass: props.containerSizeClass,
+    markings: props.markings
+  }), props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLayer, {
+    lockedFigures: props.lockedFigures,
+    range: state.range
+  }), "/* Protractor */", props.showProtractor && /*#__PURE__*/React.createElement(Protractor, null), renderGraph({
+    state,
+    dispatch
+  })))));
+};
+const renderGraph = props => {
+  const {
+    state,
+    dispatch
+  } = props;
+  const {
+    type
+  } = state;
+  switch (type) {
+    case "angle":
+      return /*#__PURE__*/React.createElement(AngleGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "segment":
+      return /*#__PURE__*/React.createElement(SegmentGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "linear-system":
+      return /*#__PURE__*/React.createElement(LinearSystemGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "linear":
+      return /*#__PURE__*/React.createElement(LinearGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "ray":
+      return /*#__PURE__*/React.createElement(RayGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "polygon":
+      return /*#__PURE__*/React.createElement(PolygonGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "point":
+      return /*#__PURE__*/React.createElement(PointGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "circle":
+      return /*#__PURE__*/React.createElement(CircleGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "quadratic":
+      return /*#__PURE__*/React.createElement(QuadraticGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "sinusoid":
+      return /*#__PURE__*/React.createElement(SinusoidGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    default:
+      return new UnreachableCaseError(type);
+  }
+};
 
 function initializeGraphState(params) {
   var _graph$snapTo;
@@ -31767,12 +31838,16 @@ function initializeGraphState(params) {
   }
 }
 function getPointCoords(graph, range, step) {
-  var _graph$coords;
+  var _graph$coords, _graph$startCoords;
   const numPoints = graph.numPoints || 1;
   let coords = (_graph$coords = graph.coords) == null ? void 0 : _graph$coords.slice();
   if (coords) {
     return coords;
   }
+  const startCoords = (_graph$startCoords = graph.startCoords) == null ? void 0 : _graph$startCoords.slice();
+  if (startCoords) {
+    return startCoords;
+  }
   switch (numPoints) {
     case 1:
       // Back in the day, one point's coords were in graph.coord
@@ -31806,6 +31881,9 @@ function getSegmentCoords(graph, range, step) {
   if (graph.coords) {
     return graph.coords;
   }
+  if (graph.startCoords) {
+    return graph.startCoords;
+  }
   const ys = n => {
     switch (n) {
       case 2:
@@ -31835,20 +31913,30 @@ function getLineCoords(graph, range, step) {
   if (graph.coords) {
     return graph.coords;
   }
+  if (graph.startCoords) {
+    return graph.startCoords;
+  }
   return normalizePoints(range, step, defaultLinearCoords[0]);
 }
 function getLinearSystemCoords(graph, range, step) {
   if (graph.coords) {
     return graph.coords;
   }
+  if (graph.startCoords) {
+    return graph.startCoords;
+  }
   return defaultLinearCoords.map(points => normalizePoints(range, step, points));
 }
 function getPolygonCoords(graph, range, step) {
-  var _graph$coords2;
+  var _graph$coords2, _graph$startCoords2;
   let coords = (_graph$coords2 = graph.coords) == null ? void 0 : _graph$coords2.slice();
   if (coords) {
     return coords;
   }
+  const startCoords = (_graph$startCoords2 = graph.startCoords) == null ? void 0 : _graph$startCoords2.slice();
+  if (startCoords) {
+    return startCoords;
+  }
   const n = graph.numSides || 3;
   if (n === "unlimited") {
     coords = [];
@@ -31872,6 +31960,9 @@ function getSinusoidCoords(graph, range, step) {
   if (graph.coords) {
     return [graph.coords[0], graph.coords[1]];
   }
+  if (graph.startCoords) {
+    return [graph.startCoords[0], graph.startCoords[1]];
+  }
   let coords = [[0.5, 0.5], [0.65, 0.6]];
   coords = normalizePoints(range, step, coords, true);
   return coords;
@@ -31880,6 +31971,9 @@ function getQuadraticCoords(graph, range, step) {
   if (graph.coords) {
     return graph.coords;
   }
+  if (graph.startCoords) {
+    return graph.startCoords;
+  }
   const defaultCoords = [[0.25, 0.75], [0.5, 0.25], [0.75, 0.75]];
   return normalizePoints(range, step, defaultCoords, true);
 }
@@ -31890,6 +31984,12 @@ function getCircleCoords(graph) {
       radiusPoint: vec.add(graph.center, [graph.radius, 0])
     };
   }
+  if (graph.startCoords) {
+    return {
+      center: graph.startCoords,
+      radiusPoint: vec.add(graph.startCoords, [2, 0])
+    };
+  }
   return {
     center: [0, 0],
     radiusPoint: [2, 0]
@@ -32604,70 +32704,6 @@ function setAtIndex(args) {
   return copy;
 }
 
-const renderGraph = props => {
-  const {
-    state,
-    dispatch
-  } = props;
-  const {
-    type
-  } = state;
-  switch (type) {
-    case "angle":
-      return /*#__PURE__*/React.createElement(AngleGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
-    case "segment":
-      return /*#__PURE__*/React.createElement(SegmentGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
-    case "linear-system":
-      return /*#__PURE__*/React.createElement(LinearSystemGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
-    case "linear":
-      return /*#__PURE__*/React.createElement(LinearGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
-    case "ray":
-      return /*#__PURE__*/React.createElement(RayGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
-    case "polygon":
-      return /*#__PURE__*/React.createElement(PolygonGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
-    case "point":
-      return /*#__PURE__*/React.createElement(PointGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
-    case "circle":
-      return /*#__PURE__*/React.createElement(CircleGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
-    case "quadratic":
-      return /*#__PURE__*/React.createElement(QuadraticGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
-    case "sinusoid":
-      return /*#__PURE__*/React.createElement(SinusoidGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
-    default:
-      return new UnreachableCaseError(type);
-  }
-};
-
 // Rather than be tightly bound to how data was structured in
 // the legacy interactive graph, this lets us store state
 // however we want and we just transform it before handing it off
@@ -32683,6 +32719,7 @@ function mafsStateToInteractiveGraph(state) {
   return _extends({}, state);
 }
 const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
+  var _graph$startCoords;
   const {
     onChange,
     graph
@@ -32717,6 +32754,7 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   const snapTo = graph.type === "polygon" ? graph.snapTo : null;
   const showAngles = graph.type === "polygon" ? graph.showAngles : null;
   const showSides = graph.type === "polygon" ? graph.showSides : null;
+  const startCoords = (_graph$startCoords = graph.startCoords) != null ? _graph$startCoords : null;
   const originalPropsRef = useRef(props);
   const latestPropsRef = useLatestRef(props);
   useEffect(() => {
@@ -32727,78 +32765,12 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (latestPropsRef.current !== originalPropsRef.current) {
       dispatch(reinitialize(latestPropsRef.current));
     }
-  }, [graph.type, numSegments, numSides, snapTo, showAngles, showSides, latestPropsRef]);
+  }, [graph.type, numSegments, numSides, snapTo, showAngles, showSides, startCoords, latestPropsRef, startCoords]);
   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,
-      height,
-      labels
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    className: "mafs-graph",
-    style: {
-      width,
-      height,
-      position: "relative",
-      padding: "25px 25px 0 0",
-      boxSizing: "content-box",
-      marginLeft: "20px",
-      marginBottom: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(LegacyGrid, {
-    box: props.box,
-    backgroundImage: props.backgroundImage
-  }), /*#__PURE__*/React.createElement(View, {
-    style: {
-      position: "absolute",
-      bottom: 0,
-      left: 0
-    }
-  }, 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: state.range[X],
-      y: state.range[Y],
-      padding: 0
-    },
-    pan: false,
-    zoom: false,
-    width: width,
-    height: height
-  }, /*#__PURE__*/React.createElement(SvgDefs, null), /*#__PURE__*/React.createElement(Grid, {
-    tickStep: props.step,
-    gridStep: props.gridStep,
-    range: state.range,
-    containerSizeClass: props.containerSizeClass,
-    markings: props.markings
-  }), props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLayer, {
-    lockedFigures: props.lockedFigures,
-    range: state.range
-  }), "/* Protractor */", props.showProtractor && /*#__PURE__*/React.createElement(Protractor, null), renderGraph({
-    state,
-    dispatch
-  })))));
-};
 
 const {
   DeprecationMixin
@@ -41865,6 +41837,7 @@ const rules = {
       }, /*#__PURE__*/React.createElement("span", {
         style: SQUARE_LABEL_STYLE
       }, node.content)), /*#__PURE__*/React.createElement(AltText, {
+        key: "alt-text",
         id: "questionMarker",
         number: node.content
       }), node.space ? "\u00A0" : null];
@@ -41889,6 +41862,7 @@ const rules = {
       }, /*#__PURE__*/React.createElement("span", {
         style: CIRCLE_LABEL_STYLE
       }, node.content)), /*#__PURE__*/React.createElement(AltText, {
+        key: "alt-text",
         id: "circleMarker",
         number: node.content
       }), node.space ? "\u00A0" : null];
@@ -41912,6 +41886,7 @@ const rules = {
         className: "perseus-passage-bracket-label",
         "aria-hidden": "true"
       }, "[", node.content, "]"), /*#__PURE__*/React.createElement(AltText, {
+        key: "alt-text",
         id: "sentenceMarker",
         number: node.content
       }), node.space ? "\u00A0" : null];
@@ -44920,7 +44895,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 = "24.3.0";
+const libVersion = "25.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -47921,5 +47896,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAnswerFromUserInput, getAnswersFromWidgets, getCorrectAnswerForWidgetId, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAnswerFromUserInput, getAnswersFromWidgets, getCorrectAnswerForWidgetId, getLineCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map