@khanacademy/perseus 53.1.0 → 54.0.0

package/dist/es/index.js

@@ -1,6 +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, expressionLogic, getExpressionPublicWidgetOptions, getDecimalSeparator, approximateDeepEqual, pluck, CoreWidgetRegistry, getUpgradedWidgetOptions, mapObject, getNumericInputPublicWidgetOptions, passageRefLogic, radioLogic, getRadioPublicWidgetOptions, getCategorizerPublicWidgetOptions, getCSProgramPublicWidgetOptions, getDropdownPublicWidgetOptions, GrapherUtil as GrapherUtil$1, getGrapherPublicWidgetOptions, getIFramePublicWidgetOptions, lockedFigureColors, lockedFigureFillStyles, approximateEqual, getInteractiveGraphPublicWidgetOptions, getLabelImagePublicWidgetOptions, getMatrixPublicWidgetOptions, getMatrixSize, measurerLogic, getNumberLinePublicWidgetOptions, getOrdererPublicWidgetOptions, getPlotterPublicWidgetOptions, getSorterPublicWidgetOptions, getTablePublicWidgetOptions, addLibraryVersionToPerseusDebug, upgradeWidgetInfoToLatestVersion, getWidgetIdsFromContentByType } from '@khanacademy/perseus-core';
+import { PerseusError, Errors, expressionLogic, getDecimalSeparator, approximateDeepEqual, pluck, CoreWidgetRegistry, getUpgradedWidgetOptions, mapObject, passageRefLogic, radioLogic, GrapherUtil as GrapherUtil$1, lockedFigureColors, lockedFigureFillStyles, approximateEqual, getMatrixSize, measurerLogic, addLibraryVersionToPerseusDebug, upgradeWidgetInfoToLatestVersion, getWidgetIdsFromContentByType } from '@khanacademy/perseus-core';
 export { isFailure, isSuccess, parseAndMigratePerseusArticle, parseAndMigratePerseusItem, parsePerseusItem } from '@khanacademy/perseus-core';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule } from '@khanacademy/perseus-linter';
@@ -33,7 +33,6 @@ import Banner from '@khanacademy/wonder-blocks-banner';
 import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-blocks-dropdown';
 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, Coordinates, Ellipse, Plot as Plot$2, Line as Line$4, Point as Point$2, Polygon, Text as Text$1, useTransformContext, Polyline, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
@@ -240,6 +239,10 @@ const mockStrings = {
   simulationLocaleWarning: "Sorry, this simulation isn't available in your language.",
   selectAnAnswer: "Select an answer",
   // The following strings are used for interactive graph SR descriptions.
+  srGraphInstructions: "Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use the Arrow keys to move it.",
+  srUnlimitedGraphInstructions: "Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use the Arrow keys to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.",
+  xAxis: "X-axis",
+  yAxis: "Y-axis",
   graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",
   addPoint: "Add Point",
   removePoint: "Remove Point",
@@ -304,17 +307,23 @@ const mockStrings = {
     point2X,
     point2Y
   }) => `Line from ${point1X} comma ${point1Y} to ${point2X} comma ${point2Y}.`,
-  srAngleSideAtCoordinates: ({
-    point,
-    side,
+  srAngleStartingSide: ({
     x,
     y
-  }) => `Point ${point}, ${side} at ${x} comma ${y}`,
-  srAngleVertexAtCoordinatesWithAngleMeasure: ({
+  }) => `Point 3, starting side at ${x} comma ${y}.`,
+  srAngleEndingSide: ({
+    x,
+    y
+  }) => `Point 2, ending side at ${x} comma ${y}.`,
+  srAngleVertex: ({
+    x,
+    y
+  }) => `Point 1, vertex at ${x} comma ${y}.`,
+  srAngleVertexWithAngleMeasure: ({
     x,
     y,
     angleMeasure
-  }) => `Point 2, vertex at ${x} comma ${y}. Angle ${angleMeasure} degrees`,
+  }) => `Point 1, vertex at ${x} comma ${y}. Angle ${angleMeasure} degrees.`,
   srAngleGraphAriaLabel: "An angle on a coordinate plane.",
   srAngleGraphAriaDescription: ({
     angleMeasure,
@@ -325,6 +334,14 @@ const mockStrings = {
     endingSideX,
     endingSideY
   }) => `The angle measure is ${angleMeasure} degrees with a vertex at ${vertexX} comma ${vertexY}, a point on the starting side at ${startingSideX} comma ${startingSideY} and a point on the ending side at ${endingSideX} comma ${endingSideY}.`,
+  srAngleInteractiveElements: ({
+    vertexX,
+    vertexY,
+    startingSideX,
+    startingSideY,
+    endingSideX,
+    endingSideY
+  }) => `An angle formed by 3 points. The vertex is at ${vertexX} comma ${vertexY}. The starting side point is at ${startingSideX} comma ${startingSideY}. The ending side point is at ${endingSideX} comma ${endingSideY}.`,
   srSingleSegmentGraphAriaLabel: "A line segment on a coordinate plane.",
   srMultipleSegmentGraphAriaLabel: ({
     countOfSegments
@@ -462,7 +479,28 @@ const mockStrings = {
     pointNum,
     length
   }) => `A line segment, length approximately equal to ${length} units, connects to point ${pointNum}.`,
-  srUnlimitedPolygonEmpty: "An empty coordinate plane."
+  srUnlimitedPolygonEmpty: "An empty coordinate plane.",
+  srSinusoidGraph: "A sinusoid function on a coordinate plane.",
+  srSinusoidRootPoint: ({
+    x,
+    y
+  }) => `Midline intersection at ${x} comma ${y}.`,
+  srSinusoidPeakPoint: ({
+    x,
+    y
+  }) => `Extremum point at ${x} comma ${y}.`,
+  srSinusoidDescription: ({
+    minValue,
+    maxValue,
+    cycleStart,
+    cycleEnd
+  }) => `The graph shows a wave with a minimum value of ${minValue} and a maximum value of ${maxValue}. The wave completes a full cycle from ${cycleStart} to ${cycleEnd}.`,
+  srSinusoidInteractiveElements: ({
+    point1X,
+    point1Y,
+    point2X,
+    point2Y
+  }) => `Sinusoid graph with midline intersection point at ${point1X} comma ${point1Y} and extremum point at ${point2X} comma ${point2Y}.`
   // The above strings are used for interactive graph SR descriptions.
 };
 
@@ -1394,6 +1432,7 @@ const ApiOptions = {
     },
     baseElements: {
       Link: props => {
+        // eslint-disable-next-line jsx-a11y/anchor-has-content -- TODO(LEMS-2871): Address a11y error
         return /*#__PURE__*/React.createElement("a", props);
       }
     },
@@ -1797,7 +1836,6 @@ var Expression$1 = {
   propUpgrades: expressionLogic.widgetOptionsUpgrades,
   // For use by the editor
   isLintable: true,
-  getPublicWidgetOptions: getExpressionPublicWidgetOptions,
   // TODO(LEMS-2656): remove TS suppression
   // @ts-expect-error: Type 'Rubric' is not assignable to type 'PerseusExpressionRubric'.
   getOneCorrectAnswerFromRubric(rubric) {
@@ -15699,12 +15737,17 @@ class ImageLoader extends React.Component {
         };
       }
       const staticUrl = getDependencies().staticUrl;
-      return /*#__PURE__*/React.createElement("img", _extends({
-        tabIndex: 0,
-        src: staticUrl(src),
-        onKeyUp: onKeyUp,
-        onKeyDown: onKeyDown
-      }, imgProps));
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- TODO(LEMS-2871): Address a11y error
+        React.createElement("img", _extends({
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- TODO(LEMS-2871): Address a11y error
+          tabIndex: 0,
+          src: staticUrl(src),
+          onKeyUp: onKeyUp,
+          onKeyDown: onKeyDown
+        }, imgProps))
+      );
     };
     this.state = {
       status: props.src ? Status.LOADING : Status.PENDING
@@ -16389,16 +16432,20 @@ class Zoomable extends React.Component {
       opacity: opacity,
       WebkitTapHighlightColor: "transparent"
     }, transitionStyle);
-    return /*#__PURE__*/React.createElement("span", {
-      onClick: this.handleClick,
-      onClickCapture: this.handleClickIfZoomed,
-      onTouchCancelCapture: this.stopPropagationIfZoomed,
-      onTouchEndCapture: this.stopPropagationIfZoomed,
-      onTouchStartCapture: this.stopPropagationIfZoomed
-      // @ts-expect-error - TS2322 - Type '{ readonly transitionProperty: string; readonly transitionDuration: string; readonly transitionTimingFunction: string; readonly display: "block"; readonly width: "100%"; readonly height: number | ... 1 more ... | undefined; readonly transform: string; readonly transformOrigin: "0 0"; readonly opacity: 0 | 1; readonl...' is not assignable to type 'CSSProperties | undefined'.
-      ,
-      style: style
-    }, this.props.children);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- TODO(LEMS-2871): Address a11y error
+      React.createElement("span", {
+        onClick: this.handleClick,
+        onClickCapture: this.handleClickIfZoomed,
+        onTouchCancelCapture: this.stopPropagationIfZoomed,
+        onTouchEndCapture: this.stopPropagationIfZoomed,
+        onTouchStartCapture: this.stopPropagationIfZoomed
+        // @ts-expect-error - TS2322 - Type '{ readonly transitionProperty: string; readonly transitionDuration: string; readonly transitionTimingFunction: string; readonly display: "block"; readonly width: "100%"; readonly height: number | ... 1 more ... | undefined; readonly transform: string; readonly transformOrigin: "0 0"; readonly opacity: 0 | 1; readonl...' is not assignable to type 'CSSProperties | undefined'.
+        ,
+        style: style
+      }, this.props.children)
+    );
   }
 }
 Zoomable.defaultProps = {
@@ -17619,10 +17666,6 @@ const getWidgetExport = name => {
   var _widgets$name3;
   return (_widgets$name3 = widgets[name]) != null ? _widgets$name3 : null;
 };
-const getPublicWidgetOptionsFunction = name => {
-  var _widgets$name$getPubl, _widgets$name4;
-  return (_widgets$name$getPubl = (_widgets$name4 = widgets[name]) == null ? void 0 : _widgets$name4.getPublicWidgetOptions) != null ? _widgets$name$getPubl : i => i;
-};
 const getEditor = name => {
   return _.has(editors, name) ? editors[name] : null;
 };
@@ -17759,7 +17802,6 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   replaceDeprecatedEditors: replaceDeprecatedEditors,
   getWidget: getWidget,
   getWidgetExport: getWidgetExport,
-  getPublicWidgetOptionsFunction: getPublicWidgetOptionsFunction,
   getEditor: getEditor,
   getTransform: getTransform,
   getVersion: getVersion,
@@ -17835,6 +17877,7 @@ class WidgetContainer extends React.Component {
       "perseus-widget__definition": this.props.type === "definition"
     });
     const type = this.props.type;
+    const userAgent = navigator.userAgent;
     const WidgetType = getWidget(type);
     if (WidgetType == null) {
       // This is for the good of all people!!
@@ -17845,6 +17888,12 @@ class WidgetContainer extends React.Component {
         className: className
       });
     }
+    let subType = "null";
+    if (type === "interactive-graph") {
+      var _props$graph$type, _props$graph;
+      const props = this.state.widgetProps;
+      subType = (_props$graph$type = (_props$graph = props.graph) == null ? void 0 : _props$graph.type) != null ? _props$graph$type : "null";
+    }
     let alignment = this.state.widgetProps.alignment;
     if (alignment === "default") {
       alignment = CoreWidgetRegistry.getDefaultAlignment(type);
@@ -17898,12 +17947,26 @@ class WidgetContainer extends React.Component {
         widget_type: type,
         widget_id: this.props.id
       },
-      onError: () => {
+      onError: error => {
+        // TODO(LEMS-2826): Remove analytics event in LEMS-2826 in favor of ti below.
         analytics.onAnalyticsEvent({
           type: "perseus:widget-rendering-error",
           payload: {
+            widgetSubType: subType,
+            widgetType: type,
+            widgetId: this.props.id,
+            message: error.message,
+            userAgent: userAgent
+          }
+        });
+        analytics.onAnalyticsEvent({
+          type: "perseus:widget-rendering-error:ti",
+          payload: {
+            widgetSubType: subType,
             widgetType: type,
-            widgetId: this.props.id
+            widgetId: this.props.id,
+            message: error.message,
+            userAgent: userAgent
           }
         });
       }
@@ -20327,7 +20390,6 @@ var NumericInput$1 = {
   widget: NumericInput,
   transform: propsTransform,
   isLintable: true,
-  getPublicWidgetOptions: getNumericInputPublicWidgetOptions,
   // TODO(LEMS-2656): remove TS suppression
   // @ts-expect-error: Type 'Rubric' is not assignable to type 'PerseusNumericInputRubric'
   getOneCorrectAnswerFromRubric(rubric) {
@@ -21132,7 +21194,10 @@ class HighlightTooltip extends React.PureComponent {
     // using div instead of TooltipContent because
     // TooltipContent wouldn't let me overwrite
     // user-select and onClick
-    const content = /*#__PURE__*/React.createElement("div", {
+    const content =
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- TODO(LEMS-2871): Address a11y error
+    React.createElement("div", {
       className: css(styles$x.tooltipLabel),
       onClick: this.props.onClick
     }, this.props.label);
@@ -21143,14 +21208,18 @@ class HighlightTooltip extends React.PureComponent {
       top: `calc(${Math.round(focusRect.top)}px + 0.95em)`,
       height: 0
     };
-    return /*#__PURE__*/React.createElement("div", {
-      style: style,
-      onMouseEnter: this.props.onMouseEnter,
-      onMouseLeave: this.props.onMouseLeave
-    }, /*#__PURE__*/React.createElement(Tooltip$1, {
-      content: content,
-      opened: true
-    }, /*#__PURE__*/React.createElement("div", null)));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- TODO(LEMS-2871): Address a11y error
+      React.createElement("div", {
+        style: style,
+        onMouseEnter: this.props.onMouseEnter,
+        onMouseLeave: this.props.onMouseLeave
+      }, /*#__PURE__*/React.createElement(Tooltip$1, {
+        content: content,
+        opened: true
+      }, /*#__PURE__*/React.createElement("div", null)))
+    );
   }
 }
 const styles$x = StyleSheet.create({
@@ -23853,15 +23922,19 @@ const BaseRadio = function BaseRadio({
     // content somehow? Would changing our choice of key
     // somehow break something happening inside a choice's
     // child Renderers, by changing when we mount/unmount?
-    return /*#__PURE__*/React.createElement("li", {
-      key: i,
-      ref: e => listElem = e,
-      className: className,
-      onClick: clickHandler,
-      onTouchStart: labelWrap ? undefined : captureScratchpadTouchStart$1
-    }, /*#__PURE__*/React.createElement(Element, _extends({}, elementProps, {
-      ref: ref
-    })));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions -- TODO(LEMS-2871): Address a11y error
+      React.createElement("li", {
+        key: i,
+        ref: e => listElem = e,
+        className: className,
+        onClick: clickHandler,
+        onTouchStart: labelWrap ? undefined : captureScratchpadTouchStart$1
+      }, /*#__PURE__*/React.createElement(Element, _extends({}, elementProps, {
+        ref: ref
+      })))
+    );
   })));
 
   // Allow for horizontal scrolling if content is too wide, which may be
@@ -24391,8 +24464,7 @@ var Radio = {
   staticTransform: transform,
   version: radioLogic.version,
   propUpgrades: radioLogic.widgetOptionsUpgrades,
-  isLintable: true,
-  getPublicWidgetOptions: getRadioPublicWidgetOptions
+  isLintable: true
 };
 
 /* eslint-disable import/no-named-as-default */
@@ -24678,8 +24750,7 @@ var Categorizer$1 = {
   staticTransform: editorProps => {
     return _.pick(editorProps, "items", "categories", "values", "randomizeItems");
   },
-  isLintable: true,
-  getPublicWidgetOptions: getCategorizerPublicWidgetOptions
+  isLintable: true
 };
 
 /**
@@ -24885,8 +24956,7 @@ var CSProgram$1 = {
   name: "cs-program",
   displayName: "CS Program",
   widget: CSProgram,
-  hidden: true,
-  getPublicWidgetOptions: getCSProgramPublicWidgetOptions
+  hidden: true
 };
 
 const getPromptJSON$l = renderProps => {
@@ -25104,8 +25174,7 @@ var Dropdown$1 = {
   displayName: "Drop down",
   accessible: true,
   widget: Dropdown,
-  transform: optionsTransform,
-  getPublicWidgetOptions: getDropdownPublicWidgetOptions
+  transform: optionsTransform
 };
 
 const getPromptJSON$j = renderProps => {
@@ -26579,8 +26648,7 @@ var Grapher$1 = {
   hidden: true,
   widget: Grapher,
   transform: propTransform$2,
-  staticTransform: staticTransform$4,
-  getPublicWidgetOptions: getGrapherPublicWidgetOptions
+  staticTransform: staticTransform$4
 };
 
 const getPromptJSON$f = rendererJSON => {
@@ -26865,12 +26933,16 @@ class Iframe extends React.Component {
     //  that we need. This makes it a bit safer in case some content
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
-    return /*#__PURE__*/React.createElement("iframe", {
-      sandbox: sandboxProperties,
-      style: style,
-      src: url,
-      allowFullScreen: this.props.allowFullScreen
-    });
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/iframe-has-title -- TODO(LEMS-2871): Address a11y error
+      React.createElement("iframe", {
+        sandbox: sandboxProperties,
+        style: style,
+        src: url,
+        allowFullScreen: this.props.allowFullScreen
+      })
+    );
   }
 }
 Iframe.defaultProps = {
@@ -26885,8 +26957,7 @@ var Iframe$1 = {
   displayName: "Iframe (deprecated)",
   widget: Iframe,
   // Let's not expose it to all content creators yet
-  hidden: true,
-  getPublicWidgetOptions: getIFramePublicWidgetOptions
+  hidden: true
 };
 
 const getPromptJSON$d = renderProps => {
@@ -26903,7 +26974,7 @@ const getPromptJSON$d = renderProps => {
 
 const defaultBoxSize = 400;
 const defaultRange = [0, 10];
-const defaultBackgroundImage$2 = {
+const defaultBackgroundImage$1 = {
   url: null,
   width: 0,
   height: 0
@@ -27060,7 +27131,7 @@ ImageWidget.defaultProps = {
   title: "",
   range: [defaultRange, defaultRange],
   box: [defaultBoxSize, defaultBoxSize],
-  backgroundImage: defaultBackgroundImage$2,
+  backgroundImage: defaultBackgroundImage$1,
   labels: [],
   alt: "",
   caption: "",
@@ -27677,307 +27748,6 @@ var Interactive = {
   hidden: true
 };
 
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-const defaultBackgroundImage$1 = {
-  url: null
-};
-
-/* Style objects */
-const defaultInstructionsStyle = {
-  fontStyle: "italic",
-  fontWeight: "bold",
-  fontSize: "32px",
-  width: "100%",
-  height: "100%",
-  textAlign: "center",
-  backgroundColor: "white",
-  position: "absolute",
-  zIndex: 1,
-  transition: "opacity .25s ease-in-out"
-};
-const instructionsTextStyle = {
-  position: "relative",
-  top: "25%"
-};
-function numSteps$1(range, step) {
-  return Math.floor((range[1] - range[0]) / step);
-}
-class Graph extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.graphieDivRef = /*#__PURE__*/React.createRef();
-    this.protractor = void 0;
-    this.ruler = void 0;
-    this._graphie = void 0;
-    // @ts-expect-error - TS2564 - Property '_hasSetupGraphieThisUpdate' has no initializer and is not definitely assigned in the constructor.
-    this._hasSetupGraphieThisUpdate = void 0;
-    // @ts-expect-error - TS2564 - Property '_shouldSetupGraphie' has no initializer and is not definitely assigned in the constructor.
-    this._shouldSetupGraphie = void 0;
-    /* Reset the graphie canvas to its initial state
-     *
-     * Use when re-rendering the parent component and you need a blank
-     * graphie.
-     */
-    this.reset = () => {
-      this._setupGraphie(false);
-    };
-    this.graphie = () => {
-      return this._graphie;
-    };
-    this.pointsFromNormalized = (coordsList, noSnap) => {
-      const self = this;
-      return _.map(coordsList, function (coords) {
-        return _.map(coords, function (coord, i) {
-          const range = self.props.range[i];
-          if (noSnap) {
-            return range[0] + (range[1] - range[0]) * coord;
-          }
-          const step = self.props.step[i];
-          const nSteps = numSteps$1(range, step);
-          const tick = Math.round(coord * nSteps);
-          return range[0] + step * tick;
-        });
-      });
-    };
-    this._setupGraphie = initialMount => {
-      // Only setupGraphie once per componentDidUpdate().
-      // This prevents this component from rendering graphie
-      // and then immediately re-render graphie because its
-      // parent component asked it to. This will happen when
-      // props on the parent and props on this component both
-      // require graphie to be re-rendered.
-      if (this._hasSetupGraphieThisUpdate) {
-        return;
-      }
-      const graphieDiv = this.graphieDivRef.current;
-      // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
-      $(graphieDiv).empty();
-
-      // Content creators may need to explicitly add the dollar signs so the
-      // strings are picked up by our translation tools. However, these math
-      // annotations are redundant because we already render all graph labels
-      // in math mode. For example, a label value of `$\text{Dollars}$` will
-      // be translatable, but we only want to pass the string
-      // `\text{Dollars}` to the Graph widget.
-      const labels = this.props.labels.map(label => Util.unescapeMathMode(label));
-      const range = this.props.range;
-      // @ts-expect-error - TS2345: Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLElement'.
-      const graphie = this._graphie = GraphUtils.createGraphie(graphieDiv);
-      const gridConfig = this._getGridConfig();
-      // @ts-expect-error - TS2339: Property 'snap' does not exist on type 'Graphie'.
-      graphie.snap = this.props.snapStep;
-      if (this.props.markings === "graph") {
-        graphie.graphInit({
-          range: range,
-          scale: vector$3.map(gridConfig, g => g.scale),
-          axisArrows: "<->",
-          labelFormat: function (s) {
-            return "\\small{" + s + "}";
-          },
-          gridStep: this.props.gridStep,
-          tickStep: vector$3.map(gridConfig, g => g.tickStep),
-          labelStep: 1,
-          unityLabels: vector$3.map(gridConfig, g => g.unityLabel),
-          isMobile: this.props.isMobile
-        });
-        graphie.label([0, range[1][1]], labels[1], this.props.isMobile ? "below right" : "above");
-        graphie.label([range[0][1], 0], labels[0], this.props.isMobile ? "above left" : "right");
-      } else if (this.props.markings === "grid") {
-        graphie.graphInit({
-          range: range,
-          scale: vector$3.map(gridConfig, g => g.scale),
-          gridStep: this.props.gridStep,
-          axes: false,
-          ticks: false,
-          labels: false,
-          isMobile: this.props.isMobile
-        });
-      } else if (this.props.markings === "none") {
-        graphie.init({
-          range: range,
-          scale: vector$3.map(gridConfig, g => g.scale),
-          isMobile: this.props.isMobile
-        });
-      }
-
-      // Add instructions just before mouse layer
-      const visible = 0.5;
-      const invisible = 0.0;
-      let $instructionsWrapper;
-      if (this.props.instructions) {
-        $instructionsWrapper = $("<div/>");
-        _.each(defaultInstructionsStyle, function (value, key) {
-          $instructionsWrapper.css(key, value);
-        });
-        $instructionsWrapper.css("opacity", visible);
-        const $instructions = $("<span/>", {
-          text: this.props.instructions
-        });
-        _.each(instructionsTextStyle, function (value, key) {
-          $instructions.css(key, value);
-        });
-        $instructionsWrapper.append($instructions);
-        // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'append' does not exist on type 'JQueryStatic'.
-        $(graphieDiv).append($instructionsWrapper);
-      } else {
-        $instructionsWrapper = undefined;
-      }
-
-      // Add some handlers for instructions text (if necessary)
-      const onMouseDown = $instructionsWrapper || this.props.onMouseDown ? _.bind(function (coord) {
-        if ($instructionsWrapper) {
-          $instructionsWrapper.remove();
-          $instructionsWrapper = null;
-        }
-        // eslint-disable-next-line @babel/no-invalid-this
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        // eslint-disable-next-line @babel/no-invalid-this
-        this.props.onMouseDown(coord);
-      }, this) : undefined;
-      const onMouseOver = $instructionsWrapper ? function () {
-        var _$instructionsWrapper;
-        (_$instructionsWrapper = $instructionsWrapper) == null || _$instructionsWrapper.css("opacity", invisible);
-      } : undefined;
-      const onMouseOut = $instructionsWrapper ? function () {
-        var _$instructionsWrapper2;
-        (_$instructionsWrapper2 = $instructionsWrapper) == null || _$instructionsWrapper2.css("opacity", visible);
-      } : undefined;
-      /* eslint-enable indent */
-
-      graphie.addMouseLayer({
-        onClick: this.props.onClick,
-        onMouseDown: onMouseDown,
-        onMouseOver: onMouseOver,
-        onMouseOut: onMouseOut,
-        onMouseMove: this.props.onMouseMove,
-        allowScratchpad: true,
-        setDrawingAreaAvailable: this.props.setDrawingAreaAvailable
-      });
-      this._updateProtractor();
-      this._updateRuler();
-
-      // We set this flag before jumping into our callback
-      // to avoid recursing if our callback calls reset() itself
-      this._hasSetupGraphieThisUpdate = true;
-      if (!initialMount && this.props.onGraphieUpdated) {
-        // Calling a parent callback in componentDidMount is bad and
-        // results in hard-to-reason-about lifecycle problems (esp. with
-        // refs), so we do it only on update and rely on the parent to
-        // query for the graphie object on initial mount
-        this.props.onGraphieUpdated(graphie);
-      }
-    };
-    this._getGridConfig = () => {
-      return vector$3.map(this.props.step, (step, i) => Util.gridDimensionConfig(step, this.props.range[i], this.props.box[i], this.props.gridStep[i]));
-    };
-    this._updateProtractor = () => {
-      if (this.protractor) {
-        this.protractor.remove();
-      }
-      if (this.props.showProtractor) {
-        // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-        const coord = this.pointsFromNormalized([[0.5, 0.05]])[0];
-        this.protractor = this._graphie.protractor(coord);
-      }
-    };
-    this._updateRuler = () => {
-      if (this.ruler) {
-        this.ruler.remove();
-      }
-      if (this.props.showRuler) {
-        // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-        const coord = this.pointsFromNormalized([[0.5, 0.25]])[0];
-        const extent = this._graphie.range[0][1] - this._graphie.range[0][0];
-        this.ruler = this._graphie.ruler({
-          center: coord,
-          label: this.props.rulerLabel,
-          pixelsPerUnit: this._graphie.scale[0],
-          ticksPerUnit: this.props.rulerTicks,
-          units: Math.round(0.8 * extent)
-        });
-      }
-    };
-    this.toJSON = () => {
-      return _.pick(this.props, "range", "step", "markings", "labels", "backgroundImage", "showProtractor", "showRuler", "rulerLabel", "rulerTicks", "gridStep", "snapStep");
-    };
-  }
-  componentDidMount() {
-    this._setupGraphie(true);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const potentialChanges = ["labels", "range", "step", "markings", "showProtractor", "showRuler", "rulerLabel", "rulerTicks", "gridStep", "snapStep"];
-    const self = this;
-    _.each(potentialChanges, function (prop) {
-      if (!_.isEqual(self.props[prop], nextProps[prop])) {
-        self._shouldSetupGraphie = true;
-      }
-    });
-  }
-  componentDidUpdate() {
-    // Only setupGraphie once per componentDidUpdate().
-    // See explanation in setupGraphie().
-    this._hasSetupGraphieThisUpdate = false;
-    if (this._shouldSetupGraphie) {
-      this._setupGraphie(false);
-      this._shouldSetupGraphie = false;
-    }
-  }
-  render() {
-    let image;
-    const imageData = this.props.backgroundImage;
-    if (imageData.url) {
-      const scale = this.props.box[0] / interactiveSizes$1.defaultBoxSize;
-      image = /*#__PURE__*/React.createElement(context$1.Consumer, null, ({
-        setAssetStatus
-      }) => /*#__PURE__*/React.createElement(SvgImage
-      // @ts-expect-error - TS2741 - Property 'alt' is missing in type '{ src: any; width: any; height: any; scale: number; responsive: false; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'.
-      , {
-        src: imageData.url,
-        width: imageData.width,
-        height: imageData.height,
-        scale: scale,
-        responsive: false,
-        setAssetStatus: setAssetStatus
-      }));
-    } else {
-      image = null;
-    }
-    return /*#__PURE__*/React.createElement("div", {
-      className: "graphie-container blank-background",
-      style: {
-        width: this.props.box[0],
-        height: this.props.box[1]
-      }
-      // @ts-expect-error - TS2339 - Property 'onMouseOut' does not exist on type 'Graph'.
-      ,
-      onMouseOut: this.onMouseOut
-      // @ts-expect-error - TS2339 - Property 'onMouseOver' does not exist on type 'Graph'.
-      ,
-      onMouseOver: this.onMouseOver
-      // @ts-expect-error - TS2339 - Property 'onClick' does not exist on type 'Graph'.
-      ,
-      onClick: this.onClick
-    }, image, /*#__PURE__*/React.createElement("div", {
-      className: "graphie",
-      ref: this.graphieDivRef
-    }));
-  }
-}
-Graph.defaultProps = {
-  labels: ["x", "y"],
-  range: [[-10, 10], [-10, 10]],
-  step: [1, 1],
-  gridStep: [1, 1],
-  snapStep: [0.5, 0.5],
-  markings: "graph",
-  backgroundImage: defaultBackgroundImage$1,
-  showProtractor: false,
-  showRuler: false,
-  rulerLabel: "",
-  rulerTicks: 10,
-  isMobile: false
-};
-
 const getPromptJSON$b = (props, userInput) => {
   var _props$backgroundImag;
   return {
@@ -28530,13 +28300,18 @@ function escapeIfUnescaped(character) {
   }
 }
 
-function AxisLabels() {
+function AxisLabels({
+  i18n
+}) {
   const {
     range,
     labels,
     width,
     height
   } = useGraphConfig();
+  const {
+    strings
+  } = i18n;
   const yAxisLabelLocation = [0, range[Y][MAX]];
   const xAxisLabelLocation = [range[X][MAX], 0];
   const [xAxisLabelText, yAxisLabelText] = labels;
@@ -28554,6 +28329,7 @@ function AxisLabels() {
     TeX
   } = getDependencies();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+    "aria-label": strings.xAxis,
     style: {
       position: "absolute",
       left: x1,
@@ -28562,6 +28338,7 @@ function AxisLabels() {
       transform: "translate(7px, -50%)"
     }
   }, /*#__PURE__*/React__default.createElement(TeX, null, replaceOutsideTeX(xAxisLabelText))), /*#__PURE__*/React__default.createElement("span", {
+    "aria-label": strings.yAxis,
     style: {
       position: "absolute",
       left: x2,
@@ -29371,7 +29148,6 @@ RangeInput.defaultProps = {
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   ButtonGroup: ButtonGroup,
-  Graph: Graph,
   Graphie: Graphie,
   HUD: HUD,
   Icon: Icon,
@@ -29512,9 +29288,9 @@ const LockedFunction = props => {
   const {
     color,
     strokeStyle,
-    directionalAxis,
-    domain
+    directionalAxis
   } = props;
+  const domain = props.domain ? [Number.isFinite(props.domain[0]) ? props.domain[0] : -Infinity, Number.isFinite(props.domain[1]) ? props.domain[1] : Infinity] : undefined;
   const plotProps = {
     color: lockedFigureColors[color],
     style: strokeStyle,
@@ -29594,6 +29370,11 @@ function Vector(props) {
 }
 
 function srFormatNumber(a, locale, maximumFractionDigits) {
+  const piBasedNumber = getPiMultiple(a);
+  if (piBasedNumber) {
+    return piBasedNumber;
+  }
+
   // adding zero here converts negative zero to positive zero.
   return (0 + a).toLocaleString(locale, {
     maximumFractionDigits: maximumFractionDigits != null ? maximumFractionDigits : 3,
@@ -29601,6 +29382,77 @@ function srFormatNumber(a, locale, maximumFractionDigits) {
   });
 }
 
+// Exported for testing
+function getPiMultiple(a) {
+  // - Save some calculations by checking if this is an integer first.
+  //   If a is an integer, it's definitely not a multiple of π.
+  // - 0 should not be presented as a multiple of π.
+  // - If a is greater than 1e12, then it thinks that it's always a
+  //   multiple of π even when it's not, due to rounding errors.
+  if (Number.isInteger(a) || a === 0 || a > 1e12) {
+    return null;
+  }
+
+  // Figure out the coefficient before the π.
+  // Example: If a = π/2, then piCoefficient = 0.5
+  // Example: If a = 2π, then piCoefficient = 2
+  const piCoefficient = a / Math.PI;
+  // Truncate the coefficient to account for floating point errors.
+  // π calculations are only accurate up to precision of 1e-12.
+  const truncatedCoefficient = parseFloat(piCoefficient.toFixed(12));
+
+  // If the coefficient is already an integer, then the number
+  // is a multiple of π. Return it here.
+  // Example: If a = 2π, then truncatedCoefficient = 2, so return "2π"
+  if (Number.isInteger(truncatedCoefficient)) {
+    // Return "π" rather than "1π".
+    if (truncatedCoefficient === 1) {
+      return "π";
+    }
+
+    // Return "-π" rather than "-1π".
+    if (truncatedCoefficient === -1) {
+      return "-π";
+    }
+    return truncatedCoefficient + "π";
+  }
+
+  // If the coefficient is not an integer, then we need to
+  // check if it's a multiple of π/2, π/3, π/4, or π/6.
+  // These are π-based values on a unit circle.
+  const acceptableDivisors = [2, 3, 4, 6];
+
+  // Loop through the acceptable divisors and check if the
+  // coefficient is a multiple of (1/divisor).
+  // Example: If a = 5π/6, the coeff is 5/6, which is a multiple of 1/6.
+  // So we return "5π/6".
+  for (const divisor of acceptableDivisors) {
+    // Check if the coefficient is a multiple of (1/divisor) by
+    // multiplying the coefficient by the divisor and checking if
+    // the result is an integer.
+    // Example: If a = 5π/6, then piCoefficient = 5/6. We multiply
+    // by 6 (divisor) to get 5, which is an integer.
+    const coefficientNumerator = parseFloat(
+    // π calculations are only accurate up to precision of 1e-12.
+    (piCoefficient * divisor).toFixed(12));
+    if (Number.isInteger(coefficientNumerator)) {
+      // Handle the case where the coefficient numberator is just 1.
+      // We don't want to write "π/6" as "1π/6"
+      if (coefficientNumerator === 1) {
+        return "π/" + divisor;
+      }
+
+      // Handle the case where the coefficient numberator is just -1.
+      // We don't want to write "π/6" as "-1π/6"
+      if (coefficientNumerator === -1) {
+        return "-π/" + divisor;
+      }
+      return coefficientNumerator + "π/" + divisor;
+    }
+  }
+  return null;
+}
+
 /**
  * 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.
@@ -30756,6 +30608,34 @@ function range(min, max, step = 1) {
   return result;
 }
 
+function Hairlines(props) {
+  const {
+    point
+  } = props;
+  const {
+    range
+  } = useGraphConfig();
+  const [[xMin, xMax], [yMin, yMax]] = range;
+  const [[x, y]] = useTransformVectorsToPixels(point);
+  const [[verticalStartX]] = useTransformVectorsToPixels([xMin, 0]);
+  const [[verticalEndX]] = useTransformVectorsToPixels([xMax, 0]);
+  const [[_, horizontalStartY]] = useTransformVectorsToPixels([0, yMin]);
+  const [[__, horizontalEndY]] = useTransformVectorsToPixels([0, yMax]);
+  return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+    x1: verticalStartX,
+    y1: y,
+    x2: verticalEndX,
+    y2: y,
+    stroke: color.blue
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: x,
+    y1: horizontalStartY,
+    x2: x,
+    y2: horizontalEndY,
+    stroke: color.blue
+  }));
+}
+
 // The hitbox size of 48px by 48px is preserved from the legacy interactive
 // graph.
 const hitboxSizePx = 48;
@@ -30766,7 +30646,6 @@ const hitboxSizePx = 48;
 const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
   var _Object$entries$find$, _Object$entries$find;
   const {
-    range,
     markings,
     showTooltips
   } = useGraphConfig();
@@ -30774,6 +30653,7 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
     point,
     color: color$1 = color.blue,
     dragging,
+    focused,
     cursor,
     showFocusRing,
     onClick = () => {}
@@ -30784,25 +30664,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 = classNames("movable-point", dragging && "movable-point--dragging", showFocusRing && "movable-point--focus");
   const [[x, y]] = useTransformVectorsToPixels(point);
-  const [[xMin, xMax], [yMin, yMax]] = range;
-  const [[verticalStartX]] = useTransformVectorsToPixels([xMin, 0]);
-  const [[verticalEndX]] = useTransformVectorsToPixels([xMax, 0]);
-  const [[_, horizontalStartY]] = useTransformVectorsToPixels([0, yMin]);
-  const [[__, horizontalEndY]] = useTransformVectorsToPixels([0, yMax]);
-  const showHairlines = dragging && markings !== "none";
-  const hairlines = /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
-    x1: verticalStartX,
-    y1: y,
-    x2: verticalEndX,
-    y2: y,
-    stroke: color$1
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: x,
-    y1: horizontalStartY,
-    x2: x,
-    y2: horizontalEndY,
-    stroke: color$1
-  }));
+  const showHairlines = (dragging || focused) && markings !== "none";
   const svgForPoint = /*#__PURE__*/React.createElement("g", {
     ref: hitboxRef,
     className: pointClasses,
@@ -30838,7 +30700,9 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
     },
     "data-testid": "movable-point__center"
   }));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, showHairlines && hairlines, showTooltips ? /*#__PURE__*/React.createElement(Tooltip$1, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showHairlines && /*#__PURE__*/React.createElement(Hairlines, {
+    point: point
+  }), showTooltips ? /*#__PURE__*/React.createElement(Tooltip$1, {
     autoUpdate: true,
     backgroundColor: wbColorName,
     content: `(${point[X]}, ${point[Y]})`,
@@ -30932,6 +30796,7 @@ function useControlPoint(params) {
     },
     point: point,
     dragging: dragging,
+    focused: focused,
     color: color,
     ref: visiblePointRef,
     showFocusRing: focused
@@ -31148,13 +31013,13 @@ const {
   getClockwiseAngle: getClockwiseAngle$2,
   polar: polar$1
 } = angles;
-function renderAngleGraph(state, dispatch) {
+function renderAngleGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React.createElement(AngleGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: null
+    interactiveElementsDescription: getAngleGraphDescription(state, i18n)
   };
 }
 function AngleGraph(props) {
@@ -31165,6 +31030,9 @@ function AngleGraph(props) {
   const {
     graphDimensionsInPixels
   } = useGraphConfig();
+  const i18n = usePerseusI18n();
+  const id = React.useId();
+  const descriptionId = id + "-description";
   const {
     coords,
     showAngles,
@@ -31213,76 +31081,106 @@ function AngleGraph(props) {
     showAngles: showAngles || false // Whether to show the angle or not
   };
 
+  // Aria strings
   const {
-    strings,
-    locale
-  } = usePerseusI18n();
-  const angleMeasure = srFormatNumber(getClockwiseAngle$2([endPoints[0], centerPoint, endPoints[1]], allowReflexAngles), locale);
-  const wholeAngleAriaLabel = strings.srAngleGraphAriaLabel;
-  const wholeAngleDescription = strings.srAngleGraphAriaDescription({
-    angleMeasure,
-    vertexX: srFormatNumber(coords[1][X], locale),
-    vertexY: srFormatNumber(coords[1][Y], locale),
-    startingSideX: srFormatNumber(coords[2][X], locale),
-    startingSideY: srFormatNumber(coords[2][Y], locale),
-    endingSideX: srFormatNumber(coords[0][X], locale),
-    endingSideY: srFormatNumber(coords[0][Y], locale)
-  });
-  const formatCoordinates = (x, y) => ({
-    x: srFormatNumber(x, locale),
-    y: srFormatNumber(y, locale)
-  });
-  const formatSideAriaLabel = (side, newPoint) => {
-    const formattedCoordinates = formatCoordinates(newPoint[X], newPoint[Y]);
-    const label = side === "terminal" ? strings.srAngleSideAtCoordinates(_extends({
-      point: 1,
-      side: "terminal side"
-    }, formattedCoordinates)) : strings.srAngleSideAtCoordinates(_extends({
-      point: 3,
-      side: "initial side"
-    }, formattedCoordinates));
-    return label;
-  };
-  const formatVertexAriaLabel = newPoint => {
-    const formattedVertexCoordinates = formatCoordinates(newPoint[X], newPoint[Y]);
-    const label = showAngles ? strings.srAngleVertexAtCoordinatesWithAngleMeasure(_extends({}, formattedVertexCoordinates, {
-      angleMeasure: angleMeasure
-    })) : strings.srAngleSideAtCoordinates(_extends({
-      point: 2,
-      side: "vertex"
-    }, formattedVertexCoordinates));
-    return label;
-  };
-  const initialSideAriaLabel = formatSideAriaLabel("initial", coords[2]);
-  const terminalSideAriaLabel = formatSideAriaLabel("terminal", coords[0]);
-  const vertexAriaLabel = formatVertexAriaLabel(coords[1]);
+    srAngleGraphAriaLabel,
+    srAngleGraphAriaDescription,
+    srAngleStartingSide,
+    srAngleEndingSide,
+    srAngleVertex
+  } = describeAngleGraph(graphState, i18n);
 
   // Render the lines, angle, and then movable points
   return /*#__PURE__*/React.createElement("g", {
-    "aria-label": wholeAngleAriaLabel,
-    "aria-describedby": "angle-description"
+    "aria-label": srAngleGraphAriaLabel,
+    "aria-describedby": descriptionId
   }, svgLines, /*#__PURE__*/React.createElement(Angle, angleParams), /*#__PURE__*/React.createElement(MovablePoint$1, {
     point: coords[1],
     sequenceNumber: 1,
     constrain: p => p,
     onMove: destination => dispatch(actions.angle.movePoint(1, destination)),
-    ariaLabel: vertexAriaLabel
+    ariaLabel: srAngleVertex
   }), /*#__PURE__*/React.createElement(MovablePoint$1, {
     point: coords[0],
     sequenceNumber: 2,
     constrain: getAngleSideConstraint(coords[0], coords[1], snapDegrees || 1),
     onMove: destination => dispatch(actions.angle.movePoint(0, destination)),
-    ariaLabel: terminalSideAriaLabel
+    ariaLabel: srAngleEndingSide
   }), /*#__PURE__*/React.createElement(MovablePoint$1, {
     point: coords[2],
     sequenceNumber: 3,
     constrain: getAngleSideConstraint(coords[2], coords[1], snapDegrees || 1),
     onMove: destination => dispatch(actions.angle.movePoint(2, destination)),
-    ariaLabel: initialSideAriaLabel
+    ariaLabel: srAngleStartingSide
   }), /*#__PURE__*/React.createElement("g", {
-    id: "angle-description",
+    id: descriptionId,
     style: a11y.srOnly
-  }, wholeAngleDescription));
+  }, srAngleGraphAriaDescription));
+}
+function getAngleGraphDescription(state, i18n) {
+  const {
+    strings,
+    locale
+  } = i18n;
+  const {
+    coords
+  } = state;
+  return strings.srInteractiveElements({
+    elements: strings.srAngleInteractiveElements({
+      vertexX: srFormatNumber(coords[1][X], locale),
+      vertexY: srFormatNumber(coords[1][Y], locale),
+      startingSideX: srFormatNumber(coords[2][X], locale),
+      startingSideY: srFormatNumber(coords[2][Y], locale),
+      endingSideX: srFormatNumber(coords[0][X], locale),
+      endingSideY: srFormatNumber(coords[0][Y], locale)
+    })
+  });
+}
+function describeAngleGraph(state, i18n) {
+  const {
+    strings,
+    locale
+  } = i18n;
+  const {
+    coords,
+    allowReflexAngles,
+    showAngles
+  } = state;
+  const [endingSide, vertex, startingSide] = coords;
+  const angleMeasure = srFormatNumber(getClockwiseAngle$2(coords, allowReflexAngles), locale);
+  const srAngleGraphAriaLabel = strings.srAngleGraphAriaLabel;
+  const srAngleGraphAriaDescription = strings.srAngleGraphAriaDescription({
+    angleMeasure,
+    vertexX: srFormatNumber(vertex[X], locale),
+    vertexY: srFormatNumber(vertex[Y], locale),
+    startingSideX: srFormatNumber(startingSide[X], locale),
+    startingSideY: srFormatNumber(startingSide[Y], locale),
+    endingSideX: srFormatNumber(endingSide[X], locale),
+    endingSideY: srFormatNumber(endingSide[Y], locale)
+  });
+  const srAngleStartingSide = strings.srAngleStartingSide({
+    x: srFormatNumber(startingSide[X], locale),
+    y: srFormatNumber(startingSide[Y], locale)
+  });
+  const srAngleEndingSide = strings.srAngleEndingSide({
+    x: srFormatNumber(endingSide[X], locale),
+    y: srFormatNumber(endingSide[Y], locale)
+  });
+  const srAngleVertex = showAngles ? strings.srAngleVertexWithAngleMeasure({
+    x: srFormatNumber(vertex[X], locale),
+    y: srFormatNumber(vertex[Y], locale),
+    angleMeasure
+  }) : strings.srAngleVertex({
+    x: srFormatNumber(vertex[X], locale),
+    y: srFormatNumber(vertex[Y], locale)
+  });
+  return {
+    srAngleGraphAriaLabel,
+    srAngleGraphAriaDescription,
+    srAngleStartingSide,
+    srAngleEndingSide,
+    srAngleVertex
+  };
 }
 const positiveX = [1, 0];
 const negativeX = [-1, 0];
@@ -31413,17 +31311,16 @@ function getRadius(graph) {
   return Math.sqrt(Math.pow(edgeX - centerX, 2) + Math.pow(edgeY - centerY, 2));
 }
 
-function renderCircleGraph(state, dispatch) {
+function renderCircleGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React.createElement(CircleGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: /*#__PURE__*/React.createElement(CircleGraphDescription, {
-      state: state
-    })
+    interactiveElementsDescription: getCircleGraphDescription(state, i18n)
   };
 }
+// Exported for testing
 function CircleGraph(props) {
   const {
     dispatch,
@@ -31516,6 +31413,7 @@ function MovableCircle(props) {
     snapStep,
     disableKeyboardInteraction
   } = useGraphConfig();
+  const [focused, setFocused] = React.useState(false);
   const draggableRef = useRef(null);
   const {
     dragging
@@ -31534,7 +31432,9 @@ function MovableCircle(props) {
     ref: draggableRef,
     role: "button",
     tabIndex: disableKeyboardInteraction ? -1 : 0,
-    className: `movable-circle ${dragging ? "movable-circle--dragging" : ""}`
+    className: `movable-circle ${dragging ? "movable-circle--dragging" : ""}`,
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false)
   }, /*#__PURE__*/React.createElement("ellipse", {
     className: "focus-ring",
     cx: centerPx[X],
@@ -31549,19 +31449,29 @@ function MovableCircle(props) {
     rx: radiiPx[X],
     ry: radiiPx[Y]
   }), /*#__PURE__*/React.createElement(DragHandle, {
-    center: center
+    center: center,
+    dragging: dragging,
+    focused: focused
   }));
 }
 const dragHandleDimensions = [24, 14];
 const dragHandleDotPositions = crossProduct([-4.4, 0, 4.4], [-2.1, 2.1]);
 function DragHandle(props) {
   const {
-    center
+    center,
+    dragging,
+    focused
   } = props;
-  const cornerRadius = Math.min(...dragHandleDimensions) / 2;
   const [centerPx] = useTransformVectorsToPixels(center);
+  const {
+    markings
+  } = useGraphConfig();
+  const cornerRadius = Math.min(...dragHandleDimensions) / 2;
   const topLeft = vec.sub(centerPx, vec.scale(dragHandleDimensions, 0.5));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
+  const showHairlines = (dragging || focused) && markings !== "none";
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showHairlines && /*#__PURE__*/React.createElement(Hairlines, {
+    point: center
+  }), /*#__PURE__*/React.createElement("rect", {
     className: "movable-circle-handle",
     x: topLeft[X],
     y: topLeft[Y],
@@ -31588,13 +31498,7 @@ function crossProduct(as, bs) {
   }
   return result;
 }
-function CircleGraphDescription({
-  state
-}) {
-  // The reason that CircleGraphDescription is a component (rather than a
-  // function that returns a string) is because it needs to use a
-  // hook: `usePerseusI18n`.
-  const i18n = usePerseusI18n();
+function getCircleGraphDescription(state, i18n) {
   const strings = describeCircleGraph(state, i18n);
   return strings.srCircleInteractiveElement;
 }
@@ -31647,15 +31551,13 @@ function describeCircleGraph(state, i18n) {
   };
 }
 
-function renderLinearGraph(state, dispatch) {
+function renderLinearGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React.createElement(LinearGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: /*#__PURE__*/React.createElement(LinearGraphDescription, {
-      state: state
-    })
+    interactiveElementsDescription: getLinearGraphDescription(state, i18n)
   };
 }
 const LinearGraph = (props, key) => {
@@ -31720,13 +31622,7 @@ const LinearGraph = (props, key) => {
     style: a11y.srOnly
   }, slopeString));
 };
-function LinearGraphDescription({
-  state
-}) {
-  // The reason that LinearGraphDescription is a component (rather than a
-  // function that returns a string) is because it needs to use a
-  // hook: `usePerseusI18n`.
-  const i18n = usePerseusI18n();
+function getLinearGraphDescription(state, i18n) {
   const strings = describeLinearGraph(state, i18n);
   return strings.srLinearInteractiveElement;
 }
@@ -31770,15 +31666,13 @@ function describeLinearGraph(state, i18n) {
   };
 }
 
-function renderLinearSystemGraph(state, dispatch) {
+function renderLinearSystemGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React.createElement(LinearSystemGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: /*#__PURE__*/React.createElement(LinearSystemGraphDescription, {
-      state: state
-    })
+    interactiveElementsDescription: getLinearSystemGraphDescription(state, i18n)
   };
 }
 const LinearSystemGraph = props => {
@@ -31865,18 +31759,9 @@ const LinearSystemGraph = props => {
     style: a11y.srOnly
   }, slopeDescription))));
 };
-function LinearSystemGraphDescription({
-  state
-}) {
-  // The reason that LinearSystemGraphDescription is a component (rather
-  // than a function that returns a string) is because it needs to use a
-  // hook: `usePerseusI18n`.
-  const i18n = usePerseusI18n();
-  return describeLinearSystemGraph(state, i18n);
-}
 
 // Exported for testing
-function describeLinearSystemGraph(state, i18n) {
+function getLinearSystemGraphDescription(state, i18n) {
   const {
     strings,
     locale
@@ -31902,15 +31787,13 @@ function describeLinearSystemGraph(state, i18n) {
   });
 }
 
-function renderPointGraph(state, dispatch) {
+function renderPointGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React.createElement(PointGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: /*#__PURE__*/React.createElement(PointGraphDescription, {
-      state: state
-    })
+    interactiveElementsDescription: getPointGraphDescription(state, i18n)
   };
 }
 function PointGraph(props) {
@@ -31933,7 +31816,9 @@ function PointGraph(props) {
       var _pointsRef$current$fo;
       (_pointsRef$current$fo = pointsRef.current[focusedIndex]) == null || _pointsRef$current$fo.focus();
     }
-  }, [props.graphState.focusedPointIndex, pointsRef]);
+  }, [props.graphState.focusedPointIndex,
+  // Ensure that we re-focus if a point is deleted.
+  props.graphState.coords.length, pointsRef]);
   const statefulProps = _extends({}, props, {
     graphConfig,
     pointsRef,
@@ -32004,17 +31889,9 @@ function UnlimitedPointGraph(statefulProps) {
     }
   })));
 }
-function PointGraphDescription({
-  state
-}) {
-  // PointGraphDescription needs to `usePerseusI18n`, so it has to be a
-  // component rather than a function that simply returns a string.
-  const i18n = usePerseusI18n();
-  return describePointGraph(state, i18n);
-}
 
 // Exported for testing
-function describePointGraph(state, i18n) {
+function getPointGraphDescription(state, i18n) {
   const {
     strings,
     locale
@@ -32101,7 +31978,9 @@ const PolygonGraph = props => {
       var _pointsRef$current$fo;
       (_pointsRef$current$fo = pointsRef.current[focusedIndex]) == null || _pointsRef$current$fo.focus();
     }
-  }, [props.graphState.focusedPointIndex, pointsRef]);
+  }, [props.graphState.focusedPointIndex,
+  // Ensure that we re-focus if a point is deleted.
+  props.graphState.coords.length, pointsRef]);
 
   // If the unlimited polygon is rendered with 3 or more coordinates
   // Close the polygon, but only on first render.
@@ -32681,15 +32560,13 @@ function describeQuadraticGraph(state, i18n) {
   };
 }
 
-function renderRayGraph(state, dispatch) {
+function renderRayGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React.createElement(RayGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: /*#__PURE__*/React.createElement(RayGraphDescription, {
-      state: state
-    })
+    interactiveElementsDescription: getRayGraphDescription(state, i18n)
   };
 }
 const RayGraph = props => {
@@ -32743,13 +32620,7 @@ const RayGraph = props => {
     style: a11y.srOnly
   }, srRayPoints));
 };
-function RayGraphDescription({
-  state
-}) {
-  // The reason that RayGraphDescription is a component (rather than a
-  // function that returns a string) is because it needs to use a
-  // hook: `usePerseusI18n`.
-  const i18n = usePerseusI18n();
+function getRayGraphDescription(state, i18n) {
   const strings = describeRayGraph(state, i18n);
   return strings.srRayInteractiveElement;
 }
@@ -32799,15 +32670,13 @@ function describeRayGraph(state, i18n) {
   };
 }
 
-function renderSegmentGraph(state, dispatch) {
+function renderSegmentGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React.createElement(SegmentGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: /*#__PURE__*/React.createElement(SegmentGraphDescription, {
-      state: state
-    })
+    interactiveElementsDescription: getSegmentGraphDescription(state, i18n)
   };
 }
 const SegmentGraph = ({
@@ -32899,18 +32768,9 @@ const SegmentGraph = ({
 function getLengthOfSegment(segment) {
   return point.distanceToPoint(...segment);
 }
-function SegmentGraphDescription({
-  state
-}) {
-  // The reason that SegmentGraphDescription is a component (rather than a
-  // function that returns a string) is because it needs to use a
-  // hook: `usePerseusI18n`.
-  const i18n = usePerseusI18n();
-  return describeSegmentGraph(state, i18n);
-}
 
 // Exported for testing
-function describeSegmentGraph(state, i18n) {
+function getSegmentGraphDescription(state, i18n) {
   const {
     strings,
     locale
@@ -32927,13 +32787,13 @@ function describeSegmentGraph(state, i18n) {
   });
 }
 
-function renderSinusoidGraph(state, dispatch) {
+function renderSinusoidGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React.createElement(SinusoidGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: null
+    interactiveElementsDescription: getSinusoidDescription(state, i18n)
   };
 }
 function SinusoidGraph(props) {
@@ -32941,6 +32801,9 @@ function SinusoidGraph(props) {
     dispatch,
     graphState
   } = props;
+  const i18n = usePerseusI18n();
+  const id = React.useId();
+  const descriptionId = id + "-description";
 
   // Destructure the coordinates from the graph state
   // Note: The order of the coordinates is important:
@@ -32965,15 +32828,30 @@ function SinusoidGraph(props) {
   if (coeffs !== undefined) {
     coeffRef.current = coeffs;
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Plot$2.OfX, {
+
+  // Aria strings
+  const {
+    srSinusoidGraph,
+    srSinusoidDescription,
+    srSinusoidRootPoint,
+    srSinusoidPeakPoint
+  } = describeSinusoidGraph(graphState, i18n);
+  return /*#__PURE__*/React.createElement("g", {
+    // Outer graph minimal description
+    "aria-label": srSinusoidGraph,
+    "aria-describedby": descriptionId
+  }, /*#__PURE__*/React.createElement(Plot$2.OfX, {
     y: x => computeSine(x, coeffRef.current),
     color: color.blue
   }), coords.map((coord, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
+    ariaLabel: i === 0 ? srSinusoidRootPoint : srSinusoidPeakPoint,
     key: "point-" + i,
     point: coord,
     sequenceNumber: i + 1,
     onMove: destination => dispatch(actions.sinusoid.movePoint(i, destination))
-  })));
+  })), /*#__PURE__*/React.createElement("g", {
+    id: descriptionId
+  }, srSinusoidDescription));
 }
 
 // Plot a sinusoid of the form: f(x) = a * sin(b * x - c) + d
@@ -33011,6 +32889,52 @@ const getSinusoidCoefficients$1 = coords => {
     verticalOffset
   };
 };
+function getSinusoidDescription(state, i18n) {
+  const strings = describeSinusoidGraph(state, i18n);
+  return strings.srSinusoidInteractiveElements;
+}
+function describeSinusoidGraph(state, i18n) {
+  const {
+    strings,
+    locale
+  } = i18n;
+  const {
+    coords
+  } = state;
+  const [root, peak] = coords;
+  const diffX = Math.abs(peak[X] - root[X]);
+  const diffY = Math.abs(peak[Y] - root[Y]);
+  const srSinusoidGraph = strings.srSinusoidGraph;
+  const srSinusoidDescription = strings.srSinusoidDescription({
+    minValue: srFormatNumber(root[Y] - diffY, locale),
+    maxValue: srFormatNumber(root[Y] + diffY, locale),
+    cycleStart: srFormatNumber(root[X] - 2 * diffX, locale),
+    cycleEnd: srFormatNumber(root[X] + 2 * diffX, locale)
+  });
+  const srSinusoidRootPoint = strings.srSinusoidRootPoint({
+    x: srFormatNumber(root[X], locale),
+    y: srFormatNumber(root[Y], locale)
+  });
+  const srSinusoidPeakPoint = strings.srSinusoidPeakPoint({
+    x: srFormatNumber(peak[X], locale),
+    y: srFormatNumber(peak[Y], locale)
+  });
+  const srSinusoidInteractiveElements = strings.srInteractiveElements({
+    elements: strings.srSinusoidInteractiveElements({
+      point1X: srFormatNumber(root[X], locale),
+      point1Y: srFormatNumber(root[Y], locale),
+      point2X: srFormatNumber(peak[X], locale),
+      point2Y: srFormatNumber(peak[Y], locale)
+    })
+  });
+  return {
+    srSinusoidGraph,
+    srSinusoidDescription,
+    srSinusoidRootPoint,
+    srSinusoidPeakPoint,
+    srSinusoidInteractiveElements
+  };
+}
 
 const {
   calculateAngleInDegrees,
@@ -33181,6 +33105,7 @@ const MafsGraph = props => {
   const descriptionId = `interactive-graph-description-${uniqueId}`;
   const interactiveElementsDescriptionId = `interactive-graph-interactive-elements-description-${uniqueId}`;
   const unlimitedGraphKeyboardPromptId = `unlimited-graph-keyboard-prompt-${uniqueId}`;
+  const instructionsId = `instructions-${uniqueId}`;
   const graphRef = React.useRef(null);
   const {
     analytics
@@ -33208,6 +33133,7 @@ const MafsGraph = props => {
   const interactionPrompt = isUnlimitedGraphState(state) && state.showKeyboardInteractionInvitation;
   useOnMountEffect(() => {
     analytics.onAnalyticsEvent({
+      // TODO(LEMS-2827): Remove analytics event in LEMS-2827 in favor of ti below.
       type: "perseus:interactive-graph-widget:rendered",
       payload: {
         type,
@@ -33215,6 +33141,14 @@ const MafsGraph = props => {
         widgetId: "interactive-graph"
       }
     });
+    analytics.onAnalyticsEvent({
+      type: "perseus:widget:rendered:ti",
+      payload: {
+        widgetSubType: type,
+        widgetType: "INTERACTIVE_GRAPH",
+        widgetId: "interactive-graph"
+      }
+    });
   });
   const {
     graph,
@@ -33258,7 +33192,7 @@ const MafsGraph = props => {
       handleKeyboardEvent(event, state, dispatch);
     },
     "aria-label": fullGraphAriaLabel,
-    "aria-describedby": describedByIds(fullGraphAriaDescription && descriptionId, interactiveElementsDescription && interactiveElementsDescriptionId, isUnlimitedGraphState(state) && unlimitedGraphKeyboardPromptId),
+    "aria-describedby": describedByIds(fullGraphAriaDescription && descriptionId, interactiveElementsDescription && interactiveElementsDescriptionId, isUnlimitedGraphState(state) && unlimitedGraphKeyboardPromptId, state.type !== "none" && instructionsId),
     ref: graphRef,
     tabIndex: 0,
     onFocus: event => {
@@ -33275,7 +33209,11 @@ const MafsGraph = props => {
     id: interactiveElementsDescriptionId,
     tabIndex: -1,
     className: "mafs-sr-only"
-  }, interactiveElementsDescription), /*#__PURE__*/React.createElement(LegacyGrid, {
+  }, interactiveElementsDescription), state.type !== "none" && /*#__PURE__*/React.createElement(View, {
+    id: instructionsId,
+    tabIndex: -1,
+    className: "mafs-sr-only"
+  }, isUnlimitedGraphState(state) ? strings.srUnlimitedGraphInstructions : strings.srGraphInstructions), /*#__PURE__*/React.createElement(LegacyGrid, {
     box: props.box,
     backgroundImage: props.backgroundImage
   }), /*#__PURE__*/React.createElement(View, {
@@ -33284,7 +33222,9 @@ const MafsGraph = props => {
       bottom: 0,
       left: 0
     }
-  }, (props.markings === "graph" || props.markings === "axes") && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisLabels, null)), /*#__PURE__*/React.createElement(View
+  }, (props.markings === "graph" || props.markings === "axes") && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisLabels, {
+    i18n: i18n
+  })), /*#__PURE__*/React.createElement(View
   // If we have locked figures, we set aria-hidden
   // to false so that screen readers can read the
   // locked figures. If we don't have any locked
@@ -33622,25 +33562,25 @@ const renderGraphElements = props => {
   } = state;
   switch (type) {
     case "angle":
-      return renderAngleGraph(state, dispatch);
+      return renderAngleGraph(state, dispatch, i18n);
     case "segment":
-      return renderSegmentGraph(state, dispatch);
+      return renderSegmentGraph(state, dispatch, i18n);
     case "linear-system":
-      return renderLinearSystemGraph(state, dispatch);
+      return renderLinearSystemGraph(state, dispatch, i18n);
     case "linear":
-      return renderLinearGraph(state, dispatch);
+      return renderLinearGraph(state, dispatch, i18n);
     case "ray":
-      return renderRayGraph(state, dispatch);
+      return renderRayGraph(state, dispatch, i18n);
     case "polygon":
       return renderPolygonGraph(state, dispatch, i18n, markings);
     case "point":
-      return renderPointGraph(state, dispatch);
+      return renderPointGraph(state, dispatch, i18n);
     case "circle":
-      return renderCircleGraph(state, dispatch);
+      return renderCircleGraph(state, dispatch, i18n);
     case "quadratic":
       return renderQuadraticGraph(state, dispatch, i18n);
     case "sinusoid":
-      return renderSinusoidGraph(state, dispatch);
+      return renderSinusoidGraph(state, dispatch, i18n);
     case "none":
       return {
         graph: null,
@@ -34037,13 +33977,13 @@ const {
   polar
 } = angles;
 const {
-  angleMeasures: angleMeasures$1,
-  ccw: ccw$1,
-  lawOfCosines: lawOfCosines$1,
+  angleMeasures,
+  ccw,
+  lawOfCosines,
   magnitude: magnitude$1,
   polygonSidesIntersect,
   reverseVector,
-  sign: sign$1,
+  sign,
   vector: vector$1
 } = geometry;
 const {
@@ -34527,7 +34467,7 @@ function doAddPoint(state, action) {
   return _extends({}, state, {
     hasBeenInteractedWith: true,
     coords: newCoords,
-    showRemovePointButton: false,
+    showRemovePointButton: true,
     focusedPointIndex: newCoords.length - 1
   });
 }
@@ -34535,16 +34475,11 @@ function doRemovePoint(state, action) {
   if (!isUnlimitedGraphState(state)) {
     return state;
   }
-  let nextFocusedPointIndex;
-  if (state.interactionMode === "mouse") {
-    nextFocusedPointIndex = null;
-  } else {
-    nextFocusedPointIndex = state.coords.length > 1 ? state.coords.length - 2 : null;
-  }
+  const nextFocusedPointIndex = state.coords.length > 1 ? state.coords.length - 2 : null;
   return _extends({}, state, {
     coords: state.coords.filter((_, i) => i !== action.index),
     focusedPointIndex: nextFocusedPointIndex,
-    showRemovePointButton: false
+    showRemovePointButton: nextFocusedPointIndex !== null ? true : false
   });
 }
 const getDeltaVertex = (maxMoves, minMoves, delta) => {
@@ -34568,7 +34503,7 @@ const getChange = (coords, delta, constraintOpts) => {
   return [dx, dy];
 };
 // Less than or approximately equal
-function leq$1(a, b) {
+function leq(a, b) {
   return a < b || approximateEqual(a, b);
 }
 function boundAndSnapToGrid(point, {
@@ -34713,7 +34648,7 @@ function boundAndSnapToPolygonAngle(destinationPoint, {
   });
 
   // Gets the radian angles between the coords and maps them to degrees
-  const angles = angleMeasures$1(coordsCopy).map(angle => angle * 180 / Math.PI);
+  const angles = angleMeasures(coordsCopy).map(angle => angle * 180 / Math.PI);
 
   // Gets the relative index of a point
   const rel = j => {
@@ -34733,7 +34668,7 @@ function boundAndSnapToPolygonAngle(destinationPoint, {
 
   // Avoid degenerate triangles
   if (innerAngles.some(function (angle) {
-    return leq$1(angle, 1);
+    return leq(angle, 1);
   })) {
     return startingPoint;
   }
@@ -34747,7 +34682,7 @@ function boundAndSnapToPolygonAngle(destinationPoint, {
   // we want to add the inner angle to the outer angle, and if it's on the right,
   // we want to subtract the inner angle from the outer angle. The angle solved
   // for is then used in the polar function to determine the new point.
-  const onLeft = sign$1(ccw$1(coordsCopy[rel(-1)], coordsCopy[rel(1)], coordsCopy[index])) === 1;
+  const onLeft = sign(ccw(coordsCopy[rel(-1)], coordsCopy[rel(1)], coordsCopy[index])) === 1;
 
   // Solve for side by using the law of sines
   const side = Math.sin(innerAngles[1] * Math.PI / 180) / Math.sin(innerAngles[2] * Math.PI / 180) * knownSide;
@@ -34794,13 +34729,13 @@ function boundAndSnapToSides(destinationPoint, {
   });
 
   // Avoid degenerate triangles
-  if (leq$1(sides[1] + sides[2], sides[0]) || leq$1(sides[0] + sides[2], sides[1]) || leq$1(sides[0] + sides[1], sides[2])) {
+  if (leq(sides[1] + sides[2], sides[0]) || leq(sides[0] + sides[2], sides[1]) || leq(sides[0] + sides[1], sides[2])) {
     return startingPoint;
   }
 
   // Solve for angle by using the law of cosines
   // Angle at the first vertex of the polygon
-  const innerAngle = lawOfCosines$1(sides[0], sides[2], sides[1]);
+  const innerAngle = lawOfCosines(sides[0], sides[2], sides[1]);
 
   // Angle at the second vertex of the polygon
   const outerAngle = getAngleFromVertex(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
@@ -34811,7 +34746,7 @@ function boundAndSnapToSides(destinationPoint, {
   // we want to add the inner angle to the outer angle, and if it's on the right,
   // we want to subtract the inner angle from the outer angle. The angle solved
   // for is then used in the polar function to determine the new point.
-  const onLeft = sign$1(ccw$1(coordsCopy[rel(-1)], coordsCopy[rel(1)], coordsCopy[index])) === 1;
+  const onLeft = sign(ccw(coordsCopy[rel(-1)], coordsCopy[rel(1)], coordsCopy[index])) === 1;
 
   // Uses the length of the first side of the polygon (radial coordinate)
   // and the angle between the first and second sides of the
@@ -34946,19 +34881,11 @@ const {
   getClockwiseAngle
 } = angles;
 const {
-  angleMeasures,
-  ccw,
-  collinear,
   getLineEquation,
   getLineIntersection,
-  intersects,
-  lawOfCosines,
   magnitude,
-  rotate,
-  sign,
   vector
 } = geometry;
-const TRASH_ICON_URI = "https://ka-perseus-graphie.s3.amazonaws.com/b1452c0d79fd0f7ff4c3af9488474a0a0decb361.png";
 const defaultBackgroundImage = {
   url: null
 };
@@ -34967,31 +34894,9 @@ const UNLIMITED = "unlimited";
 // Sample background image:
 // https://ka-perseus-graphie.s3.amazonaws.com/29c1b0fcd17fe63df0f148fe357044d5d5c7d0bb.png
 
-// default to defaultValue if actual is null or undefined
-function defaultVal(actual, defaultValue) {
-  return actual == null ? defaultValue : actual;
-}
-
-// Less than or approximately equal
-function leq(a, b) {
-  return a < b || approximateEqual(a, b);
-}
-function capitalize(str) {
-  return str.replace(/(?:^|-)(.)/g, function (match, letter) {
-    return letter.toUpperCase();
-  });
-}
 function numSteps(range, step) {
   return Math.floor((range[1] - range[0]) / step);
 }
-const _getShouldShowInstructions = props => {
-  return _isClickToAddPoints(props) && (
-  // @ts-expect-error - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'. | TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'.
-  props.graph.coords == null || props.graph.coords.length === 0);
-};
-const _isClickToAddPoints = props => {
-  return props.graph.type === "point" && props.graph.numPoints === UNLIMITED || props.graph.type === "polygon" && props.graph.numSides === UNLIMITED;
-};
 const makeInvalidTypeError = (functionName, graphType) => {
   return new PerseusError(`${functionName} called but current graph type is not a '${graphType}'`, Errors.NotAllowed, {
     metadata: {
@@ -35032,1236 +34937,16 @@ function getQuadraticCoefficients(coords) {
   const c = (p2[0] * p3[0] * (p2[0] - p3[0]) * p1[1] + p3[0] * p1[0] * (p3[0] - p1[0]) * p2[1] + p1[0] * p2[0] * (p1[0] - p2[0]) * p3[1]) / denom;
   return [a, b, c];
 }
-
-// (LEMS-2190): Move the Mafs Angle Graph coordinate reversal logic in interactive-graph-state.ts
-// to this file when we remove the legacy graph. This logic allows us to support bi-directional angles
-// for the new (non-reflexive) Mafs graphs, while maintaining the same scoring behaviour as the legacy graph.
-// Once the legacy graph is removed, we should move this logic directly into the validate function below.
-class LegacyInteractiveGraph extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.angle = void 0;
-    this.circle = void 0;
-    this.graphie = void 0;
-    this.horizHairline = void 0;
-    this.line = void 0;
-    this.lines = void 0;
-    this.parabola = void 0;
-    this.pointA = void 0;
-    this.pointB = void 0;
-    this.pointC = void 0;
-    // @ts-expect-error - TS2564 - Property 'points' has no initializer and is not definitely assigned in the constructor.
-    this.points = void 0;
-    this.polygon = void 0;
-    // @ts-expect-error - TS2564 - Property 'shouldResetGraphie' has no initializer and is not definitely assigned in the constructor.
-    this.shouldResetGraphie = void 0;
-    this.sinusoid = void 0;
-    this.trashCan = void 0;
-    this.vertHairline = void 0;
-    this.state = {
-      shouldShowInstructions: _getShouldShowInstructions(this.props)
-    };
-    this._getShouldShowInstructions = props => {
-      props = props || this.props;
-      return this.isClickToAddPoints(props) && (
-      // @ts-expect-error - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'. | TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'.
-      props.graph.coords == null || props.graph.coords.length === 0);
-    };
-    this.setGraphie = newGraphie => {
-      this.graphie = newGraphie;
-      this.setupGraphie();
-    };
-    this.handleAddPointsMouseDown = coord => {
-      // This function should only be called when this.isClickToAddPoints()
-      // is true
-      if (!this.isClickToAddPoints()) {
-        throw new PerseusError("handleAddPointsClick should not be registered" + "when isClickToAddPoints() is false", Errors.NotAllowed);
-      }
-      if (!this.isCoordInTrash(coord)) {
-        let point;
-        if (this.props.graph.type === "point") {
-          point = this.createPointForPointsType(coord, this.points.length);
-          if (!point.constrain()) {
-            point.remove();
-            return;
-          }
-          this.points.push(point);
-
-          // interactive2 allows us to grab the point
-          const idx = this.points.length - 1;
-          this.points[idx].grab(coord);
-          this.updateCoordsFromPoints();
-        } else if (this.props.graph.type === "polygon") {
-          var _this$polygon;
-          if ((_this$polygon = this.polygon) != null && _this$polygon.closed()) {
-            return;
-          }
-          point = this.createPointForPolygonType(coord, this.points.length);
-          this.points.push(point);
-          const idx = this.points.length - 1;
-          this.points[idx].grab(coord);
-
-          // We don't call updateCoordsFromPoints for
-          // polygons, since the polygon won't be
-          // closed yet.
-          this.updatePolygon();
-        }
-        this.setState({
-          shouldShowInstructions: false
-        });
-      }
-    };
-    this.resetGraphie = () => {
-      var _this$refs$graph;
-      this.shouldResetGraphie = false;
-      this.parabola = null;
-      this.sinusoid = null;
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'reset' does not exist on type 'ReactInstance'.
-      (_this$refs$graph = this.refs.graph) == null || _this$refs$graph.reset();
-    };
-    this.setupGraphie = () => {
-      this.setTrashCanVisibility(0);
-      if (this.isClickToAddPoints()) {
-        this.setTrashCanVisibility(0.5);
-      }
-      if (this.props.apiOptions.isMobile) {
-        var _this$horizHairline, _this$vertHairline;
-        this.horizHairline = new WrappedLine(this.graphie, [0, 0], [0, 0], {
-          normalStyle: {
-            strokeWidth: 1
-          }
-        });
-        this.horizHairline.attr({
-          stroke: KhanColors.INTERACTIVE
-        });
-        (_this$horizHairline = this.horizHairline) == null || _this$horizHairline.hide();
-        this.vertHairline = new WrappedLine(this.graphie, [0, 0], [0, 0], {
-          normalStyle: {
-            strokeWidth: 1
-          }
-        });
-        this.vertHairline.attr({
-          stroke: KhanColors.INTERACTIVE
-        });
-        (_this$vertHairline = this.vertHairline) == null || _this$vertHairline.hide();
-      }
-      const type = this.props.graph.type;
-      this["add" + capitalize(type) + "Controls"]();
-    };
-    this.showHairlines = point => {
-      if (this.props.apiOptions.isMobile && this.props.markings !== "none") {
-        var _this$horizHairline2, _this$horizHairline3, _this$vertHairline2, _this$vertHairline3;
-        // Hairlines are already initialized when the graph is loaded, so
-        // here we just move them to the updated location and make them
-        // visible.
-        (_this$horizHairline2 = this.horizHairline) == null || _this$horizHairline2.moveTo([this.props.range[0][0], point[1]], [this.props.range[0][1], point[1]]);
-        (_this$horizHairline3 = this.horizHairline) == null || _this$horizHairline3.show();
-        (_this$vertHairline2 = this.vertHairline) == null || _this$vertHairline2.moveTo([point[0], this.props.range[1][0]], [point[0], this.props.range[1][1]]);
-        (_this$vertHairline3 = this.vertHairline) == null || _this$vertHairline3.show();
-      }
-    };
-    this.hideHairlines = () => {
-      if (this.props.apiOptions.isMobile) {
-        var _this$horizHairline4, _this$vertHairline4;
-        (_this$horizHairline4 = this.horizHairline) == null || _this$horizHairline4.hide();
-        (_this$vertHairline4 = this.vertHairline) == null || _this$vertHairline4.hide();
-      }
-    };
-    this.setTrashCanVisibility = opacity => {
-      const graphie = this.graphie;
-      if (number.equal(opacity, 0)) {
-        if (this.trashCan) {
-          this.trashCan.remove();
-          this.trashCan = null;
-        }
-      } else if (!this.props.apiOptions.isMobile) {
-        var _this$trashCan;
-        // Only if trash tooltips are not being used, we initialize the old
-        // trash can area.
-        if (!this.trashCan) {
-          var _graphie$raphael;
-          this.trashCan = graphie == null || (_graphie$raphael = graphie.raphael) == null ? void 0 : _graphie$raphael.image(TRASH_ICON_URI, graphie.xpixels - 40, graphie.ypixels - 40, 40, 40);
-        }
-        (_this$trashCan = this.trashCan) == null || _this$trashCan.attr({
-          opacity: opacity
-        });
-      }
-    };
-    this.isClickToAddPoints = props => {
-      props = props || this.props;
-      return _isClickToAddPoints(props);
-    };
-    this._lineStroke = () => {
-      // This should probably use: this.props.apiOptions.isMobile
-      // @ts-expect-error - TS2339 - Property 'isMobile' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
-      return this.props.isMobile ? {
-        "stroke-width": 3
-      } : {};
-    };
-    this.addLine = type => {
-      const self = this;
-      const graphie = self.graphie;
-      const coords = InteractiveGraph.getLineCoords(self.props.graph, self.props);
-      const points = self.points = _.map(coords, coord => {
-        return Interactive2.addMaybeMobileMovablePoint(this, {
-          coord: coord,
-          constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap()],
-          onMove: () => {
-            const graph = _.extend({}, self.props.graph, {
-              coords: _.invoke(points, "coord")
-            });
-            self.onChange({
-              graph: graph
-            });
-          }
-        });
-      });
-      const lineConfig = {
-        points: points,
-        static: true,
-        normalStyle: _extends({
-          stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.INTERACTIVE
-        }, this._lineStroke())
-      };
-      if (type === "line") {
-        // @ts-expect-error - TS2339 - Property 'extendLine' does not exist on type '{ readonly points: any[]; readonly static: true; readonly normalStyle: { readonly "stroke-width"?: number | undefined; readonly stroke: "#71B307" | "#63D9EA"; }; }'.
-        lineConfig.extendLine = true;
-      } else if (type === "ray") {
-        // @ts-expect-error - TS2339 - Property 'extendRay' does not exist on type '{ readonly points: any[]; readonly static: true; readonly normalStyle: { readonly "stroke-width"?: number | undefined; readonly stroke: "#71B307" | "#63D9EA"; }; }'.
-        lineConfig.extendRay = true;
-      }
-      self.line = Interactive2.addMovableLine(graphie, lineConfig);
-
-      // A and B can't be in the same place
-      points[0].listen("constraints", "isLine", coord => {
-        return !point.equal(coord, points[1].coord());
-      });
-      points[1].listen("constraints", "isLine", coord => {
-        return !point.equal(coord, points[0].coord());
-      });
-    };
-    this.removeLine = () => {
-      var _this$line;
-      _.invoke(this.points, "remove");
-      (_this$line = this.line) == null || _this$line.remove();
-    };
-    this.addNoneControls = () => {};
-    this.removeNoneControls = () => {};
-    this.addLinearControls = () => {
-      this.addLine("line");
-    };
-    this.removeLinearControls = () => {
-      this.removeLine();
-    };
-    this.addQuadraticControls = () => {
-      if (this.props.graph.type !== "quadratic") {
-        throw makeInvalidTypeError("addQuadraticControls", "quadratic");
-      }
-      let coords = this.props.graph.coords;
-      if (!coords) {
-        coords = InteractiveGraph.defaultQuadraticCoords(this.props);
-      }
-      const onMoveHandler = () => {
-        const graph = _.extend({}, this.props.graph, {
-          // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2531 - Object is possibly 'null'. | TS2531 - Object is possibly 'null'.
-          coords: [pointA.coord(), pointB.coord(), pointC.coord()]
-        });
-        this.onChange({
-          graph
-        });
-        this.updateQuadratic();
-      };
-
-      // NOTE(jeresig): This code attempts to access the variable while it's
-      // still being defined, it should be refactored! The callbacks appear
-      // to be executed synchronously, which causes this issue.
-      let pointA = null;
-      pointA = this.pointA = Interactive2.addMaybeMobileMovablePoint(this, {
-        coord: coords[0],
-        constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-          return !pointA ||
-          // @ts-expect-error - TS2531 - Object is possibly 'null'.
-          coord[0] !== pointB.coord()[0] &&
-          // @ts-expect-error - TS2531 - Object is possibly 'null'.
-          coord[0] !== pointC.coord()[0];
-        }],
-        onMove: onMoveHandler
-      });
-
-      // NOTE(jeresig): This code attempts to access the variable while it's
-      // still being defined, it should be refactored! The callbacks appear
-      // to be executed synchronously, which causes this issue.
-      let pointB = null;
-      pointB = this.pointB = Interactive2.addMaybeMobileMovablePoint(this, {
-        coord: coords[1],
-        constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-          return !pointB ||
-          // @ts-expect-error - TS2531 - Object is possibly 'null'.
-          coord[0] !== pointA.coord()[0] &&
-          // @ts-expect-error - TS2531 - Object is possibly 'null'.
-          coord[0] !== pointC.coord()[0];
-        }],
-        onMove: onMoveHandler
-      });
-
-      // NOTE(jeresig): This code attempts to access the variable while it's
-      // still being defined, it should be refactored! The callbacks appear
-      // to be executed synchronously, which causes this issue.
-      let pointC = null;
-      pointC = this.pointC = Interactive2.addMaybeMobileMovablePoint(this, {
-        coord: coords[2],
-        constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-          return !pointC ||
-          // @ts-expect-error - TS2531 - Object is possibly 'null'.
-          coord[0] !== pointA.coord()[0] &&
-          // @ts-expect-error - TS2531 - Object is possibly 'null'.
-          coord[0] !== pointB.coord()[0];
-        }],
-        onMove: onMoveHandler
-      });
-      this.updateQuadratic();
-    };
-    this.updateQuadratic = () => {
-      const coeffs = InteractiveGraph.getCurrentQuadraticCoefficients(this.props);
-      if (!coeffs) {
-        return;
-      }
-
-      // Extract coefficients the parabola
-      const a = coeffs[0];
-      const b = coeffs[1];
-      const c = coeffs[2];
-
-      // Plot and style
-      if (this.parabola) {
-        var _this$graphie, _this$parabola;
-        const path = (_this$graphie = this.graphie) == null ? void 0 : _this$graphie.svgParabolaPath(a, b, c);
-        (_this$parabola = this.parabola) == null || _this$parabola.attr({
-          path: path
-        });
-      } else {
-        var _this$graphie2, _this$parabola2, _this$parabola3;
-        this.parabola = (_this$graphie2 = this.graphie) == null ? void 0 : _this$graphie2.parabola(a, b, c);
-        (_this$parabola2 = this.parabola) == null || _this$parabola2.attr(_extends({
-          stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.DYNAMIC
-        }, this._lineStroke()));
-        (_this$parabola3 = this.parabola) == null || _this$parabola3.toBack();
-      }
-    };
-    this.removeQuadraticControls = () => {
-      var _this$pointA, _this$pointB, _this$pointC;
-      (_this$pointA = this.pointA) == null || _this$pointA.remove();
-      (_this$pointB = this.pointB) == null || _this$pointB.remove();
-      (_this$pointC = this.pointC) == null || _this$pointC.remove();
-      if (this.parabola) {
-        this.parabola.remove();
-        this.parabola = null;
-      }
-    };
-    this.addSinusoidControls = () => {
-      if (this.props.graph.type !== "sinusoid") {
-        throw makeInvalidTypeError("addSinusoidControls", "sinusoid");
-      }
-      let coords = this.props.graph.coords;
-      if (!coords) {
-        coords = InteractiveGraph.defaultSinusoidCoords(this.props);
-      }
-      const onMoveHandler = () => {
-        const graph = _.extend({}, this.props.graph, {
-          // @ts-expect-error - TS2531 - Object is possibly 'null'.
-          coords: [pointA.coord(), pointB.coord()]
-        });
-        this.onChange({
-          graph: graph
-        });
-        this.updateSinusoid();
-      };
-
-      // NOTE(jeresig): This code attempts to access the variable while it's
-      // still being defined, it should be refactored! The callbacks appear
-      // to be executed synchronously, which causes this issue.
-      let pointA = null;
-      pointA = this.pointA = Interactive2.addMaybeMobileMovablePoint(this, {
-        coord: coords[0],
-        constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-          return !pointA || coord[0] !== pointB.coord()[0];
-        }],
-        onMove: onMoveHandler
-      });
-      const pointB = this.pointB = Interactive2.addMaybeMobileMovablePoint(this, {
-        coord: coords[1],
-        constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-          // @ts-expect-error - TS2339 - Property 'coord' does not exist on type 'never'.
-          return !pointA || coord[0] !== pointA.coord()[0];
-        }],
-        onMove: onMoveHandler
-      });
-      this.updateSinusoid();
-    };
-    this.updateSinusoid = () => {
-      const coeffs = InteractiveGraph.getCurrentSinusoidCoefficients(this.props);
-      if (!coeffs) {
-        return;
-      }
-      const a = coeffs[0];
-      const b = coeffs[1];
-      const c = coeffs[2];
-      const d = coeffs[3];
-
-      // Plot and style
-      if (this.sinusoid) {
-        var _this$graphie3, _this$sinusoid;
-        const path = (_this$graphie3 = this.graphie) == null ? void 0 : _this$graphie3.svgSinusoidPath(a, b, c, d);
-        (_this$sinusoid = this.sinusoid) == null || _this$sinusoid.attr({
-          path: path
-        });
-      } else {
-        var _this$graphie4, _this$sinusoid2, _this$sinusoid3;
-        this.sinusoid = (_this$graphie4 = this.graphie) == null ? void 0 : _this$graphie4.sinusoid(a, b, c, d);
-        (_this$sinusoid2 = this.sinusoid) == null || _this$sinusoid2.attr(_extends({
-          stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.DYNAMIC
-        }, this._lineStroke()));
-        (_this$sinusoid3 = this.sinusoid) == null || _this$sinusoid3.toBack();
-      }
-    };
-    this.removeSinusoidControls = () => {
-      var _this$pointA2, _this$pointB2;
-      (_this$pointA2 = this.pointA) == null || _this$pointA2.remove();
-      (_this$pointB2 = this.pointB) == null || _this$pointB2.remove();
-      if (this.sinusoid) {
-        this.sinusoid.remove();
-        this.sinusoid = null;
-      }
-    };
-    this.addCircleControls = () => {
-      const graphie = this.graphie;
-      const minSnap = _.min(graphie.snap);
-      const circle = this.circle = graphie == null ? void 0 : graphie.addCircleGraph({
-        // @ts-expect-error - TS2339 - Property 'center' does not exist on type 'PerseusGraphType'.
-        center: this.props.graph.center || [0, 0],
-        // @ts-expect-error - TS2339 - Property 'radius' does not exist on type 'PerseusGraphType'.
-        radius: this.props.graph.radius || _.min(this.props.step),
-        snapX: graphie.snap[0],
-        snapY: graphie.snap[1],
-        minRadius: minSnap,
-        snapRadius: minSnap
-      });
-      $(circle).on("move", () => {
-        const graph = _.extend({}, this.props.graph, {
-          center: circle.center,
-          radius: circle.radius
-        });
-        this.onChange({
-          graph: graph
-        });
-      });
-    };
-    this.removeCircleControls = () => {
-      var _this$circle;
-      (_this$circle = this.circle) == null || _this$circle.remove();
-    };
-    this.addLinearSystemControls = () => {
-      const graphie = this.graphie;
-      const coords = InteractiveGraph.getLinearSystemCoords(this.props.graph, this.props);
-      const segmentColors = [KhanColors.INTERACTIVE, KhanColors.GREEN];
-      const points = this.points = _.map(coords, (segmentCoords, segmentIndex) => {
-        // NOTE(jeresig): This code attempts to access the variable
-        // while it's still being defined, it should be refactored!
-        // The callbacks appear to be executed synchronously, which
-        // causes this issue.
-        const segmentPoints = [];
-        for (let i = 0; i < segmentCoords.length; i += 1) {
-          const coord = segmentCoords[i];
-          segmentPoints.push(Interactive2.addMaybeMobileMovablePoint(this, {
-            coord: coord,
-            constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-              const otherSegment = segmentPoints[1 - i];
-              if (!otherSegment) {
-                // segment hasn't been defined yet
-                // because we're still creating them
-                return;
-              }
-              return !point.equal(coord, otherSegment.coord());
-            }],
-            onMove: () => {
-              const graph = _.extend({}, this.props.graph, {
-                coords: _.map(this.points, segment => _.invoke(segment, "coord"))
-              });
-              this.onChange({
-                graph: graph
-              });
-            },
-            normalStyle: {
-              fill: segmentColors[segmentIndex]
-            },
-            highlightStyle: {
-              fill: segmentColors[segmentIndex]
-            }
-          }));
-        }
-        return segmentPoints;
-      });
-      this.lines = _.map(points, (segmentPoints, segmentIndex) => {
-        return Interactive2.addMovableLine(graphie, {
-          points: segmentPoints,
-          static: true,
-          extendLine: true,
-          normalStyle: {
-            stroke: segmentColors[segmentIndex]
-          }
-        });
-      });
-    };
-    this.removeLinearSystemControls = () => {
-      // @ts-expect-error - TS2345 - Argument of type 'readonly (readonly Coord[])[] | null | undefined' is not assignable to parameter of type 'Collection<any>'.
-      _.invoke(this.lines, "remove");
-      _.map(this.points, segment => _.invoke(segment, "remove"));
-    };
-    this.isCoordInTrash = coord => {
-      if (this.props.apiOptions.isMobile) {
-        return false;
-      }
-      const graphie = this.graphie;
-      const screenPoint = graphie == null ? void 0 : graphie.scalePoint(coord);
-      return screenPoint[0] >= graphie.xpixels - 40 && screenPoint[1] >= graphie.ypixels - 40;
-    };
-    this.createPointForPointsType = (coord, i) => {
-      const self = this;
-      const remove = () => {
-        self.points = _.filter(self.points, function (pt) {
-          return pt !== point$1;
-        });
-        // update the correct answer box
-        self.updateCoordsFromPoints();
-
-        // remove this movablePoint from graphie.
-        // we wait to do this until we're not inside of
-        // said point's onMoveEnd method so its state is
-        // consistent throughout this method call
-        // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-        // @ts-expect-error - TS2531 - Object is possibly 'null'.
-        setTimeout(point$1.remove.bind(point$1), 0); // eslint-disable-line no-restricted-syntax
-      };
-
-      // NOTE(jeresig): This code attempts to access the variable while it's
-      // still being defined, it should be refactored! The callbacks appear
-      // to be executed synchronously, which causes this issue.
-      let point$1 = null;
-      point$1 = Interactive2.addMaybeMobileMovablePoint(this, _extends({
-        coord: coord,
-        constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), function (coord) {
-          // TODO(jack): There ought to be a
-          // MovablePoint.constraints.avoid
-          // default that lets you do things like this
-          return _.all(self.points, function (pt) {
-            return point$1 === pt || !point.equal(coord, pt.coord());
-          });
-        }],
-        onMoveStart: function () {
-          if (self.isClickToAddPoints()) {
-            self.setTrashCanVisibility(1);
-          }
-        },
-        onMove: self.updateCoordsFromPoints,
-        onMoveEnd: function (coord) {
-          if (self.isClickToAddPoints()) {
-            if (self.isCoordInTrash(coord)) {
-              remove();
-            }
-            // In case we mouseup'd off the graphie and that
-            // stopped the move (in which case, we might not
-            // be in isCoordInTrash()
-            self.setTrashCanVisibility(0.5);
-          }
-        }
-      }, this.props.apiOptions.isMobile && self.isClickToAddPoints() ? {
-        onRemove: remove
-      } : {}));
-      return point$1;
-    };
-    this.removePoint = point => {
-      let index = null;
-      this.points = _.filter(this.points, function (pt, i) {
-        if (pt === point) {
-          // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'null'.
-          index = i;
-          return false;
-        }
-        return true;
-      });
-      return index;
-    };
-    this.createPointForPolygonType = (coord, i) => {
-      if (this.props.graph.type !== "polygon") {
-        throw makeInvalidTypeError("createPointForPolygonType", "polygon");
-      }
-
-      // TODO(alex): check against "grid" instead, use constants
-      const snapToGrid = !_.contains(["angles", "sides"], this.props.graph.snapTo);
-
-      // Index relative to current point -> absolute index
-      // NOTE: This does not work when isClickToAddPoints() == true,
-      // as `i` can be changed by dragging a point to the trash
-      // Currently this function is only called when !isClickToAddPoints()
-      const rel = j => {
-        return (i + j + this.points.length) % this.points.length;
-      };
-      const remove = () => {
-        var _this$polygon2;
-        // remove this point from points
-        const index = this.removePoint(point$1);
-        if ((_this$polygon2 = this.polygon) != null && _this$polygon2.closed()) {
-          var _this$polygon3;
-          // We should be checking if this.points is defined before rotating them.
-          // @ts-expect-error - TS4104 - The type 'readonly any[]' is 'readonly' and cannot be assigned to the mutable type 'any[]'. | TS2345 - Argument of type 'number | null | undefined' is not assignable to parameter of type 'number | undefined'.
-          this.points = rotate(this.points, index);
-          (_this$polygon3 = this.polygon) == null || _this$polygon3.update({
-            closed: false
-          });
-        }
-        this.updatePolygon();
-        // the polygon is now unclosed, so we need to
-        // remove any points props
-        this.clearCoords();
-
-        // remove this movablePoint from graphie.
-        // wait to do this until we're not inside of
-        // said point's onMoveEnd method so state is
-        // consistent throughout the method call
-        // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-        // eslint-disable-next-line no-restricted-syntax
-        setTimeout(point$1.remove.bind(point$1), 0);
-      };
-      const setInitialMove = debounce$2((point, bool) => {
-        point.state.isInitialMove = bool;
-      }, 1000);
-      const onMoveEndHandler = coord => {
-        // If the user clicked and dragged a point over endpoint,
-        // join the them
-        const overlappedPoints = this.points.length > 1 && (point$1 === this.points[0] && point.equal(coord, _.last(this.points).coord()) || point$1 === _.last(this.points) && point.equal(coord, this.points[0].coord()));
-        if (this.isClickToAddPoints()) {
-          if (this.isCoordInTrash(coord)) {
-            remove();
-          } else if (overlappedPoints) {
-            const pointToRemove = this.points.pop();
-            if (this.points.length > 2) {
-              var _this$polygon4;
-              (_this$polygon4 = this.polygon) == null || _this$polygon4.update({
-                closed: true
-              });
-              this.updateCoordsFromPoints();
-            } else {
-              var _this$polygon5;
-              (_this$polygon5 = this.polygon) == null || _this$polygon5.update({
-                closed: false
-              });
-              this.clearCoords();
-            }
-            this.updatePolygon();
-            // remove this movablePoint from graphie.
-            // wait to do this until we're not inside of
-            // said point's onMoveEnd method so state is
-            // consistent throughout the method call
-            // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-            // eslint-disable-next-line no-restricted-syntax
-            setTimeout(pointToRemove.remove.bind(pointToRemove), 0);
-          } else {
-            // If the user clicked and dragged a point over any other
-            // existing point, fix shape
-            const shouldRemove = _.any(this.points, function (pt) {
-              return pt !== point$1 && point.equal(pt.coord(), coord);
-            });
-            if (shouldRemove) {
-              var _this$polygon7;
-              this.removePoint(point$1);
-              if (this.points.length < 3) {
-                var _this$polygon6;
-                (_this$polygon6 = this.polygon) == null || _this$polygon6.update({
-                  closed: false
-                });
-                this.clearCoords();
-              } else if ((_this$polygon7 = this.polygon) != null && _this$polygon7.closed()) {
-                this.updateCoordsFromPoints();
-              }
-              this.updatePolygon();
-              // remove this movablePoint from graphie.
-              // wait to do this until we're not inside
-              // said point's onMoveEnd method so state
-              // is consistent throughout the method call
-              // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-              // eslint-disable-next-line no-restricted-syntax
-              setTimeout(point$1.remove.bind(point$1), 0);
-            } else {
-              var _this$polygon8;
-              // If this was
-              //  * a click on the first or last point
-              //  * and not a deletion
-              //  * and not a drag,
-              //  * and not a creation of a new point
-              //    (see !point.state.isInitialMove, below),
-              //  * and our polygon is not closed,
-              //  * and we can close it (we need at least the same
-              //    number of points as coordinates asked for in the
-              //    question),
-              // then close it
-              const isFirstOrLastPoint = point$1 === _.head(this.points) || point$1 === _.last(this.points);
-              const pointNotMoved = !point$1.hasMoved();
-              // NOTE (jsatk): Currently different on mobile versus
-              // destkop
-              const notANewPoint = !point$1.state.isInitialMove;
-              const polygonNotClosed = !((_this$polygon8 = this.polygon) != null && _this$polygon8.closed());
-              const allPointsPlotted = this.points.length > 2;
-              const canCloseUnclosedPolygon = isFirstOrLastPoint && pointNotMoved && notANewPoint && polygonNotClosed && allPointsPlotted;
-              if (canCloseUnclosedPolygon) {
-                var _this$polygon9;
-                (_this$polygon9 = this.polygon) == null || _this$polygon9.update({
-                  closed: true
-                });
-                this.updatePolygon();
-
-                // We finally have a closed polygon, so save our
-                // points to props
-                this.updateCoordsFromPoints();
-              }
-            }
-          }
-
-          // In case we mouseup'd off the graphie and that
-          // stopped the move
-          this.setTrashCanVisibility(0.5);
-        }
-        setInitialMove(point$1, false);
-      };
-      const graphConstraint = coord => {
-        // These constraints are all relative to the other points, so if
-        // we're creating the initial points and haven't added any others
-        // to the graph, we can't enforce them.
-        if (this.points == null || this.points.length === 0) {
-          return true;
-        }
-        const coords = _.invoke(this.points, "coord");
-        coords[i] = coord;
-
-        // Check for invalid positioning, but only if we aren't adding
-        // points one click at a time, since those added points could
-        // have already violated these constraints
-        if (!this.isClickToAddPoints()) {
-          // Polygons can't have consecutive collinear points
-          if (collinear(coords[rel(-2)], coords[rel(-1)], coords[i]) || collinear(coords[rel(-1)], coords[i], coords[rel(1)]) || collinear(coords[i], coords[rel(1)], coords[rel(2)])) {
-            return false;
-          }
-          const segments = _.zip(coords, rotate(coords));
-          if (this.points.length > 3) {
-            // Constrain to simple (non self-intersecting) polygon by
-            // testing whether adjacent segments intersect any others
-            for (let j = -1; j <= 0; j++) {
-              const segment = segments[rel(j)];
-              const others = _.without(segments, segment, segments[rel(j - 1)], segments[rel(j + 1)]);
-              for (let k = 0; k < others.length; k++) {
-                const other = others[k];
-                // @ts-expect-error - TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'Line'.
-                if (intersects(segment, other)) {
-                  return false;
-                }
-              }
-            }
-          }
-        }
-        if (
-        // @ts-expect-error - TS2339 - Property 'snapTo' does not exist on type 'PerseusGraphType'.
-        this.props.graph.snapTo === "angles" && this.points.length > 2) {
-          var _this$graphie5;
-          // Snap to whole degree interior angles
-
-          const angles = _.map(angleMeasures(coords), function (rad) {
-            return rad * 180 / Math.PI;
-          });
-          _.each([-1, 1], function (j) {
-            angles[rel(j)] = Math.round(angles[rel(j)]);
-          });
-          const getAngle = function getAngle(a, vertex, b) {
-            const angle = GraphUtils.findAngleDeprecated(coords[rel(a)], coords[rel(b)], coords[rel(vertex)]);
-            return (angle + 360) % 360;
-          };
-          const innerAngles = [angles[rel(-1)] - getAngle(-2, -1, 1), angles[rel(1)] - getAngle(-1, 1, 2)];
-          innerAngles[2] = 180 - (innerAngles[0] + innerAngles[1]);
-
-          // Avoid degenerate triangles
-          if (_.any(innerAngles, function (angle) {
-            return leq(angle, 1);
-          })) {
-            return false;
-          }
-          const knownSide = magnitude(
-          // @ts-expect-error - TS2345 - Argument of type 'number[]' is not assignable to parameter of type 'readonly Coord[]'.
-          vector(coords[rel(-1)], coords[rel(1)]));
-          const onLeft = sign(ccw(coords[rel(-1)], coords[rel(1)], coords[i])) === 1;
-
-          // Solve for side by using the law of sines
-          const side = Math.sin(innerAngles[1] * Math.PI / 180) / Math.sin(innerAngles[2] * Math.PI / 180) * knownSide;
-          const outerAngle = GraphUtils.findAngleDeprecated(coords[rel(1)], coords[rel(-1)]);
-          const offset = polar$2(side, outerAngle + (onLeft ? 1 : -1) * innerAngles[0]);
-          return (_this$graphie5 = this.graphie) == null ? void 0 : _this$graphie5.addPoints(coords[rel(-1)], offset);
-        }
-        // @ts-expect-error - TS2339 - Property 'snapTo' does not exist on type 'PerseusGraphType'.
-        if (this.props.graph.snapTo === "sides" && this.points.length > 1) {
-          var _this$graphie6;
-          // Snap to whole unit side measures
-
-          const sides = _.map([[coords[rel(-1)], coords[i]], [coords[i], coords[rel(1)]], [coords[rel(-1)], coords[rel(1)]]], function (coords) {
-            // @ts-expect-error - TS2345 - Argument of type 'number[]' is not assignable to parameter of type 'readonly Coord[]'. | TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-            return magnitude(vector(...coords));
-          });
-          _.each([0, 1], function (j) {
-            sides[j] = Math.round(sides[j]);
-          });
-
-          // Avoid degenerate triangles
-          if (leq(sides[1] + sides[2], sides[0]) || leq(sides[0] + sides[2], sides[1]) || leq(sides[0] + sides[1], sides[2])) {
-            return false;
-          }
-
-          // Solve for angle by using the law of cosines
-          const innerAngle = lawOfCosines(sides[0], sides[2], sides[1]);
-          const outerAngle = GraphUtils.findAngleDeprecated(coords[rel(1)], coords[rel(-1)]);
-          const onLeft = sign(ccw(coords[rel(-1)], coords[rel(1)], coords[i])) === 1;
-          const offset = polar$2(sides[0], outerAngle + (onLeft ? 1 : -1) * innerAngle);
-          return (_this$graphie6 = this.graphie) == null ? void 0 : _this$graphie6.addPoints(coords[rel(-1)], offset);
-        }
-        // Snap to grid (already done)
-        return true;
-      };
-      const point$1 = Interactive2.addMaybeMobileMovablePoint(this, _extends({
-        coord: coord,
-        constraints: [Interactive2.MovablePoint.constraints.bound(), snapToGrid ? Interactive2.MovablePoint.constraints.snap() : null, graphConstraint],
-        onMoveStart: () => {
-          if (this.isClickToAddPoints()) {
-            this.setTrashCanVisibility(1);
-          }
-        },
-        onMove: () => {
-          var _this$polygon10;
-          if ((_this$polygon10 = this.polygon) != null && _this$polygon10.closed()) {
-            this.updateCoordsFromPoints();
-          }
-        },
-        onMoveEnd: onMoveEndHandler
-      }, this.props.apiOptions.isMobile && this.isClickToAddPoints() ? {
-        onRemove: remove
-      } : {}));
-      point$1.state.isInitialMove = true;
-      return point$1;
-    };
-    this.updateCoordsFromPoints = () => {
-      const graph = _.extend({}, this.props.graph, {
-        // Handle old movable points with .coord, or
-        // Interactive2.MovablePoint's with .coord()
-        coords: _.map(this.points, function (point) {
-          return _.result(point, "coord");
-        })
-      });
-      this.onChange({
-        graph: graph
-      });
-    };
-    this.clearCoords = () => {
-      const graph = _.extend({}, this.props.graph, {
-        coords: null
-      });
-      this.onChange({
-        graph: graph
-      });
-    };
-    this.onChange = data => {
-      this.props.onChange(data);
-      this.props.trackInteraction();
-    };
-    this.addPointControls = () => {
-      if (this.props.graph.type !== "point") {
-        throw makeInvalidTypeError("addPointControls", "point");
-      }
-      const coords = InteractiveGraph.getPointCoords(this.props.graph, this.props);
-      // Clear out our old points so that newly added points don't
-      // "collide" with them and reposition when being added
-      // Without this, when added, each point checks whether it is on top
-      // of a point in this.points, which (a) shouldn't matter since
-      // we're clearing out this.points anyways, and (b) can cause problems
-      // if each of this.points is a MovablePoint instead of an
-      // Interactive2.MovablePoint, since one has a .coord and the other
-      // has .coord()
-      // TODO(jack): Figure out a better way to do this
-      this.points = [];
-      this.points = _.map(coords, this.createPointForPointsType, this);
-    };
-    this.removePointControls = () => {
-      _.invoke(this.points, "remove");
-    };
-    this.addSegmentControls = () => {
-      if (this.props.graph.type !== "segment") {
-        throw makeInvalidTypeError("addSegmentControls", "segment");
-      }
-      const self = this;
-      const graphie = this.graphie;
-      const coords = InteractiveGraph.getSegmentCoords(this.props.graph, this.props);
-      const createPoint = options => Interactive2.addMaybeMobileMovablePoint(this, options);
-      this.points = [];
-      this.lines = _.map(coords, function (segment, i) {
-        const updateCoordProps = function updateCoordProps() {
-          const graph = _.extend({}, self.props.graph, {
-            // @ts-expect-error - TS2345 - Argument of type 'readonly (readonly Coord[])[] | null | undefined' is not assignable to parameter of type 'Collection<any>'.
-            coords: _.invoke(self.lines, "coords")
-          });
-          self.onChange({
-            graph: graph
-          });
-        };
-
-        // NOTE(jeresig): This code attempts to access the variable
-        // while it's still being defined, it should be refactored!
-        // The callbacks appear to be executed synchronously, which
-        // causes this issue.
-        const points = [];
-        for (let _i = 0; _i < segment.length; _i += 1) {
-          const coord = segment[_i];
-          points.push(createPoint({
-            coord: coord,
-            constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-              const otherPoint = points[1 - _i];
-              if (!otherPoint) {
-                // point hasn't been defined yet
-                // because we're still creating them
-                // We return false as the points aren't
-                // going to be in the same position at
-                // this point.
-                return false;
-              }
-              return !point.equal(coord, otherPoint.coord());
-            }],
-            onMove: updateCoordProps
-          }));
-        }
-        self.points = self.points.concat(points);
-        const line = Interactive2.addMovableLine(graphie, {
-          points: points,
-          static: false,
-          constraints: [
-          // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-          Interactive2.MovableLine.constraints.bound(),
-          // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-          Interactive2.MovableLine.constraints.snap()],
-          onMove: [
-          // @ts-expect-error - TS2339 - Property 'onMove' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-          Interactive2.MovableLine.onMove.updatePoints, updateCoordProps],
-          normalStyle: _extends({
-            // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-            stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.INTERACTIVE
-          }, this._lineStroke()),
-          highlightStyle: _extends({
-            // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-            stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.INTERACTING
-          }, this._lineStroke())
-        });
-        _.invoke(points, "toFront");
-        return line;
-      }, this);
-    };
-    this.removeSegmentControls = () => {
-      _.invoke(this.points, "remove");
-      // @ts-expect-error - TS2345 - Argument of type 'readonly (readonly Coord[])[] | null | undefined' is not assignable to parameter of type 'Collection<any>'.
-      _.invoke(this.lines, "remove");
-    };
-    this.addRayControls = () => {
-      this.addLine("ray");
-    };
-    this.removeRayControls = () => {
-      this.removeLine();
-    };
-    this.addPolygonControls = () => {
-      this.polygon = null;
-      const coords = InteractiveGraph.getPolygonCoords(this.props.graph, this.props);
-      // Clear out our old points so that newly added points don't
-      // "collide", as in `addPointControls`
-      this.points = [];
-      this.points = _.map(coords, this.createPointForPolygonType, this);
-      this.updatePolygon();
-    };
-    this.updatePolygon = () => {
-      if (this.props.graph.type !== "polygon") {
-        throw makeInvalidTypeError("updatePolygon", "polygon");
-      }
-      let closed;
-      if (this.polygon) {
-        closed = this.polygon.closed();
-      } else if (this.points.length >= 3) {
-        closed = true;
-      } else {
-        // There will only be fewer than 3 points in click-to-add-vertices
-        // mode, so we don't need to explicitly check for that here.
-        closed = false;
-      }
-      const graphie = this.graphie;
-      const n = this.points.length;
-
-      // TODO(alex): check against "grid" instead, use constants
-      const snapToGrid = !_.contains(["angles", "sides"], this.props.graph.snapTo);
-      const angleLabels = _.times(n, function (i) {
-        if (
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        !this.props.graph.showAngles || !closed && (i === 0 || i === n - 1)) {
-          return "";
-        }
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        if (this.props.graph.snapTo === "angles") {
-          return "$deg0";
-        }
-        return "$deg1";
-      }, this);
-      const showRightAngleMarkers = _.times(n, function (i) {
-        return closed || i !== 0 && i !== n - 1;
-      }, this);
-      const numArcs = _.times(n, function (i) {
-        if (
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        this.props.graph.showAngles && (closed || i !== 0 && i !== n - 1)) {
-          return 1;
-        }
-        return 0;
-      }, this);
-      const sideLabels = _.times(n, function (i) {
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        if (!this.props.graph.showSides || !closed && i === n - 1) {
-          return "";
-        }
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        if (this.props.graph.snapTo === "sides") {
-          return "$len0";
-        }
-        return "$len1";
-      }, this);
-      if (this.polygon == null) {
-        const self = this;
-        self.polygon = Interactive2.addMovablePolygon(graphie, {
-          constraints: [
-          // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => undefined'.
-          Interactive2.MovablePolygon.constraints.bound(), snapToGrid ?
-          // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => undefined'.
-          Interactive2.MovablePolygon.constraints.snap() : null],
-          closed: closed,
-          points: self.points,
-          angleLabels: angleLabels,
-          showRightAngleMarkers: showRightAngleMarkers,
-          numArcs: numArcs,
-          sideLabels: sideLabels,
-          onMove: [
-          // @ts-expect-error - TS2339 - Property 'onMove' does not exist on type '(graphie: any, movable: any, options: any) => undefined'.
-          Interactive2.MovablePolygon.onMove.updatePoints, function () {
-            // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-            if (this.closed()) {
-              self.updateCoordsFromPoints();
-            }
-          }],
-          normalStyle: _extends({
-            stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.INTERACTIVE
-          }, this._lineStroke())
-        });
-      } else {
-        // We only need to pass in the properties that might've changed
-        this.polygon.update({
-          closed: closed,
-          points: this.points,
-          angleLabels: angleLabels,
-          showRightAngleMarkers: showRightAngleMarkers,
-          numArcs: numArcs,
-          sideLabels: sideLabels
-        });
-      }
-    };
-    this.removePolygonControls = () => {
-      var _this$polygon11;
-      _.invoke(this.points, "remove");
-      (_this$polygon11 = this.polygon) == null || _this$polygon11.remove();
-    };
-    this.addAngleControls = () => {
-      if (this.props.graph.type !== "angle") {
-        throw makeInvalidTypeError("addAngleControls", "angle");
-      }
-      const graph = this.props.graph;
-      const graphie = this.graphie;
-      const coords = InteractiveGraph.getAngleCoords(this.props.graph, this.props);
-
-      // The vertex snaps to the grid, but the rays don't...
-      this.points = coords.map(function (coord, i) {
-        return graphie == null ? void 0 : graphie.addMovablePoint(_.extend({
-          coord: coord,
-          normalStyle: {
-            stroke: KhanColors.INTERACTIVE,
-            fill: KhanColors.INTERACTIVE
-          }
-        }, i === 1 ? {
-          snapX: graphie.snap[0],
-          snapY: graphie.snap[1]
-        } : {}));
-      });
-
-      // ...they snap to whole-degree angles from the vertex.
-      this.angle = graphie == null ? void 0 : graphie.addMovableAngle({
-        points: this.points,
-        snapDegrees: graph.snapDegrees || 1,
-        snapOffsetDeg: graph.angleOffsetDeg || 0,
-        angleLabel: graph.showAngles ? "$deg0" : "",
-        pushOut: 2,
-        allowReflex: defaultVal(graph.allowReflexAngles, true)
-      });
-      $(this.angle).on("move", () => {
-        var _this$angle;
-        this.onChange({
-          graph: _extends({}, graph, {
-            coords: (_this$angle = this.angle) == null ? void 0 : _this$angle.getClockwiseCoords()
-          })
-        });
-      });
-    };
-    this.removeAngleControls = () => {
-      var _this$angle2;
-      _.invoke(this.points, "remove");
-      (_this$angle2 = this.angle) == null || _this$angle2.remove();
-    };
-    this.toggleShowSides = () => {
-      if (this.props.graph.type !== "polygon") {
-        throw makeInvalidTypeError("toggleShowSides", "polygon");
-      }
-      const graph = _.extend({}, this.props.graph, {
-        showSides: !this.props.graph.showSides
-      });
-      this.onChange({
-        graph: graph
-      });
-    };
-    this.focus = $.noop;
-  }
-  componentDidMount() {
-    if (this.refs.graph) {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'graphie' does not exist on type 'ReactInstance'.
-      this.setGraphie(this.refs.graph.graphie());
-    }
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    var _this$props$backgroun, _nextProps$background;
-    if (this.isClickToAddPoints() !== this.isClickToAddPoints(nextProps)) {
-      this.shouldResetGraphie = true;
-      this.setState({
-        shouldShowInstructions: _getShouldShowInstructions(nextProps)
-      });
-    }
-    if (((_this$props$backgroun = this.props.backgroundImage) == null ? void 0 : _this$props$backgroun.url) !== ((_nextProps$background = nextProps.backgroundImage) == null ? void 0 : _nextProps$background.url) || this.props.backgroundImage !== nextProps.backgroundImage || this.props.containerSizeClass !== nextProps.containerSizeClass) {
-      this.shouldResetGraphie = true;
-    }
-  }
-  componentDidUpdate(prevProps, prevState) {
-    // TODO(jeremy): This feels underspecified. For example, if the props
-    // change the coords of a segment graph, but not the numSegments, we'd
-    // not count that as an update.
-    const oldType = prevProps.graph.type;
-    const newType = this.props.graph.type;
-    if (oldType !== newType || prevProps.graph.type === "angle" && this.props.graph.type === "angle" && this.areAngleGraphsEqual(prevProps.graph, this.props.graph) || prevProps.graph.type === "point" && this.props.graph.type === "point" && this.arePointGraphsEqual(prevProps.graph, this.props.graph) || prevProps.graph.type === "polygon" && this.props.graph.type === "polygon" && this.arePolygonGraphsEqual(prevProps.graph, this.props.graph) || prevProps.graph.type === "segment" && this.props.graph.type === "segment" && this.areSegmentGraphsEqual(prevProps.graph, this.props.graph)) {
-      this["remove" + capitalize(oldType) + "Controls"]();
-      this["add" + capitalize(newType) + "Controls"]();
-    }
-    if (this.shouldResetGraphie) {
-      this.resetGraphie();
-    }
-  }
-  areAngleGraphsEqual(prevGraph, currentGraph) {
-    return prevGraph.allowReflexAngles !== currentGraph.allowReflexAngles || prevGraph.angleOffsetDeg !== currentGraph.angleOffsetDeg || prevGraph.snapDegrees !== currentGraph.snapDegrees;
-  }
-  arePointGraphsEqual(prevGraph, currentGraph) {
-    return prevGraph.numPoints !== currentGraph.numPoints;
-  }
-  arePolygonGraphsEqual(prevGraph, currentGraph) {
-    return prevGraph.numSides !== currentGraph.numSides || prevGraph.showAngles !== currentGraph.showAngles || prevGraph.showSides !== currentGraph.showSides || prevGraph.snapTo !== currentGraph.snapTo;
-  }
-  areSegmentGraphsEqual(prevGraph, currentGraph) {
-    return prevGraph.numSegments !== currentGraph.numSegments;
-  }
-  getUserInput() {
-    return InteractiveGraph.getUserInputFromProps(this.props);
-  }
-  render() {
-    const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
-    const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, box[0]);
-    const snapStep = this.props.snapStep || Util.snapStepFromGridStep(gridStep);
-    let instructions;
-    // isClickToAddPoints() only applies to points and polygons
-    if (this.isClickToAddPoints() && this.state.shouldShowInstructions) {
-      if (this.props.graph.type === "point") {
-        instructions = this.context.strings.addPoints;
-      } else if (this.props.graph.type === "polygon") {
-        instructions = this.context.strings.addVertices;
-      }
-    } else {
-      instructions = undefined;
-    }
-    let onMouseDown;
-    if (this.isClickToAddPoints()) {
-      onMouseDown = this.handleAddPointsMouseDown;
-    }
-    const isMobile = this.props.apiOptions.isMobile;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget " + "perseus-widget-interactive-graph",
-      style: {
-        width: box[0],
-        height: box[1]
-      }
-    }, /*#__PURE__*/React.createElement(Graph, {
-      instructions: instructions
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "graph",
-      box: box,
-      labels: this.props.labels,
-      range: this.props.range,
-      step: isMobile ? Util.constrainedTickStepsFromTickSteps(this.props.step, this.props.range) : this.props.step,
-      gridStep: gridStep,
-      snapStep: snapStep,
-      markings: this.props.markings,
-      backgroundImage: this.props.backgroundImage,
-      showProtractor: this.props.showProtractor,
-      onMouseDown: onMouseDown,
-      onGraphieUpdated: this.setGraphie,
-      setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable,
-      isMobile: isMobile
-    }));
-  }
-}
-LegacyInteractiveGraph.contextType = PerseusI18nContext;
-LegacyInteractiveGraph.defaultProps = {
-  labels: ["x", "y"],
-  range: [[-10, 10], [-10, 10]],
-  step: [1, 1],
-  backgroundImage: defaultBackgroundImage,
-  markings: "graph",
-  showTooltips: false,
-  showProtractor: false,
-  graph: {
-    type: "linear"
-  }
-};
 class InteractiveGraph extends React.Component {
   constructor(...args) {
     super(...args);
-    this.legacyGraphRef = /*#__PURE__*/React.createRef();
     this.mafsRef = /*#__PURE__*/React.createRef();
   }
   getUserInput() {
-    var _this$mafsRef$current, _this$legacyGraphRef$;
+    var _this$mafsRef$current;
     if ((_this$mafsRef$current = this.mafsRef.current) != null && _this$mafsRef$current.getUserInput) {
       return this.mafsRef.current.getUserInput();
     }
-    if ((_this$legacyGraphRef$ = this.legacyGraphRef.current) != null && _this$legacyGraphRef$.getUserInput) {
-      return this.legacyGraphRef.current.getUserInput();
-    }
     throw new PerseusError("Cannot getUserInput from a graph that has never rendered", Errors.NotAllowed);
   }
   getPromptJSON() {
@@ -36456,8 +35141,32 @@ class InteractiveGraph extends React.Component {
   }
   static getEquationString(props) {
     const type = props.graph.type;
-    const funcName = "get" + capitalize(type) + "EquationString";
-    return InteractiveGraph[funcName](props);
+    switch (type) {
+      case "none":
+        return InteractiveGraph.getNoneEquationString();
+      case "linear":
+        return InteractiveGraph.getLinearEquationString(props);
+      case "quadratic":
+        return InteractiveGraph.getQuadraticEquationString(props);
+      case "sinusoid":
+        return InteractiveGraph.getSinusoidEquationString(props);
+      case "circle":
+        return InteractiveGraph.getCircleEquationString(props);
+      case "linear-system":
+        return InteractiveGraph.getLinearSystemEquationString(props);
+      case "point":
+        return InteractiveGraph.getPointEquationString(props);
+      case "segment":
+        return InteractiveGraph.getSegmentEquationString(props);
+      case "ray":
+        return InteractiveGraph.getRayEquationString(props);
+      case "polygon":
+        return InteractiveGraph.getPolygonEquationString(props);
+      case "angle":
+        return InteractiveGraph.getAngleEquationString(props);
+      default:
+        throw new UnreachableCaseError(type);
+    }
   }
   static pointsFromNormalized(props, coordsList, noSnap) {
     // @ts-expect-error - TS2322 - Type 'number[][]' is not assignable to type 'readonly Coord[]'.
@@ -36613,8 +35322,7 @@ var InteractiveGraph$1 = {
   name: "interactive-graph",
   displayName: "Interactive graph (Assessments only)",
   widget: InteractiveGraph,
-  staticTransform: staticTransform$3,
-  getPublicWidgetOptions: getInteractiveGraphPublicWidgetOptions
+  staticTransform: staticTransform$3
 };
 
 // TODO: can we use WB typography?
@@ -37241,11 +35949,16 @@ class LabelImage extends React.Component {
     });
   }
   activateMarker(index, opened) {
-    var _this$props$analytics;
+    var _this$props$analytics, _this$props$analytics2;
+    // TODO(LEMS-2830): Remove analytics event in LEMS-2830 in favor of ti below.
     (_this$props$analytics = this.props.analytics) == null || _this$props$analytics.onAnalyticsEvent({
       type: "perseus:label-image:marker-interacted-with",
       payload: null
     });
+    (_this$props$analytics2 = this.props.analytics) == null || _this$props$analytics2.onAnalyticsEvent({
+      type: "perseus:label-image:marker-interacted-with:ti",
+      payload: null
+    });
     const {
       activeMarkerIndex
     } = this.state;
@@ -37388,11 +36101,16 @@ class LabelImage extends React.Component {
         })),
         multipleSelect: this.props.multipleAnswers,
         onChange: selection => {
-          var _this$props$analytics2;
-          (_this$props$analytics2 = this.props.analytics) == null || _this$props$analytics2.onAnalyticsEvent({
+          var _this$props$analytics3, _this$props$analytics4;
+          // TODO(LEMS-2829): Remove analytics event in LEMS-2829 in favor of ti below.
+          (_this$props$analytics3 = this.props.analytics) == null || _this$props$analytics3.onAnalyticsEvent({
             type: "perseus:label-image:choiced-interacted-with",
             payload: null
           });
+          (_this$props$analytics4 = this.props.analytics) == null || _this$props$analytics4.onAnalyticsEvent({
+            type: "perseus:label-image:choiced-interacted-with:ti",
+            payload: null
+          });
           this.handleAnswerChoicesChangeForMarker(index, selection);
         },
         onToggle: opened => this.activateMarker(index, opened)
@@ -37488,11 +36206,16 @@ class LabelImage extends React.Component {
     }))), this.renderMarkers()), /*#__PURE__*/React.createElement(HideAnswersToggle, {
       areAnswersHidden: this.state.hideAnswers,
       onChange: hideAnswers => {
-        var _this$props$analytics3;
-        (_this$props$analytics3 = this.props.analytics) == null || _this$props$analytics3.onAnalyticsEvent({
+        var _this$props$analytics5, _this$props$analytics6;
+        // TODO(LEMS-2831): Remove analytics event in LEMS-2831 in favor of ti below.
+        (_this$props$analytics5 = this.props.analytics) == null || _this$props$analytics5.onAnalyticsEvent({
           type: "perseus:label-image:toggle-answers-hidden",
           payload: null
         });
+        (_this$props$analytics6 = this.props.analytics) == null || _this$props$analytics6.onAnalyticsEvent({
+          type: "perseus:label-image:toggle-answers-hidden:ti",
+          payload: null
+        });
         this.setState({
           hideAnswers
         });
@@ -37555,8 +36278,7 @@ var LabelImage$1 = {
   displayName: "Label Image",
   widget: LabelImageWithDependencies,
   accessible: true,
-  isLintable: true,
-  getPublicWidgetOptions: getLabelImagePublicWidgetOptions
+  isLintable: true
 };
 
 var ItemState = /*#__PURE__*/function (ItemState) {
@@ -37811,20 +36533,24 @@ class Draggable extends React.Component {
     if (this.props.margin != null) {
       style.margin = this.props.margin;
     }
-    return /*#__PURE__*/React.createElement("li", {
-      className: className,
-      style: style,
-      onMouseDown: this.onMouseDown,
-      onTouchStart: this.onMouseDown,
-      onTouchMove: this.onMouseMove,
-      onTouchEnd: this.onMouseUp,
-      onTouchCancel: this.onMouseUp
-    }, /*#__PURE__*/React.createElement(Renderer, {
-      content: this.props.content,
-      linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "draggable"),
-      onRender: this.props.onRender,
-      strings: this.context.strings
-    }));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- TODO(LEMS-2871): Address a11y error
+      React.createElement("li", {
+        className: className,
+        style: style,
+        onMouseDown: this.onMouseDown,
+        onTouchStart: this.onMouseDown,
+        onTouchMove: this.onMouseMove,
+        onTouchEnd: this.onMouseUp,
+        onTouchCancel: this.onMouseUp
+      }, /*#__PURE__*/React.createElement(Renderer, {
+        content: this.props.content,
+        linterContext: PerseusLinter.pushContextStack(this.props.linterContext, "draggable"),
+        onRender: this.props.onRender,
+        strings: this.context.strings
+      }))
+    );
   }
 }
 Draggable.contextType = PerseusI18nContext;
@@ -38894,8 +37620,7 @@ var Matrix$1 = {
   widget: Matrix,
   transform: propTransform$1,
   staticTransform: staticTransform$2,
-  isLintable: true,
-  getPublicWidgetOptions: getMatrixPublicWidgetOptions
+  isLintable: true
 };
 
 const getPromptJSON$7 = () => {
@@ -40468,8 +39193,7 @@ var NumberLine$1 = {
   displayName: "Number line",
   widget: NumberLine,
   transform: numberLineTransform,
-  staticTransform: staticTransform$1,
-  getPublicWidgetOptions: getNumberLinePublicWidgetOptions
+  staticTransform: staticTransform$1
 };
 
 const getPromptJSON$5 = (renderProps, userInput) => {
@@ -40637,19 +39361,23 @@ class Card extends React.Component {
     // Pull out the content to get rendered
     const rendererProps = _.pick(this.props, "content");
     const onMouseDown = this.props.animating ? $.noop : this.onMouseDown;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "card-wrap",
-      style: style,
-      onMouseDown: onMouseDown,
-      onTouchStart: onMouseDown,
-      onTouchEnd: this.onMouseUp,
-      onTouchCancel: this.onMouseUp
-    }, /*#__PURE__*/React.createElement("div", {
-      className: className.join(" ")
-    }, /*#__PURE__*/React.createElement(Renderer, _extends({}, rendererProps, {
-      linterContext: this.props.linterContext,
-      strings: this.context.strings
-    }))));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- TODO(LEMS-2871): Address a11y error
+      React.createElement("div", {
+        className: "card-wrap",
+        style: style,
+        onMouseDown: onMouseDown,
+        onTouchStart: onMouseDown,
+        onTouchEnd: this.onMouseUp,
+        onTouchCancel: this.onMouseUp
+      }, /*#__PURE__*/React.createElement("div", {
+        className: className.join(" ")
+      }, /*#__PURE__*/React.createElement(Renderer, _extends({}, rendererProps, {
+        linterContext: this.props.linterContext,
+        strings: this.context.strings
+      }))))
+    );
   }
 }
 Card.contextType = PerseusI18nContext;
@@ -41029,8 +39757,7 @@ var Orderer$1 = {
   displayName: "Orderer",
   hidden: true,
   widget: Orderer,
-  isLintable: true,
-  getPublicWidgetOptions: getOrdererPublicWidgetOptions
+  isLintable: true
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -42090,8 +40817,7 @@ var Plotter$1 = {
   displayName: "Plotter",
   hidden: true,
   widget: Plotter,
-  staticTransform: staticTransform,
-  getPublicWidgetOptions: getPlotterPublicWidgetOptions
+  staticTransform: staticTransform
 };
 
 const getPromptJSON$2 = () => {
@@ -42253,8 +40979,7 @@ var Sorter$1 = {
   name: "sorter",
   displayName: "Sorter",
   widget: Sorter,
-  isLintable: true,
-  getPublicWidgetOptions: getSorterPublicWidgetOptions
+  isLintable: true
 };
 
 const {
@@ -42473,8 +41198,7 @@ var Table$1 = {
   widget: Table,
   transform: propTransform,
   hidden: true,
-  isLintable: true,
-  getPublicWidgetOptions: getTablePublicWidgetOptions
+  isLintable: true
 };
 
 const getPromptJSON = () => {
@@ -42653,7 +41377,7 @@ const init = function init() {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "53.1.0";
+const libVersion = "54.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44140,6 +42864,18 @@ function getWidgetTypeByWidgetId(WidgetId, widgetMap) {
   const widget = widgetMap[WidgetId];
   return (_widget$type = widget == null ? void 0 : widget.type) != null ? _widget$type : null;
 }
+function getWidgetSubTypeByWidgetId(widgetId, widgetMap) {
+  var _widget$type2, _graph$type;
+  const widget = widgetMap[widgetId];
+  const widgetType = (_widget$type2 = widget == null ? void 0 : widget.type) != null ? _widget$type2 : null;
+  switch (widgetType) {
+    case "interactive-graph":
+      const graph = widget.options.graph;
+      return (_graph$type = graph == null ? void 0 : graph.type) != null ? _graph$type : null;
+    default:
+      return null;
+  }
+}
 
 /**
  * Does the content have a specific type of widget?
@@ -44932,5 +43668,5 @@ const ScoringUtil = {
  * Types
  */
 
-export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, JiptParagraphs, KhanColors, context as LoadingContext, Log, Matrix$1 as MatrixWidget, NumericInput$1 as NumericInput, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, Radio, Renderer, ScoringUtil, ref as ServerItemRenderer, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, apiVersion, bodyXsmallBold, components, containerSizeClass, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getInteractiveBoxFromSizeClass, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, iconChevronDown, iconTrash, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, ItemVersion as itemVersion, libVersion, makeSafeUrl, mathOnlyParser, mediaQueries, parseDataFromJSONP, preprocessTex, registerAllWidgetsForTesting, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, JiptParagraphs, KhanColors, context as LoadingContext, Log, Matrix$1 as MatrixWidget, NumericInput$1 as NumericInput, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, Radio, Renderer, ScoringUtil, ref as ServerItemRenderer, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, apiVersion, bodyXsmallBold, components, containerSizeClass, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getInteractiveBoxFromSizeClass, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetSubTypeByWidgetId, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, iconChevronDown, iconTrash, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, ItemVersion as itemVersion, libVersion, makeSafeUrl, mathOnlyParser, mediaQueries, parseDataFromJSONP, preprocessTex, registerAllWidgetsForTesting, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map