@khanacademy/perseus 22.2.0 → 22.4.0

package/dist/index.js

@@ -27,8 +27,8 @@ var Button = require('@khanacademy/wonder-blocks-button');
 var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
 var Banner = require('@khanacademy/wonder-blocks-banner');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
-var caretDown = require('@phosphor-icons/core/assets/regular/caret-down.svg');
-var caretUp = require('@phosphor-icons/core/assets/regular/caret-up.svg');
+var caretDown = require('@phosphor-icons/core/regular/caret-down.svg');
+var caretUp = require('@phosphor-icons/core/regular/caret-up.svg');
 var debounce$1 = require('lodash.debounce');
 var mafs = require('mafs');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
@@ -28952,15 +28952,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"];
@@ -29017,6 +29012,7 @@ const arrowPath = pathBuilder().move(-3, 4).curve(-2.75, 2.5, 0, 0.25, 0.75, 0).
 function Arrowhead(props) {
   const [point] = useTransformVectorsToPixels(props.tip);
   return /*#__PURE__*/React__namespace.createElement("g", {
+    className: "interactive-graph-arrowhead",
     transform: `translate(${point[0]} ${point[1]}) rotate(${-props.angle})`
   }, /*#__PURE__*/React__namespace.createElement("g", {
     transform: "translate(-1.5)"
@@ -29031,49 +29027,7 @@ function Arrowhead(props) {
   })));
 }
 
-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-testid": testId
-  });
-}
-
-function Vector(props) {
-  const {
-    tail,
-    tip,
-    color,
-    style
-  } = props;
-  const [tailPx, tipPx] = useTransformVectorsToPixels(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,
-    style: style
-  }), /*#__PURE__*/React__namespace.createElement(Arrowhead, {
-    tip: tip,
-    angle: angleDegrees(direction)
-  }));
-}
-function angleDegrees(_ref) {
+function calculateAngleInDegrees(_ref) {
   let [x, y] = _ref;
   return Math.atan2(y, x) * 180 / Math.PI;
 }
@@ -29116,10 +29070,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__namespace.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 = mafs.vec.sub(tip, tail);
+  const angle = calculateAngleInDegrees(direction);
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    style: {
+      stroke: color,
+      strokeWidth: 2
+    }
+  }, /*#__PURE__*/React__namespace.createElement(SVGLine, {
+    start: tailPx,
+    end: tipPx,
+    style: style
+  }), /*#__PURE__*/React__namespace.createElement(Arrowhead, {
+    angle: angle,
+    tip: tip,
+    color: color
+  }));
+}
 
 const LockedLine = props => {
   const {
@@ -29135,27 +29136,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__namespace.createElement(Vector, {
       tail: point1.coord,
-      tip: endExtend,
+      tip: extendedPoint,
       color: lockedFigureColors[color],
       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" ? mafs.Line.Segment : mafs.Line.ThroughPoints;
-    line = /*#__PURE__*/React__namespace.createElement(LineType, {
+    let arrowTip = kind === "segment" ? point2.coord : getIntersectionOfRayWithBox(point2.coord, point1.coord, range);
+    const direction = mafs.vec.sub(point2.coord, point1.coord);
+    let angle = calculateAngleInDegrees(direction);
+    const startArrowHead = kind !== "segment" && /*#__PURE__*/React__namespace.createElement(Arrowhead, {
+      angle: angle,
+      tip: arrowTip,
+      color: lockedFigureColors[color]
+    });
+    arrowTip = kind === "segment" ? point1.coord : getIntersectionOfRayWithBox(point1.coord, point2.coord, range);
+    angle = angle > 180 ? angle - 180 : angle + 180;
+    const endArrowHead = kind !== "segment" && /*#__PURE__*/React__namespace.createElement(Arrowhead, {
+      angle: angle,
+      tip: arrowTip,
+      color: lockedFigureColors[color]
+    });
+    line = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, startArrowHead, /*#__PURE__*/React__namespace.createElement(LineType, {
       point1: point1.coord,
       point2: point2.coord,
       color: lockedFigureColors[color],
       style: lineStyle
-    });
+    }), endArrowHead);
   }
   return /*#__PURE__*/React__namespace.createElement("g", {
     className: kind === "ray" ? "locked-ray" : "locked-line"
@@ -29261,6 +29273,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 {
@@ -29876,6 +29902,287 @@ 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 {
+        ...shared,
+        type: "segment",
+        coords: getDefaultSegments({
+          graph,
+          step,
+          range
+        })
+      };
+    case "linear":
+    case "linear-system":
+    case "ray":
+      return {
+        ...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 {
+        ...shared,
+        type: "polygon",
+        showAngles: Boolean(graph.showAngles),
+        showSides: Boolean(graph.showSides),
+        coords: getPolygonCoords({
+          graph,
+          range,
+          step
+        })
+      };
+    case "point":
+      return {
+        ...shared,
+        type: graph.type,
+        coords: getDefaultPoints({
+          graph,
+          step,
+          range
+        })
+      };
+    case "circle":
+      return {
+        ...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 wonderStuffCore.UnreachableCaseError(graph);
+  }
+}
+const getDefaultPoints = _ref => {
+  let {
+    graph,
+    range,
+    step
+  } = _ref;
+  const numPoints = graph.numPoints || 1;
+  let coords = 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 {
+      ...initialGraph
+    };
+  }
+  if (initialGraph.type === "linear-system" && state.type === "linear-system") {
+    return {
+      ...initialGraph,
+      coords: state.coords
+    };
+  }
+  if (state.type === "segment" && initialGraph.type === "segment") {
+    return {
+      ...initialGraph,
+      coords: state.coords
+    };
+  }
+  if (state.type === "linear" && initialGraph.type === "linear") {
+    return {
+      ...initialGraph,
+      coords: state.coords[0]
+    };
+  }
+  if (state.type === "ray" && initialGraph.type === "ray") {
+    return {
+      ...initialGraph,
+      coords: state.coords[0]
+    };
+  }
+  if (state.type === "polygon" && initialGraph.type === "polygon") {
+    return {
+      ...initialGraph,
+      coords: state.coords
+    };
+  }
+  if (state.type === "point" && initialGraph.type === "point") {
+    return {
+      ...initialGraph,
+      coords: state.coords
+    };
+  }
+  if (state.type === "circle" && initialGraph.type === "circle") {
+    return {
+      ...initialGraph,
+      center: state.center,
+      radius: getRadius(state)
+    };
+  }
+  throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
+}
+const getDefaultSegments = _ref2 => {
+  let {
+    graph,
+    range,
+    step
+  } = _ref2;
+  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 = _ref3 => {
+  let {
+    graph,
+    range,
+    step
+  } = _ref3;
+  return (
+    // Return two lines for a linear system, one for a ray or linear
+    graph.coords ?? graph.type === "linear-system" ? defaultLinearCoords.map(collinear => normalizePoints(range, step, collinear)) : [normalizePoints(range, step, defaultLinearCoords[0])]
+  );
+};
+const getPolygonCoords = _ref4 => {
+  let {
+    graph,
+    range,
+    step
+  } = _ref4;
+  let coords = graph.coords?.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__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Circle, {
+    center: center,
+    radius: getRadius(graphState),
+    fillOpacity: 0,
+    color: wonderBlocksTokens.color.blue
+  }), /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
+    point: center,
+    onMove: newCenter => {
+      dispatch(moveCenter(newCenter));
+    }
+  }), /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
+    point: radiusPoint,
+    onMove: newRadiusPoint => {
+      dispatch(moveRadiusPoint(newRadiusPoint));
+    }
+  }));
+}
+
 function PointGraph(props) {
   const {
     dispatch
@@ -30681,6 +30988,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:
@@ -30820,6 +31131,67 @@ 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 = [...mafs.vec.add(state.radiusPoint, mafs.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 {
+          ...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 (___default["default"].isEqual(nextRadiusPoint, state.center)) {
+          return state;
+        }
+        return {
+          ...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
@@ -30938,235 +31310,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 {
-        ...shared,
-        type: "segment",
-        coords: getDefaultSegments({
-          graph,
-          step,
-          range
-        })
-      };
-    case "linear":
-    case "linear-system":
-    case "ray":
-      return {
-        ...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 {
-        ...shared,
-        type: "polygon",
-        showAngles: Boolean(graph.showAngles),
-        showSides: Boolean(graph.showSides),
-        coords: getPolygonCoords({
-          graph,
-          range,
-          step
-        })
-      };
-    case "point":
-      return {
-        ...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 wonderStuffCore.UnreachableCaseError(graph);
-  }
-}
-const getDefaultPoints = _ref => {
-  let {
-    graph,
-    range,
-    step
-  } = _ref;
-  const numPoints = graph.numPoints || 1;
-  let coords = 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 {
-      ...initialGraph
-    };
-  }
-  if (initialGraph.type === "linear-system" && state.type === "linear-system") {
-    return {
-      ...initialGraph,
-      coords: state.coords
-    };
-  }
-  if (state.type === "segment" && initialGraph.type === "segment") {
-    return {
-      ...initialGraph,
-      coords: state.coords
-    };
-  }
-  if (state.type === "linear" && initialGraph.type === "linear") {
-    return {
-      ...initialGraph,
-      coords: state.coords[0]
-    };
-  }
-  if (state.type === "ray" && initialGraph.type === "ray") {
-    return {
-      ...initialGraph,
-      coords: state.coords[0]
-    };
-  }
-  if (state.type === "polygon" && initialGraph.type === "polygon") {
-    return {
-      ...initialGraph,
-      coords: state.coords
-    };
-  }
-  if (state.type === "point" && initialGraph.type === "point") {
-    return {
-      ...initialGraph,
-      coords: state.coords
-    };
-  }
-  throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
-}
-const getDefaultSegments = _ref2 => {
-  let {
-    graph,
-    range,
-    step
-  } = _ref2;
-  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 = _ref3 => {
-  let {
-    graph,
-    range,
-    step
-  } = _ref3;
-  return (
-    // Return two lines for a linear system, one for a ray or linear
-    graph.coords ?? graph.type === "linear-system" ? defaultLinearCoords.map(collinear => normalizePoints(range, step, collinear)) : [normalizePoints(range, step, defaultLinearCoords[0])]
-  );
-};
-const getPolygonCoords = _ref4 => {
-  let {
-    graph,
-    range,
-    step
-  } = _ref4;
-  let coords = graph.coords?.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,
@@ -31203,20 +31346,46 @@ const renderGraph = props => {
         dispatch: dispatch
       });
     case "circle":
-      throw new Error("the circle graph type is not yet implemented");
+      return /*#__PURE__*/React__namespace.createElement(CircleGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
     default:
       return new wonderStuffCore.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 {
+      ...state,
+      graph: {
+        ...state.graph,
+        radius: getRadius(state.graph)
+      }
+    };
+  }
+  return {
+    ...state
+  };
+}
 const StatefulMafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
   const [state, dispatch] = React__namespace.useReducer(interactiveGraphReducer, props, initializeGraphState);
   React.useImperativeHandle(ref, () => ({
     getUserInput: () => getGradableGraph(state, props.graph)
   }));
-  return /*#__PURE__*/React__namespace.createElement(MafsGraph, _extends({
+  function onChange(next) {
+    props.onChange(mafsStateToInteractiveGraph(next));
+  }
+  return /*#__PURE__*/React__namespace.createElement(MafsGraph, _extends({}, props, {
     state: state,
-    dispatch: dispatch
-  }, props));
+    dispatch: dispatch,
+    onChange: onChange
+  }));
 });
 const MafsGraph = props => {
   const {
@@ -31258,6 +31427,7 @@ const MafsGraph = props => {
       labels
     }
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    className: "mafs-graph",
     style: {
       width,
       height,
@@ -43389,7 +43559,7 @@ const init = function (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";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {