@khanacademy/perseus 22.2.0 → 22.4.0

package/dist/es/index.js

@@ -26,10 +26,10 @@ import Button from '@khanacademy/wonder-blocks-button';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import Banner from '@khanacademy/wonder-blocks-banner';
 import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-blocks-dropdown';
-import caretDown from '@phosphor-icons/core/assets/regular/caret-down.svg';
-import caretUp from '@phosphor-icons/core/assets/regular/caret-up.svg';
+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$3, Point as Point$2, useMovable, Text as Text$1, Polygon, Coordinates, Mafs } from 'mafs';
+import { vec, Line as Line$3, Point as Point$2, useMovable, Text as Text$1, Polygon, Circle as Circle$1, 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';
@@ -28664,15 +28664,10 @@ const ItemExtras = [
 
 const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
 const lockedFigureColors = {
-  blue: "#3D7586",
   green: "#447A53",
-  gray: "#5D5F66",
   grayH: "#3B3D45",
-  grayI: "#21242C",
   purple: "#594094",
-  purpleD: "#8351E8",
   pink: "#B25071",
-  orange: "#946700",
   red: "#D92916"
 };
 const plotterPlotTypes = ["bar", "line", "pic", "histogram", "dotplot"];
@@ -28731,6 +28726,7 @@ function Arrowhead(props) {
   var _props$color;
   const [point] = useTransformVectorsToPixels(props.tip);
   return /*#__PURE__*/React.createElement("g", {
+    className: "interactive-graph-arrowhead",
     transform: `translate(${point[0]} ${point[1]}) rotate(${-props.angle})`
   }, /*#__PURE__*/React.createElement("g", {
     transform: "translate(-1.5)"
@@ -28745,49 +28741,7 @@ function Arrowhead(props) {
   })));
 }
 
-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-testid": testId
-  });
-}
-
-function Vector(props) {
-  const {
-    tail,
-    tip,
-    color,
-    style
-  } = props;
-  const [tailPx, tipPx] = useTransformVectorsToPixels(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,
-    style: style
-  }), /*#__PURE__*/React.createElement(Arrowhead, {
-    tip: tip,
-    angle: angleDegrees(direction)
-  }));
-}
-function angleDegrees([x, y]) {
+function calculateAngleInDegrees([x, y]) {
   return Math.atan2(y, x) * 180 / Math.PI;
 }
 
@@ -28829,10 +28783,57 @@ const getIntersectionOfRayWithBox = (initialPoint, throughPoint, box) => {
       return [xMax, yAtXMax];
   }
 };
-const getLines = points => points.map((point, i) => {
-  const next = points[(i + 1) % points.length];
-  return [point, next];
-});
+const getLines = points => {
+  return points.map((point, i) => {
+    const next = points[(i + 1) % points.length];
+    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-testid": testId
+  });
+}
+
+function Vector(props) {
+  const {
+    tail,
+    tip,
+    color,
+    style
+  } = props;
+  const [tailPx, tipPx] = useTransformVectorsToPixels(tail, tip);
+  const direction = vec.sub(tip, tail);
+  const angle = calculateAngleInDegrees(direction);
+  return /*#__PURE__*/React.createElement("g", {
+    style: {
+      stroke: color,
+      strokeWidth: 2
+    }
+  }, /*#__PURE__*/React.createElement(SVGLine, {
+    start: tailPx,
+    end: tipPx,
+    style: style
+  }), /*#__PURE__*/React.createElement(Arrowhead, {
+    angle: angle,
+    tip: tip,
+    color: color
+  }));
+}
 
 const LockedLine = props => {
   const {
@@ -28848,27 +28849,38 @@ const LockedLine = props => {
   let line;
   if (kind === "ray") {
     // Rays extend to the end of the graph in one direction.
-    const endExtend = getIntersectionOfRayWithBox(point2.coord, point1.coord, range);
+    const extendedPoint = getIntersectionOfRayWithBox(point2.coord, point1.coord, range);
     line = /*#__PURE__*/React.createElement(Vector, {
       tail: point1.coord,
-      tip: endExtend,
+      tip: extendedPoint,
       color: lockedFigureColors[color$1],
       style: {
-        strokeDasharray: lineStyle === "dashed" ?
-        // TODO(lems-1930): Uncomment this line when the
-        // dashed style is updated in Mafs.
-        // ? "var(--mafs-line-stroke-dash-style)"
-        "4, 3" : undefined
+        strokeDasharray: lineStyle === "dashed" ? "var(--mafs-line-stroke-dash-style)" : undefined
       }
     });
   } else {
     const LineType = kind === "segment" ? Line$3.Segment : Line$3.ThroughPoints;
-    line = /*#__PURE__*/React.createElement(LineType, {
+    let arrowTip = kind === "segment" ? point2.coord : getIntersectionOfRayWithBox(point2.coord, point1.coord, range);
+    const direction = vec.sub(point2.coord, point1.coord);
+    let angle = calculateAngleInDegrees(direction);
+    const startArrowHead = kind !== "segment" && /*#__PURE__*/React.createElement(Arrowhead, {
+      angle: angle,
+      tip: arrowTip,
+      color: lockedFigureColors[color$1]
+    });
+    arrowTip = kind === "segment" ? point1.coord : getIntersectionOfRayWithBox(point1.coord, point2.coord, range);
+    angle = angle > 180 ? angle - 180 : angle + 180;
+    const endArrowHead = kind !== "segment" && /*#__PURE__*/React.createElement(Arrowhead, {
+      angle: angle,
+      tip: arrowTip,
+      color: lockedFigureColors[color$1]
+    });
+    line = /*#__PURE__*/React.createElement(React.Fragment, null, startArrowHead, /*#__PURE__*/React.createElement(LineType, {
       point1: point1.coord,
       point2: point2.coord,
       color: lockedFigureColors[color$1],
       style: lineStyle
-    });
+    }), endArrowHead);
   }
   return /*#__PURE__*/React.createElement("g", {
     className: kind === "ray" ? "locked-ray" : "locked-line"
@@ -28974,6 +28986,20 @@ function movePoint(index, destination) {
     destination
   };
 }
+const MOVE_CENTER = "move-center";
+function moveCenter(destination) {
+  return {
+    type: MOVE_CENTER,
+    destination
+  };
+}
+const MOVE_RADIUS_POINT = "MOVE_RADIUS_POINT";
+function moveRadiusPoint(destination) {
+  return {
+    type: MOVE_RADIUS_POINT,
+    destination
+  };
+}
 const CHANGE_SNAP_STEP = "change-snap-step";
 function changeSnapStep(snapStep) {
   return {
@@ -29579,6 +29605,272 @@ const PolygonGraph = props => {
   })));
 };
 
+function initializeGraphState(params) {
+  const {
+    graph,
+    step,
+    snapStep,
+    range,
+    markings
+  } = params;
+  const shared = {
+    hasBeenInteractedWith: false,
+    range,
+    snapStep,
+    markings
+  };
+  switch (graph.type) {
+    case "segment":
+      return _extends({}, shared, {
+        type: "segment",
+        coords: getDefaultSegments({
+          graph,
+          step,
+          range
+        })
+      });
+    case "linear":
+    case "linear-system":
+    case "ray":
+      return _extends({}, shared, {
+        type: graph.type,
+        // Linear and ray graphs have a single tuple of points, while a
+        // linear system has two tuples of points.
+        coords: getLineCoords({
+          graph,
+          range,
+          step
+        })
+      });
+    case "polygon":
+      return _extends({}, shared, {
+        type: "polygon",
+        showAngles: Boolean(graph.showAngles),
+        showSides: Boolean(graph.showSides),
+        coords: getPolygonCoords({
+          graph,
+          range,
+          step
+        })
+      });
+    case "point":
+      return _extends({}, shared, {
+        type: graph.type,
+        coords: getDefaultPoints({
+          graph,
+          step,
+          range
+        })
+      });
+    case "circle":
+      return _extends({}, shared, {
+        type: graph.type,
+        center: [0, 0],
+        radiusPoint: [1, 0]
+      });
+    case "angle":
+    case "sinusoid":
+    case "quadratic":
+      throw new Error("Mafs not yet implemented for graph type: " + graph.type);
+    default:
+      throw new UnreachableCaseError(graph);
+  }
+}
+const getDefaultPoints = ({
+  graph,
+  range,
+  step
+}) => {
+  var _graph$coords;
+  const numPoints = graph.numPoints || 1;
+  let coords = (_graph$coords = graph.coords) == null ? void 0 : _graph$coords.slice();
+  if (coords) {
+    return coords;
+  }
+  switch (numPoints) {
+    case 1:
+      // Back in the day, one point's coords were in graph.coord
+      coords = [graph.coord || [0, 0]];
+      break;
+    case 2:
+      coords = [[-5, 0], [5, 0]];
+      break;
+    case 3:
+      coords = [[-5, 0], [0, 0], [5, 0]];
+      break;
+    case 4:
+      coords = [[-6, 0], [-2, 0], [2, 0], [6, 0]];
+      break;
+    case 5:
+      coords = [[-6, 0], [-3, 0], [0, 0], [3, 0], [6, 0]];
+      break;
+    case 6:
+      coords = [[-5, 0], [-3, 0], [-1, 0], [1, 0], [3, 0], [5, 0]];
+      break;
+    default:
+      coords = [];
+      break;
+  }
+  // Transform coords from their -10 to 10 space to 0 to 1
+  // because of the old graph.coord, and also it's easier.
+  const newCoords = normalizeCoords(coords, [[-10, 10], [-10, 10]]);
+  return normalizePoints(range, step, newCoords);
+};
+
+// TS v4 doesn't narrow return types, while v5 does.
+// Instead of updating to v5, using generic type to relate input and output types.
+function getGradableGraph(state, initialGraph) {
+  if (!state.hasBeenInteractedWith) {
+    return _extends({}, initialGraph);
+  }
+  if (initialGraph.type === "linear-system" && state.type === "linear-system") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "segment" && initialGraph.type === "segment") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "linear" && initialGraph.type === "linear") {
+    return _extends({}, initialGraph, {
+      coords: state.coords[0]
+    });
+  }
+  if (state.type === "ray" && initialGraph.type === "ray") {
+    return _extends({}, initialGraph, {
+      coords: state.coords[0]
+    });
+  }
+  if (state.type === "polygon" && initialGraph.type === "polygon") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "point" && initialGraph.type === "point") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "circle" && initialGraph.type === "circle") {
+    return _extends({}, initialGraph, {
+      center: state.center,
+      radius: getRadius(state)
+    });
+  }
+  throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
+}
+const getDefaultSegments = ({
+  graph,
+  range,
+  step
+}) => {
+  const ys = n => {
+    switch (n) {
+      case 2:
+        return [5, -5];
+      case 3:
+        return [5, 0, -5];
+      case 4:
+        return [6, 2, -2, -6];
+      case 5:
+        return [6, 3, 0, -3, -6];
+      case 6:
+        return [5, 3, 1, -1, -3, -5];
+      default:
+        return [5];
+    }
+  };
+  const defaultRange = [[-10, 10], [-10, 10]];
+  return ys(graph.numSegments).map(y => {
+    let endpoints = [[-5, y], [5, y]];
+    endpoints = normalizeCoords(endpoints, defaultRange);
+    endpoints = normalizePoints(range, step, endpoints);
+    return endpoints;
+  });
+};
+const defaultLinearCoords = [[[0.25, 0.75], [0.75, 0.75]], [[0.25, 0.25], [0.75, 0.25]]];
+const getLineCoords = ({
+  graph,
+  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])]
+  );
+};
+const getPolygonCoords = ({
+  graph,
+  range,
+  step
+}) => {
+  var _graph$coords3;
+  let coords = (_graph$coords3 = graph.coords) == null ? void 0 : _graph$coords3.slice();
+  if (coords) {
+    return coords;
+  }
+  const n = graph.numSides || 3;
+  if (n === "unlimited") {
+    coords = [];
+  } else {
+    const angle = 2 * Math.PI / n;
+    const offset = (1 / n - 1 / 2) * Math.PI;
+
+    // TODO(alex): Generalize this to more than just triangles so that
+    // all polygons have whole number side lengths if snapping to sides
+    const radius = graph.snapTo === "sides" ? Math.sqrt(3) / 3 * 7 : 4;
+
+    // Generate coords of a regular polygon with n sides
+    coords = [...Array(n).keys()].map(i => [radius * Math.cos(i * angle + offset), radius * Math.sin(i * angle + offset)]);
+  }
+  coords = normalizeCoords(coords, [[-10, 10], [-10, 10]]);
+  const snapToGrid = !["angles", "sides"].includes(graph.snapTo || "");
+  coords = normalizePoints(range, step, coords, /* noSnap */!snapToGrid);
+  return coords;
+};
+
+/**
+ * determine radius of a circle graph
+ *
+ * @param graph - the graph object containing the circle
+ * @returns the radius of the circle
+ */
+function getRadius(graph) {
+  const [centerX, centerY] = graph.center;
+  const [edgeX, edgeY] = graph.radiusPoint;
+  return Math.sqrt(Math.pow(edgeX - centerX, 2) + Math.pow(edgeY - centerY, 2));
+}
+
+function CircleGraph(props) {
+  const {
+    dispatch,
+    graphState
+  } = props;
+  const {
+    center,
+    radiusPoint
+  } = graphState;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Circle$1, {
+    center: center,
+    radius: getRadius(graphState),
+    fillOpacity: 0,
+    color: color.blue
+  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
+    point: center,
+    onMove: newCenter => {
+      dispatch(moveCenter(newCenter));
+    }
+  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
+    point: radiusPoint,
+    onMove: newRadiusPoint => {
+      dispatch(moveRadiusPoint(newRadiusPoint));
+    }
+  }));
+}
+
 function PointGraph(props) {
   const {
     dispatch
@@ -30380,6 +30672,10 @@ function interactiveGraphReducer(state, action) {
       return doMoveAll(state, action);
     case MOVE_POINT:
       return doMovePoint(state, action);
+    case MOVE_CENTER:
+      return doMoveCenter(state, action);
+    case MOVE_RADIUS_POINT:
+      return doMoveRadiusPoint(state, action);
     case CHANGE_SNAP_STEP:
       return doChangeSnapStep(state, action);
     case CHANGE_RANGE:
@@ -30515,6 +30811,65 @@ function doMovePoint(state, action) {
       throw new Error("The movePoint action is only for point and polygon graphs");
   }
 }
+function doMoveCenter(state, action) {
+  switch (state.type) {
+    case "circle":
+      {
+        // Constrain the center of the circle to the chart range
+        const constrainedCenter = bound$1({
+          snapStep: state.snapStep,
+          range: state.range,
+          point: action.destination
+        });
+
+        // Reposition the radius point based on the new center
+        // (spread to make sure we're not going to  mutate anything)
+        const newRadiusPoint = [...vec.add(state.radiusPoint, vec.sub(constrainedCenter, state.center))];
+
+        // Try to position the radius handle in a visible spot
+        // if it otherwise would be off the chart
+        // ex: if the handle is on the right and we move the center
+        // to the rightmost position, move the handle to the left
+        const [xMin, xMax] = state.range[0];
+        const [radX] = newRadiusPoint;
+        if (radX < xMin || radX > xMax) {
+          const xJumpDist = (radX - constrainedCenter[0]) * 2;
+          const possibleNewX = radX - xJumpDist;
+          if (possibleNewX >= xMin && possibleNewX <= xMax) {
+            newRadiusPoint[0] = possibleNewX;
+          }
+        }
+        return _extends({}, state, {
+          hasBeenInteractedWith: true,
+          center: constrainedCenter,
+          radiusPoint: newRadiusPoint
+        });
+      }
+    default:
+      throw new Error("The doMoveCenter action is only for circle graphs");
+  }
+}
+function doMoveRadiusPoint(state, action) {
+  switch (state.type) {
+    case "circle":
+      {
+        const [xMin, xMax] = state.range[0];
+        const nextRadiusPoint = [
+        // Constrain to graph range
+        // The +0 is to convert -0 to +0
+        Math.min(Math.max(xMin, action.destination[0] + 0), xMax), state.center[1]];
+        if (_.isEqual(nextRadiusPoint, state.center)) {
+          return state;
+        }
+        return _extends({}, state, {
+          hasBeenInteractedWith: true,
+          radiusPoint: nextRadiusPoint
+        });
+      }
+    default:
+      throw new Error("The doMoveRadiusPoint action is only for circle graphs");
+  }
+}
 function doChangeSnapStep(state, action) {
   if (
   // Deep equality check since these are arrays
@@ -30626,222 +30981,6 @@ function setAtIndex(args) {
   return copy;
 }
 
-function initializeGraphState(params) {
-  const {
-    graph,
-    step,
-    snapStep,
-    range,
-    markings
-  } = params;
-  const shared = {
-    hasBeenInteractedWith: false,
-    range,
-    snapStep,
-    markings
-  };
-  switch (graph.type) {
-    case "segment":
-      return _extends({}, shared, {
-        type: "segment",
-        coords: getDefaultSegments({
-          graph,
-          step,
-          range
-        })
-      });
-    case "linear":
-    case "linear-system":
-    case "ray":
-      return _extends({}, shared, {
-        type: graph.type,
-        // Linear and ray graphs have a single tuple of points, while a
-        // linear system has two tuples of points.
-        coords: getLineCoords({
-          graph,
-          range,
-          step
-        })
-      });
-    case "polygon":
-      return _extends({}, shared, {
-        type: "polygon",
-        showAngles: Boolean(graph.showAngles),
-        showSides: Boolean(graph.showSides),
-        coords: getPolygonCoords({
-          graph,
-          range,
-          step
-        })
-      });
-    case "point":
-      return _extends({}, shared, {
-        type: graph.type,
-        coords: getDefaultPoints({
-          graph,
-          step,
-          range
-        })
-      });
-    case "angle":
-    case "circle":
-    case "sinusoid":
-    case "quadratic":
-      throw new Error("Mafs not yet implemented for graph type: " + graph.type);
-    default:
-      throw new UnreachableCaseError(graph);
-  }
-}
-const getDefaultPoints = ({
-  graph,
-  range,
-  step
-}) => {
-  var _graph$coords;
-  const numPoints = graph.numPoints || 1;
-  let coords = (_graph$coords = graph.coords) == null ? void 0 : _graph$coords.slice();
-  if (coords) {
-    return coords;
-  }
-  switch (numPoints) {
-    case 1:
-      // Back in the day, one point's coords were in graph.coord
-      coords = [graph.coord || [0, 0]];
-      break;
-    case 2:
-      coords = [[-5, 0], [5, 0]];
-      break;
-    case 3:
-      coords = [[-5, 0], [0, 0], [5, 0]];
-      break;
-    case 4:
-      coords = [[-6, 0], [-2, 0], [2, 0], [6, 0]];
-      break;
-    case 5:
-      coords = [[-6, 0], [-3, 0], [0, 0], [3, 0], [6, 0]];
-      break;
-    case 6:
-      coords = [[-5, 0], [-3, 0], [-1, 0], [1, 0], [3, 0], [5, 0]];
-      break;
-    default:
-      coords = [];
-      break;
-  }
-  // Transform coords from their -10 to 10 space to 0 to 1
-  // because of the old graph.coord, and also it's easier.
-  const newCoords = normalizeCoords(coords, [[-10, 10], [-10, 10]]);
-  return normalizePoints(range, step, newCoords);
-};
-
-// TS v4 doesn't narrow return types, while v5 does.
-// Instead of updating to v5, using generic type to relate input and output types.
-function getGradableGraph(state, initialGraph) {
-  if (!state.hasBeenInteractedWith) {
-    return _extends({}, initialGraph);
-  }
-  if (initialGraph.type === "linear-system" && state.type === "linear-system") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "segment" && initialGraph.type === "segment") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "linear" && initialGraph.type === "linear") {
-    return _extends({}, initialGraph, {
-      coords: state.coords[0]
-    });
-  }
-  if (state.type === "ray" && initialGraph.type === "ray") {
-    return _extends({}, initialGraph, {
-      coords: state.coords[0]
-    });
-  }
-  if (state.type === "polygon" && initialGraph.type === "polygon") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "point" && initialGraph.type === "point") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
-}
-const getDefaultSegments = ({
-  graph,
-  range,
-  step
-}) => {
-  const ys = n => {
-    switch (n) {
-      case 2:
-        return [5, -5];
-      case 3:
-        return [5, 0, -5];
-      case 4:
-        return [6, 2, -2, -6];
-      case 5:
-        return [6, 3, 0, -3, -6];
-      case 6:
-        return [5, 3, 1, -1, -3, -5];
-      default:
-        return [5];
-    }
-  };
-  const defaultRange = [[-10, 10], [-10, 10]];
-  return ys(graph.numSegments).map(y => {
-    let endpoints = [[-5, y], [5, y]];
-    endpoints = normalizeCoords(endpoints, defaultRange);
-    endpoints = normalizePoints(range, step, endpoints);
-    return endpoints;
-  });
-};
-const defaultLinearCoords = [[[0.25, 0.75], [0.75, 0.75]], [[0.25, 0.25], [0.75, 0.25]]];
-const getLineCoords = ({
-  graph,
-  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])]
-  );
-};
-const getPolygonCoords = ({
-  graph,
-  range,
-  step
-}) => {
-  var _graph$coords3;
-  let coords = (_graph$coords3 = graph.coords) == null ? void 0 : _graph$coords3.slice();
-  if (coords) {
-    return coords;
-  }
-  const n = graph.numSides || 3;
-  if (n === "unlimited") {
-    coords = [];
-  } else {
-    const angle = 2 * Math.PI / n;
-    const offset = (1 / n - 1 / 2) * Math.PI;
-
-    // TODO(alex): Generalize this to more than just triangles so that
-    // all polygons have whole number side lengths if snapping to sides
-    const radius = graph.snapTo === "sides" ? Math.sqrt(3) / 3 * 7 : 4;
-
-    // Generate coords of a regular polygon with n sides
-    coords = [...Array(n).keys()].map(i => [radius * Math.cos(i * angle + offset), radius * Math.sin(i * angle + offset)]);
-  }
-  coords = normalizeCoords(coords, [[-10, 10], [-10, 10]]);
-  const snapToGrid = !["angles", "sides"].includes(graph.snapTo || "");
-  coords = normalizePoints(range, step, coords, /* noSnap */!snapToGrid);
-  return coords;
-};
-
 const renderGraph = props => {
   const {
     state,
@@ -30878,20 +31017,42 @@ const renderGraph = props => {
         dispatch: dispatch
       });
     case "circle":
-      throw new Error("the circle graph type is not yet implemented");
+      return /*#__PURE__*/React.createElement(CircleGraph, {
+        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
+// the the parent InteractiveGraph
+function mafsStateToInteractiveGraph(state) {
+  if (state.graph.type === "circle") {
+    return _extends({}, state, {
+      graph: _extends({}, state.graph, {
+        radius: getRadius(state.graph)
+      })
+    });
+  }
+  return _extends({}, state);
+}
 const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [state, dispatch] = React.useReducer(interactiveGraphReducer, props, initializeGraphState);
   useImperativeHandle(ref, () => ({
     getUserInput: () => getGradableGraph(state, props.graph)
   }));
-  return /*#__PURE__*/React.createElement(MafsGraph, _extends({
+  function onChange(next) {
+    props.onChange(mafsStateToInteractiveGraph(next));
+  }
+  return /*#__PURE__*/React.createElement(MafsGraph, _extends({}, props, {
     state: state,
-    dispatch: dispatch
-  }, props));
+    dispatch: dispatch,
+    onChange: onChange
+  }));
 });
 const MafsGraph = props => {
   const {
@@ -30933,6 +31094,7 @@ const MafsGraph = props => {
       labels
     }
   }, /*#__PURE__*/React.createElement(View, {
+    className: "mafs-graph",
     style: {
       width,
       height,
@@ -43069,7 +43231,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.2.0";
+const libVersion = "22.4.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {