@khanacademy/perseus 3.0.0 → 4.0.0

package/src/widgets/interactive-graph.jsx

@@ -1,2820 +0,0 @@
-/* eslint-disable @babel/no-invalid-this, react/no-unsafe, react/sort-comp */
-// @flow
-import {number as knumber, point as kpoint} from "@khanacademy/kmath";
-import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import $ from "jquery";
-import debounce from "lodash.debounce";
-import * as React from "react";
-import _ from "underscore";
-
-import Graph from "../components/graph.jsx";
-import Interactive2 from "../interactive2.js";
-import WrappedLine from "../interactive2/wrapped-line.js";
-import {Errors} from "../logging/log.js";
-import {PerseusError} from "../perseus-error.js";
-import Util from "../util.js";
-import KhanColors from "../util/colors.js";
-import GraphUtils from "../util/graph-utils.js";
-import {getInteractiveBoxFromSizeClass} from "../util/sizing-utils.js";
-
-import type {Coord, Line} from "../interactive2/types.js";
-import type {
-    PerseusGraphType,
-    PerseusGraphTypeAngle,
-    PerseusGraphTypePoint,
-    PerseusGraphTypePolygon,
-    PerseusGraphTypeSegment,
-    PerseusInteractiveGraphWidgetOptions,
-} from "../perseus-types.js";
-import type {PerseusScore, WidgetExports, WidgetProps} from "../types.js";
-
-type Range = $ReadOnlyArray<number>; // This should really be a readonly tuple of [number, number]
-type SineCoefficient = [
-    /* amplitude */ number,
-    /* angularFrequency */ number,
-    /* phase */ number,
-    /* verticalOffset */ number,
-];
-type QuadraticCoefficient = [/* a */ number, /* b */ number, /* c */ number];
-
-const {DeprecationMixin} = Util;
-
-const TRASH_ICON_URI =
-    "https://ka-perseus-graphie.s3.amazonaws.com/b1452c0d79fd0f7ff4c3af9488474a0a0decb361.png";
-
-const defaultBackgroundImage = {
-    url: null,
-};
-
-const eq = Util.eq;
-const deepEq = Util.deepEq;
-
-const UNLIMITED = ("unlimited": "unlimited");
-
-// Sample background image:
-// https://ka-perseus-graphie.s3.amazonaws.com/29c1b0fcd17fe63df0f148fe357044d5d5c7d0bb.png
-
-function ccw(a: Coord, b: Coord, c: Coord): number {
-    return (b[0] - a[0]) * (c[1] - a[1]) - (c[0] - a[0]) * (b[1] - a[1]);
-}
-
-function collinear(a: Coord, b: Coord, c: Coord): boolean {
-    return eq(ccw(a, b, c), 0);
-}
-
-function sign(val: number): 0 | 1 | -1 {
-    if (eq(val, 0)) {
-        return 0;
-    }
-    return val > 0 ? 1 : -1;
-}
-
-// default to defaultValue if actual is null or undefined
-function defaultVal<T>(actual: ?T, defaultValue: T): T {
-    return actual == null ? defaultValue : actual;
-}
-
-// Given rect bounding points A and B, whether point C is inside the rect
-function pointInRect(a: Coord, b: Coord, c: Coord): boolean {
-    return (
-        c[0] <= Math.max(a[0], b[0]) &&
-        c[0] >= Math.min(a[0], b[0]) &&
-        c[1] <= Math.max(a[1], b[1]) &&
-        c[1] >= Math.min(a[1], b[1])
-    );
-}
-
-// Whether line segment AB intersects line segment CD
-// http://www.geeksforgeeks.org/check-if-two-given-line-segments-intersect/
-function intersects(ab: Line, cd: Line): boolean {
-    const triplets = [
-        [ab[0], ab[1], cd[0]],
-        [ab[0], ab[1], cd[1]],
-        [cd[0], cd[1], ab[0]],
-        [cd[0], cd[1], ab[1]],
-    ];
-
-    const orientations = _.map(triplets, function (triplet) {
-        return sign(ccw(...triplet));
-    });
-
-    if (
-        orientations[0] !== orientations[1] &&
-        orientations[2] !== orientations[3]
-    ) {
-        return true;
-    }
-
-    for (let i = 0; i < 4; i++) {
-        if (orientations[i] === 0 && pointInRect(...triplets[i])) {
-            return true;
-        }
-    }
-
-    return false;
-}
-
-function vector(a, b) {
-    return _.map(_.zip(a, b), function (pair) {
-        return pair[0] - pair[1];
-    });
-}
-
-function magnitude(v: $ReadOnlyArray<Coord>): number {
-    return Math.sqrt(
-        _.reduce(
-            v,
-            function (memo, el) {
-                return memo + Math.pow(el, 2);
-            },
-            0,
-        ),
-    );
-}
-
-function dotProduct(a: Coord, b: Coord): number {
-    return _.reduce(
-        _.zip(a, b),
-        function (memo, pair) {
-            return memo + pair[0] * pair[1];
-        },
-        0,
-    );
-}
-
-function sideLengths(coords: $ReadOnlyArray<Coord>): $ReadOnlyArray<number> {
-    const segments = _.zip(coords, rotate(coords));
-    return segments.map(function (segment) {
-        return magnitude(vector(...segment));
-    });
-}
-
-// Based on http://math.stackexchange.com/a/151149
-function angleMeasures(coords: $ReadOnlyArray<Coord>): $ReadOnlyArray<number> {
-    const triplets = _.zip(rotate(coords, -1), coords, rotate(coords, 1));
-
-    const offsets = _.map(triplets, function (triplet) {
-        const p = vector(triplet[1], triplet[0]);
-        const q = vector(triplet[2], triplet[1]);
-        const raw = Math.acos(dotProduct(p, q) / (magnitude(p) * magnitude(q)));
-        return sign(ccw(...triplet)) > 0 ? raw : -raw;
-    });
-
-    const sum = _.reduce(
-        offsets,
-        function (memo, arg) {
-            return memo + arg;
-        },
-        0,
-    );
-
-    return _.map(offsets, function (offset) {
-        return sum > 0 ? Math.PI - offset : Math.PI + offset;
-    });
-}
-
-// Whether two polygons are similar (or if specified, congruent)
-function similar(
-    coords1: $ReadOnlyArray<Coord>,
-    coords2: $ReadOnlyArray<Coord>,
-    tolerance: number,
-): boolean {
-    if (coords1.length !== coords2.length) {
-        return false;
-    }
-
-    const n = coords1.length;
-
-    const angles1 = angleMeasures(coords1);
-    const angles2 = angleMeasures(coords2);
-
-    const sides1 = sideLengths(coords1);
-    const sides2 = sideLengths(coords2);
-
-    for (let i = 0; i < 2 * n; i++) {
-        let angles = angles2.slice();
-        let sides = sides2.slice();
-
-        // Reverse angles and sides to allow matching reflected polygons
-        if (i >= n) {
-            angles.reverse();
-            sides.reverse();
-            // Since sides are calculated from two coordinates,
-            // simply reversing results in an off by one error
-            sides = rotate(sides, 1);
-        }
-
-        angles = rotate(angles, i);
-        sides = rotate(sides, i);
-
-        if (deepEq(angles1, angles)) {
-            const sidePairs = _.zip(sides1, sides);
-
-            const factors = _.map(sidePairs, function (pair) {
-                return pair[0] / pair[1];
-            });
-
-            const same = _.all(factors, function (factor) {
-                return eq(factors[0], factor);
-            });
-
-            const congruentEnough = _.all(sidePairs, function (pair) {
-                return knumber.equal(pair[0], pair[1], tolerance);
-            });
-
-            if (same && congruentEnough) {
-                return true;
-            }
-        }
-    }
-
-    return false;
-}
-
-// Less than or approximately equal
-function leq(a, b) {
-    return a < b || eq(a, b);
-}
-
-// Given triangle with sides ABC return angle opposite side C in degrees
-function lawOfCosines(a: number, b: number, c: number): number {
-    return (Math.acos((a * a + b * b - c * c) / (2 * a * b)) * 180) / Math.PI;
-}
-
-function canonicalSineCoefficients([
-    amplitude,
-    angularFrequency,
-    phase,
-    verticalOffset,
-]: SineCoefficient) {
-    // For a curve of the form f(x) = a * Sin(b * x - c) + d,
-    // this function ensures that a, b > 0, and c is its
-    // smallest possible positive value.
-
-    // Guarantee a > 0
-    if (amplitude < 0) {
-        amplitude *= -1;
-        angularFrequency *= -1;
-        phase *= -1;
-    }
-
-    const period = 2 * Math.PI;
-    // Guarantee b > 0
-    if (angularFrequency < 0) {
-        angularFrequency *= -1;
-        phase *= -1;
-        phase += period / 2;
-    }
-
-    // Guarantee c is smallest possible positive value
-    while (phase > 0) {
-        phase -= period;
-    }
-    while (phase < 0) {
-        phase += period;
-    }
-
-    return [amplitude, angularFrequency, phase, verticalOffset];
-}
-
-// e.g. rotate([1, 2, 3]) -> [2, 3, 1]
-function rotate<T>(array: $ReadOnlyArray<T>, n?: number): $ReadOnlyArray<T> {
-    n = typeof n === "undefined" ? 1 : n % array.length;
-    return array.slice(n).concat(array.slice(0, n));
-}
-
-function capitalize(str) {
-    return str.replace(/(?:^|-)(.)/g, function (match, letter) {
-        return letter.toUpperCase();
-    });
-}
-
-function getLineEquation(first: Coord, second: Coord): string {
-    if (eq(first[0], second[0])) {
-        return "x = " + first[0].toFixed(3);
-    }
-    const m = (second[1] - first[1]) / (second[0] - first[0]);
-    const b = first[1] - m * first[0];
-    return "y = " + m.toFixed(3) + "x + " + b.toFixed(3);
-}
-
-// Stolen from the wikipedia article
-// http://en.wikipedia.org/wiki/Line-line_intersection
-function getLineIntersection(
-    // TODO(LP-10725): update these to be 2-tuples
-    firstPoints: $ReadOnlyArray<Coord>,
-    secondPoints: $ReadOnlyArray<Coord>,
-): string {
-    const x1 = firstPoints[0][0];
-    const y1 = firstPoints[0][1];
-    const x2 = firstPoints[1][0];
-    const y2 = firstPoints[1][1];
-    const x3 = secondPoints[0][0];
-    const y3 = secondPoints[0][1];
-    const x4 = secondPoints[1][0];
-    const y4 = secondPoints[1][1];
-
-    const determinant = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
-
-    if (Math.abs(determinant) < 1e-9) {
-        return "Lines are parallel";
-    }
-    const x =
-        ((x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4)) /
-        determinant;
-    const y =
-        ((x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4)) /
-        determinant;
-    return "Intersection: (" + x.toFixed(3) + ", " + y.toFixed(3) + ")";
-}
-
-function numSteps(range: Range, step: number) {
-    return Math.floor((range[1] - range[0]) / step);
-}
-
-const deprecatedProps = {
-    showGraph: function (props) {
-        return {markings: props.showGraph ? "graph" : "none"};
-    },
-};
-
-const _getShouldShowInstructions: (Props) => boolean = (props) => {
-    return (
-        _isClickToAddPoints(props) &&
-        (props.graph.coords == null || props.graph.coords.length === 0)
-    );
-};
-
-const _isClickToAddPoints: (Props) => boolean = (props) => {
-    return (
-        (props.graph.type === "point" && props.graph.numPoints === UNLIMITED) ||
-        (props.graph.type === "polygon" && props.graph.numSides === UNLIMITED)
-    );
-};
-
-const makeInvalidTypeError = (
-    functionName: string,
-    graphType: string,
-): PerseusError => {
-    return new PerseusError(
-        `${functionName} called but current graph type is not a '${graphType}'`,
-        Errors.NotAllowed,
-        {metadata: {graphType}},
-    );
-};
-
-type RenderProps = PerseusInteractiveGraphWidgetOptions; // There's no transform function in exports
-type Rubric = PerseusInteractiveGraphWidgetOptions;
-type Props = WidgetProps<RenderProps, Rubric>;
-type State = $FlowFixMe;
-type DefaultProps = {|
-    labels: Props["labels"],
-    range: Props["range"],
-    step: Props["step"],
-    backgroundImage: Props["backgroundImage"],
-    markings: Props["markings"],
-    showTooltips: Props["showTooltips"],
-    showProtractor: Props["showProtractor"],
-    showRuler: Props["showRuler"],
-    rulerLabel: Props["rulerLabel"],
-    rulerTicks: Props["rulerTicks"],
-    graph: Props["graph"],
-|};
-
-class InteractiveGraph extends React.Component<Props, State> {
-    angle: ?$FlowFixMe;
-    circle: ?$FlowFixMe;
-    graphie: ?$FlowFixMe;
-    horizHairline: ?$FlowFixMe;
-    line: ?$FlowFixMe;
-    lines: ?$ReadOnlyArray<$ReadOnlyArray<Coord>>;
-    parabola: ?$FlowFixMe;
-    pointA: ?$FlowFixMe;
-    pointB: ?$FlowFixMe;
-    pointC: ?$FlowFixMe;
-    // eslint-disable-next-line ft-flow/no-mutable-array
-    points: Array<$FlowFixMe>;
-    polygon: ?$FlowFixMe;
-    shouldResetGraphie: boolean;
-    sinusoid: ?$FlowFixMe;
-    trashCan: ?$FlowFixMe;
-    vertHairline: ?$FlowFixMe;
-
-    static defaultProps: DefaultProps = {
-        labels: ["x", "y"],
-        range: [
-            [-10, 10],
-            [-10, 10],
-        ],
-        step: [1, 1],
-        // $FlowFixMe[prop-missing]
-        backgroundImage: defaultBackgroundImage,
-        markings: "graph",
-        showTooltips: false,
-        showProtractor: false,
-        showRuler: false,
-        rulerLabel: "",
-        rulerTicks: 10,
-        graph: {
-            type: "linear",
-        },
-    };
-
-    state: State = {
-        shouldShowInstructions: _getShouldShowInstructions(this.props),
-    };
-
-    // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
-    UNSAFE_componentWillMount() {
-        DeprecationMixin.UNSAFE_componentWillMount.call(this);
-    }
-
-    componentDidMount() {
-        // eslint-disable-next-line react/no-string-refs
-        this.setGraphie(this.refs.graph.graphie());
-    }
-
-    UNSAFE_componentWillReceiveProps(nextProps: Props) {
-        if (this.isClickToAddPoints() !== this.isClickToAddPoints(nextProps)) {
-            this.shouldResetGraphie = true;
-            this.setState({
-                shouldShowInstructions: _getShouldShowInstructions(nextProps),
-            });
-        }
-
-        if (
-            this.props.backgroundImage?.url !==
-                nextProps.backgroundImage?.url ||
-            this.props.backgroundImage !== nextProps.backgroundImage ||
-            this.props.containerSizeClass !== nextProps.containerSizeClass
-        ) {
-            this.shouldResetGraphie = true;
-        }
-    }
-
-    componentDidUpdate(prevProps: Props, prevState: State) {
-        // 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))
-        ) {
-            // $FlowFixMe[incompatible-use]
-            this["remove" + capitalize(oldType) + "Controls"]();
-            // $FlowFixMe[incompatible-use]
-            this["add" + capitalize(newType) + "Controls"]();
-        }
-        if (this.shouldResetGraphie) {
-            this.resetGraphie();
-        }
-    }
-
-    _getShouldShowInstructions: (?Props) => boolean = (props) => {
-        props = props || this.props;
-        return (
-            this.isClickToAddPoints(props) &&
-            (props.graph.coords == null || props.graph.coords.length === 0)
-        );
-    };
-
-    deprecatedProps: $FlowFixMe = deprecatedProps;
-
-    setGraphie: ($FlowFixMe) => void = (newGraphie) => {
-        this.graphie = newGraphie;
-        this.setupGraphie();
-    };
-
-    handleAddPointsMouseDown: (Coord) => void = (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") {
-                if (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,
-            });
-        }
-    };
-
-    resetGraphie: () => void = () => {
-        this.shouldResetGraphie = false;
-        this.parabola = null;
-        this.sinusoid = null;
-        // eslint-disable-next-line react/no-string-refs
-        this.refs.graph.reset();
-    };
-
-    setupGraphie: () => void = () => {
-        this.setTrashCanVisibility(0);
-        if (this.isClickToAddPoints()) {
-            this.setTrashCanVisibility(0.5);
-        }
-
-        if (this.props.apiOptions.isMobile) {
-            // $FlowFixMe[invalid-constructor]
-            this.horizHairline = new WrappedLine(this.graphie, [0, 0], [0, 0], {
-                normalStyle: {
-                    strokeWidth: 1,
-                },
-            });
-            this.horizHairline.attr({
-                stroke: KhanColors.INTERACTIVE,
-            });
-            this.horizHairline?.hide();
-
-            // $FlowFixMe[invalid-constructor]
-            this.vertHairline = new WrappedLine(this.graphie, [0, 0], [0, 0], {
-                normalStyle: {
-                    strokeWidth: 1,
-                },
-            });
-            this.vertHairline.attr({
-                stroke: KhanColors.INTERACTIVE,
-            });
-            this.vertHairline?.hide();
-        }
-
-        const type = this.props.graph.type;
-        // $FlowFixMe[incompatible-use]
-        this["add" + capitalize(type) + "Controls"]();
-    };
-
-    showHairlines: (Coord) => void = (point) => {
-        if (this.props.apiOptions.isMobile && this.props.markings !== "none") {
-            // Hairlines are already initialized when the graph is loaded, so
-            // here we just move them to the updated location and make them
-            // visible.
-            this.horizHairline?.moveTo(
-                [this.props.range[0][0], point[1]],
-                [this.props.range[0][1], point[1]],
-            );
-
-            this.horizHairline?.show();
-
-            this.vertHairline?.moveTo(
-                [point[0], this.props.range[1][0]],
-                [point[0], this.props.range[1][1]],
-            );
-
-            this.vertHairline?.show();
-        }
-    };
-
-    hideHairlines: () => void = () => {
-        if (this.props.apiOptions.isMobile) {
-            this.horizHairline?.hide();
-            this.vertHairline?.hide();
-        }
-    };
-
-    setTrashCanVisibility: (number) => void = (opacity) => {
-        const graphie = this.graphie;
-
-        if (knumber.equal(opacity, 0)) {
-            if (this.trashCan) {
-                this.trashCan.remove();
-                this.trashCan = null;
-            }
-        } else if (!this.props.apiOptions.isMobile) {
-            // Only if trash tooltips are not being used, we initialize the old
-            // trash can area.
-            if (!this.trashCan) {
-                this.trashCan = graphie?.raphael?.image(
-                    TRASH_ICON_URI,
-                    graphie.xpixels - 40,
-                    graphie.ypixels - 40,
-                    40,
-                    40,
-                );
-            }
-            this.trashCan?.attr({
-                opacity: opacity,
-            });
-        }
-    };
-
-    isClickToAddPoints: (?Props) => boolean = (props) => {
-        props = props || this.props;
-        return _isClickToAddPoints(props);
-    };
-
-    areAngleGraphsEqual(
-        prevGraph: PerseusGraphTypeAngle,
-        currentGraph: PerseusGraphTypeAngle,
-    ): boolean {
-        return (
-            prevGraph.allowReflexAngles !== currentGraph.allowReflexAngles ||
-            prevGraph.angleOffsetDeg !== currentGraph.angleOffsetDeg ||
-            prevGraph.snapDegrees !== currentGraph.snapDegrees
-        );
-    }
-
-    arePointGraphsEqual(
-        prevGraph: PerseusGraphTypePoint,
-        currentGraph: PerseusGraphTypePoint,
-    ): boolean {
-        return prevGraph.numPoints !== currentGraph.numPoints;
-    }
-
-    arePolygonGraphsEqual(
-        prevGraph: PerseusGraphTypePolygon,
-        currentGraph: PerseusGraphTypePolygon,
-    ): boolean {
-        return (
-            prevGraph.numSides !== currentGraph.numSides ||
-            prevGraph.showAngles !== currentGraph.showAngles ||
-            prevGraph.showSides !== currentGraph.showSides ||
-            prevGraph.snapTo !== currentGraph.snapTo
-        );
-    }
-
-    areSegmentGraphsEqual(
-        prevGraph: PerseusGraphTypeSegment,
-        currentGraph: PerseusGraphTypeSegment,
-    ): boolean {
-        return prevGraph.numSegments !== currentGraph.numSegments;
-    }
-
-    _lineStroke: () => {|"stroke-width"?: number|} = () => {
-        // This should probably use: this.props.apiOptions.isMobile
-        // $FlowFixMe[prop-missing]
-        // $FlowFixMe[incompatible-exact]
-        return this.props.isMobile ? {"stroke-width": 3} : {};
-    };
-
-    addLine: (string) => void = (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: [
-                    // $FlowFixMe[prop-missing]
-                    Interactive2.MovablePoint.constraints.bound(),
-                    // $FlowFixMe[prop-missing]
-                    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: {
-                stroke: this.props.apiOptions.isMobile
-                    ? KhanColors.BLUE_C
-                    : KhanColors.INTERACTIVE,
-                ...this._lineStroke(),
-            },
-        };
-
-        if (type === "line") {
-            // $FlowFixMe[prop-missing]
-            lineConfig.extendLine = true;
-        } else if (type === "ray") {
-            // $FlowFixMe[prop-missing]
-            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 !kpoint.equal(coord, points[1].coord());
-        });
-        points[1].listen("constraints", "isLine", (coord) => {
-            return !kpoint.equal(coord, points[0].coord());
-        });
-    };
-
-    removeLine: () => void = () => {
-        _.invoke(this.points, "remove");
-        this.line?.remove();
-    };
-
-    addLinearControls: () => void = () => {
-        this.addLine("line");
-    };
-
-    removeLinearControls: () => void = () => {
-        this.removeLine();
-    };
-
-    addQuadraticControls: () => void = () => {
-        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, {
-                // $FlowFixMe[incompatible-use]
-                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: [
-                // $FlowFixMe[prop-missing]
-                Interactive2.MovablePoint.constraints.bound(),
-                // $FlowFixMe[prop-missing]
-                Interactive2.MovablePoint.constraints.snap(),
-                (coord) => {
-                    return (
-                        !pointA ||
-                        // $FlowFixMe[incompatible-use]
-                        (coord[0] !== pointB.coord()[0] &&
-                            // $FlowFixMe[incompatible-use]
-                            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: [
-                // $FlowFixMe[prop-missing]
-                Interactive2.MovablePoint.constraints.bound(),
-                // $FlowFixMe[prop-missing]
-                Interactive2.MovablePoint.constraints.snap(),
-                (coord) => {
-                    return (
-                        !pointB ||
-                        // $FlowFixMe[incompatible-use]
-                        (coord[0] !== pointA.coord()[0] &&
-                            // $FlowFixMe[incompatible-use]
-                            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: [
-                // $FlowFixMe[prop-missing]
-                Interactive2.MovablePoint.constraints.bound(),
-                // $FlowFixMe[prop-missing]
-                Interactive2.MovablePoint.constraints.snap(),
-                (coord) => {
-                    return (
-                        !pointC ||
-                        // $FlowFixMe[incompatible-use]
-                        (coord[0] !== pointA.coord()[0] &&
-                            // $FlowFixMe[incompatible-use]
-                            coord[0] !== pointB.coord()[0])
-                    );
-                },
-            ],
-            onMove: onMoveHandler,
-        });
-
-        this.updateQuadratic();
-    };
-
-    updateQuadratic: () => void = () => {
-        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) {
-            const path = this.graphie?.svgParabolaPath(a, b, c);
-            this.parabola?.attr({path: path});
-        } else {
-            this.parabola = this.graphie?.parabola(a, b, c);
-            this.parabola?.attr({
-                stroke: this.props.apiOptions.isMobile
-                    ? KhanColors.BLUE_C
-                    : KhanColors.DYNAMIC,
-                ...this._lineStroke(),
-            });
-            this.parabola?.toBack();
-        }
-    };
-
-    removeQuadraticControls: () => void = () => {
-        this.pointA?.remove();
-        this.pointB?.remove();
-        this.pointC?.remove();
-        if (this.parabola) {
-            this.parabola.remove();
-            this.parabola = null;
-        }
-    };
-
-    addSinusoidControls: () => void = () => {
-        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, {
-                // $FlowFixMe[incompatible-use]
-                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: [
-                // $FlowFixMe[prop-missing]
-                Interactive2.MovablePoint.constraints.bound(),
-                // $FlowFixMe[prop-missing]
-                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: [
-                    // $FlowFixMe[prop-missing]
-                    Interactive2.MovablePoint.constraints.bound(),
-                    // $FlowFixMe[prop-missing]
-                    Interactive2.MovablePoint.constraints.snap(),
-                    (coord) => {
-                        return !pointA || coord[0] !== pointA.coord()[0];
-                    },
-                ],
-                onMove: onMoveHandler,
-            },
-        ));
-
-        this.updateSinusoid();
-    };
-
-    updateSinusoid: () => void = () => {
-        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) {
-            const path = this.graphie?.svgSinusoidPath(a, b, c, d);
-            this.sinusoid?.attr({path: path});
-        } else {
-            this.sinusoid = this.graphie?.sinusoid(a, b, c, d);
-            this.sinusoid?.attr({
-                stroke: this.props.apiOptions.isMobile
-                    ? KhanColors.BLUE_C
-                    : KhanColors.DYNAMIC,
-                ...this._lineStroke(),
-            });
-            this.sinusoid?.toBack();
-        }
-    };
-
-    removeSinusoidControls: () => void = () => {
-        this.pointA?.remove();
-        this.pointB?.remove();
-        if (this.sinusoid) {
-            this.sinusoid.remove();
-            this.sinusoid = null;
-        }
-    };
-
-    addCircleControls: () => void = () => {
-        const graphie = this.graphie;
-        // $FlowFixMe[incompatible-use]
-        const minSnap = _.min(graphie.snap);
-
-        const circle = (this.circle = graphie?.addCircleGraph({
-            center: this.props.graph.center || [0, 0],
-            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, {
-                // $FlowFixMe[incompatible-use]
-                center: circle.center,
-                // $FlowFixMe[incompatible-use]
-                radius: circle.radius,
-            });
-            this.onChange({graph: graph});
-        });
-    };
-
-    removeCircleControls: () => void = () => {
-        this.circle?.remove();
-    };
-
-    addLinearSystemControls: () => void = () => {
-        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: [
-                                // $FlowFixMe[prop-missing]
-                                Interactive2.MovablePoint.constraints.bound(),
-                                // $FlowFixMe[prop-missing]
-                                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 !kpoint.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],
-                },
-            });
-        });
-    };
-
-    removeLinearSystemControls: () => void = () => {
-        _.invoke(this.lines, "remove");
-        _.map(this.points, (segment) => _.invoke(segment, "remove"));
-    };
-
-    isCoordInTrash: (Coord) => boolean = (coord) => {
-        if (this.props.apiOptions.isMobile) {
-            return false;
-        }
-
-        const graphie = this.graphie;
-        const screenPoint = graphie?.scalePoint(coord);
-        return (
-            // $FlowFixMe[incompatible-use]
-            screenPoint[0] >= graphie.xpixels - 40 &&
-            // $FlowFixMe[incompatible-use]
-            screenPoint[1] >= graphie.ypixels - 40
-        );
-    };
-
-    createPointForPointsType: (Coord, number) => $FlowFixMe = (coord, i) => {
-        const self = this;
-
-        const remove = () => {
-            self.points = _.filter(self.points, function (pt) {
-                return pt !== point;
-            });
-            // 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.
-            // $FlowFixMe[incompatible-use]
-            setTimeout(point.remove.bind(point), 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 = null;
-        point = Interactive2.addMaybeMobileMovablePoint(this, {
-            coord: coord,
-            constraints: [
-                // $FlowFixMe[prop-missing]
-                Interactive2.MovablePoint.constraints.bound(),
-                // $FlowFixMe[prop-missing]
-                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 === pt || !kpoint.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;
-    };
-
-    removePoint: (Coord) => ?number = (point) => {
-        let index = null;
-        this.points = _.filter(this.points, function (pt, i) {
-            if (pt === point) {
-                index = i;
-                return false;
-            }
-            return true;
-        });
-        return index;
-    };
-
-    createPointForPolygonType: (Coord, number) => $FlowFixMe = (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 = () => {
-            // remove this point from points
-            const index = this.removePoint(point);
-            if (this.polygon?.closed()) {
-                // We should be checking if this.points is defined before rotating them.
-                // $FlowFixMe[incompatible-call]
-                // $FlowFixMe[incompatible-type]
-                this.points = rotate(this.points, index);
-                this.polygon?.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.remove.bind(point), 0);
-        };
-
-        const setInitialMove = debounce((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 === this.points[0] &&
-                    kpoint.equal(coord, _.last(this.points).coord())) ||
-                    (point === _.last(this.points) &&
-                        kpoint.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) {
-                        this.polygon?.update({closed: true});
-                        this.updateCoordsFromPoints();
-                    } else {
-                        this.polygon?.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 && kpoint.equal(pt.coord(), coord);
-                    });
-
-                    if (shouldRemove) {
-                        this.removePoint(point);
-
-                        if (this.points.length < 3) {
-                            this.polygon?.update({closed: false});
-                            this.clearCoords();
-                        } else if (this.polygon?.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.remove.bind(point), 0);
-                    } else {
-                        // 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 === _.head(this.points) ||
-                            point === _.last(this.points);
-                        const pointNotMoved = !point.hasMoved();
-                        // NOTE (jsatk): Currently different on mobile versus
-                        // destkop
-                        const notANewPoint = !point.state.isInitialMove;
-                        const polygonNotClosed = !this.polygon?.closed();
-                        const allPointsPlotted = this.points.length > 2;
-
-                        const canCloseUnclosedPolygon =
-                            isFirstOrLastPoint &&
-                            pointNotMoved &&
-                            notANewPoint &&
-                            polygonNotClosed &&
-                            allPointsPlotted;
-
-                        if (canCloseUnclosedPolygon) {
-                            this.polygon?.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, 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;
-            }
-
-            // eslint-disable-next-line ft-flow/no-mutable-array
-            const coords: Array<Coord> = _.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];
-                            if (intersects(segment, other)) {
-                                return false;
-                            }
-                        }
-                    }
-                }
-            }
-
-            if (
-                this.props.graph.snapTo === "angles" &&
-                this.points.length > 2
-            ) {
-                // 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 (a, vertex, b) {
-                    const angle = GraphUtils.findAngle(
-                        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(
-                    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.findAngle(
-                    coords[rel(1)],
-                    coords[rel(-1)],
-                );
-
-                const offset = this.graphie?.polar(
-                    side,
-                    outerAngle + (onLeft ? 1 : -1) * innerAngles[0],
-                );
-
-                return this.graphie?.addPoints(coords[rel(-1)], offset);
-            }
-            if (this.props.graph.snapTo === "sides" && this.points.length > 1) {
-                // 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) {
-                        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.findAngle(
-                    coords[rel(1)],
-                    coords[rel(-1)],
-                );
-
-                const onLeft =
-                    sign(ccw(coords[rel(-1)], coords[rel(1)], coords[i])) === 1;
-
-                const offset = this.graphie?.polar(
-                    sides[0],
-                    outerAngle + (onLeft ? 1 : -1) * innerAngle,
-                );
-
-                return this.graphie?.addPoints(coords[rel(-1)], offset);
-            }
-            // Snap to grid (already done)
-            return true;
-        };
-
-        const point = Interactive2.addMaybeMobileMovablePoint(this, {
-            coord: coord,
-            constraints: [
-                // $FlowFixMe[prop-missing]
-                Interactive2.MovablePoint.constraints.bound(),
-                snapToGrid
-                    ? // $FlowFixMe[prop-missing]
-                      Interactive2.MovablePoint.constraints.snap()
-                    : null,
-                graphConstraint,
-            ],
-            onMoveStart: () => {
-                if (this.isClickToAddPoints()) {
-                    this.setTrashCanVisibility(1);
-                }
-            },
-            onMove: () => {
-                if (this.polygon?.closed()) {
-                    this.updateCoordsFromPoints();
-                }
-            },
-            onMoveEnd: onMoveEndHandler,
-            ...(this.props.apiOptions.isMobile && this.isClickToAddPoints()
-                ? {onRemove: remove}
-                : {}),
-        });
-
-        point.state.isInitialMove = true;
-
-        return point;
-    };
-
-    updateCoordsFromPoints: () => void = () => {
-        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});
-    };
-
-    clearCoords: () => void = () => {
-        const graph = _.extend({}, this.props.graph, {
-            coords: null,
-        });
-        this.onChange({graph: graph});
-    };
-
-    onChange: ($FlowFixMe) => void = (data) => {
-        this.props.onChange(data);
-        this.props.trackInteraction();
-    };
-
-    addPointControls: () => void = () => {
-        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);
-    };
-
-    removePointControls: () => void = () => {
-        _.invoke(this.points, "remove");
-    };
-
-    addSegmentControls: () => void = () => {
-        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 () {
-                    const graph = _.extend({}, self.props.graph, {
-                        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: [
-                                // $FlowFixMe[prop-missing]
-                                Interactive2.MovablePoint.constraints.bound(),
-                                // $FlowFixMe[prop-missing]
-                                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 !kpoint.equal(
-                                        coord,
-                                        otherPoint.coord(),
-                                    );
-                                },
-                            ],
-                            onMove: updateCoordProps,
-                        }),
-                    );
-                }
-
-                self.points = self.points.concat(points);
-                const line = Interactive2.addMovableLine(graphie, {
-                    points: points,
-                    static: false,
-                    constraints: [
-                        // $FlowFixMe[prop-missing]
-                        Interactive2.MovableLine.constraints.bound(),
-                        // $FlowFixMe[prop-missing]
-                        Interactive2.MovableLine.constraints.snap(),
-                    ],
-                    onMove: [
-                        // $FlowFixMe[prop-missing]
-                        Interactive2.MovableLine.onMove.updatePoints,
-                        updateCoordProps,
-                    ],
-                    normalStyle: {
-                        stroke: this.props.apiOptions.isMobile
-                            ? KhanColors.BLUE_C
-                            : KhanColors.INTERACTIVE,
-                        ...this._lineStroke(),
-                    },
-                    highlightStyle: {
-                        stroke: this.props.apiOptions.isMobile
-                            ? KhanColors.BLUE_C
-                            : KhanColors.INTERACTING,
-                        ...this._lineStroke(),
-                    },
-                });
-                _.invoke(points, "toFront");
-
-                return line;
-            },
-            this,
-        );
-    };
-
-    removeSegmentControls: () => void = () => {
-        _.invoke(this.points, "remove");
-        _.invoke(this.lines, "remove");
-    };
-
-    addRayControls: () => void = () => {
-        this.addLine("ray");
-    };
-
-    removeRayControls: () => void = () => {
-        this.removeLine();
-    };
-
-    addPolygonControls: () => void = () => {
-        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();
-    };
-
-    updatePolygon: () => void = () => {
-        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 (
-                    !this.props.graph.showAngles ||
-                    (!closed && (i === 0 || i === n - 1))
-                ) {
-                    return "";
-                }
-                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 (
-                    this.props.graph.showAngles &&
-                    (closed || (i !== 0 && i !== n - 1))
-                ) {
-                    return 1;
-                }
-                return 0;
-            },
-            this,
-        );
-
-        const sideLabels = _.times(
-            n,
-            function (i) {
-                if (!this.props.graph.showSides || (!closed && i === n - 1)) {
-                    return "";
-                }
-                if (this.props.graph.snapTo === "sides") {
-                    return "$len0";
-                }
-                return "$len1";
-            },
-            this,
-        );
-
-        if (this.polygon == null) {
-            const self = this;
-            self.polygon = Interactive2.addMovablePolygon(graphie, {
-                constraints: [
-                    // $FlowFixMe[prop-missing]
-                    Interactive2.MovablePolygon.constraints.bound(),
-                    snapToGrid
-                        ? // $FlowFixMe[prop-missing]
-                          Interactive2.MovablePolygon.constraints.snap()
-                        : null,
-                ],
-                closed: closed,
-                points: self.points,
-                angleLabels: angleLabels,
-                showRightAngleMarkers: showRightAngleMarkers,
-                numArcs: numArcs,
-                sideLabels: sideLabels,
-                onMove: [
-                    // $FlowFixMe[prop-missing]
-                    Interactive2.MovablePolygon.onMove.updatePoints,
-                    function () {
-                        if (this.closed()) {
-                            self.updateCoordsFromPoints();
-                        }
-                    },
-                ],
-                normalStyle: {
-                    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,
-            });
-        }
-    };
-
-    removePolygonControls: () => void = () => {
-        _.invoke(this.points, "remove");
-        this.polygon?.remove();
-    };
-
-    addAngleControls: () => void = () => {
-        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?.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?.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", () => {
-            this.onChange({
-                graph: {...graph, coords: this.angle?.getClockwiseCoords()},
-            });
-        });
-    };
-
-    removeAngleControls: () => void = () => {
-        _.invoke(this.points, "remove");
-        this.angle?.remove();
-    };
-
-    toggleShowAngles: () => void = () => {
-        if (this.props.graph.type !== "polygon") {
-            throw makeInvalidTypeError("toggleShowAngles", "polygon");
-        }
-        const graph = _.extend({}, this.props.graph, {
-            showAngles: !this.props.graph.showAngles,
-        });
-        this.onChange({graph: graph});
-    };
-
-    toggleShowSides: () => void = () => {
-        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});
-    };
-
-    getUserInput: () => PerseusGraphType = () => {
-        return InteractiveGraph.getUserInputFromProps(this.props);
-    };
-
-    simpleValidate: (Rubric) => PerseusScore = (rubric) => {
-        return InteractiveGraph.validate(this.getUserInput(), rubric, this);
-    };
-
-    focus: () => void = $.noop;
-
-    render(): React.Node {
-        const box = getInteractiveBoxFromSizeClass(
-            this.props.containerSizeClass,
-        );
-
-        let instructions;
-        if (this.isClickToAddPoints() && this.state.shouldShowInstructions) {
-            if (this.props.graph.type === "point") {
-                instructions = i18n._("Click to add points");
-            } else if (this.props.graph.type === "polygon") {
-                instructions = i18n._("Click to add vertices");
-            }
-        } else {
-            instructions = undefined;
-        }
-
-        const onMouseDown = this.isClickToAddPoints()
-            ? this.handleAddPointsMouseDown
-            : null;
-
-        const gridStep =
-            this.props.gridStep ||
-            Util.getGridStep(this.props.range, this.props.step, box[0]);
-        const snapStep =
-            this.props.snapStep || Util.snapStepFromGridStep(gridStep);
-
-        const isMobile = this.props.apiOptions.isMobile;
-
-        return (
-            <div
-                className={
-                    "perseus-widget " + "perseus-widget-interactive-graph"
-                }
-                style={{
-                    width: box[0],
-                    height: box[1],
-                }}
-            >
-                <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}
-                    showRuler={this.props.showRuler}
-                    rulerLabel={this.props.rulerLabel}
-                    rulerTicks={this.props.rulerTicks}
-                    onMouseDown={onMouseDown}
-                    onGraphieUpdated={this.setGraphie}
-                    setDrawingAreaAvailable={
-                        this.props.apiOptions.setDrawingAreaAvailable
-                    }
-                    isMobile={isMobile}
-                />
-            </div>
-        );
-    }
-
-    static getQuadraticCoefficients(
-        coords: $ReadOnlyArray<Coord>,
-    ): QuadraticCoefficient {
-        const p1 = coords[0];
-        const p2 = coords[1];
-        const p3 = coords[2];
-
-        const denom = (p1[0] - p2[0]) * (p1[0] - p3[0]) * (p2[0] - p3[0]);
-        if (denom === 0) {
-            // Many of the callers assume that the return value is always defined.
-            // $FlowFixMe[incompatible-return]
-            return;
-        }
-        const a =
-            (p3[0] * (p2[1] - p1[1]) +
-                p2[0] * (p1[1] - p3[1]) +
-                p1[0] * (p3[1] - p2[1])) /
-            denom;
-        const b =
-            (p3[0] * p3[0] * (p1[1] - p2[1]) +
-                p2[0] * p2[0] * (p3[1] - p1[1]) +
-                p1[0] * p1[0] * (p2[1] - p3[1])) /
-            denom;
-        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];
-    }
-
-    static getSinusoidCoefficients(
-        coords: $ReadOnlyArray<Coord>,
-    ): SineCoefficient {
-        // It's assumed that p1 is the root and p2 is the first peak
-        const p1 = coords[0];
-        const p2 = coords[1];
-
-        // Resulting coefficients are canonical for this sine curve
-        const amplitude = p2[1] - p1[1];
-        const angularFrequency = Math.PI / (2 * (p2[0] - p1[0]));
-        const phase = p1[0] * angularFrequency;
-        const verticalOffset = p1[1];
-
-        return [amplitude, angularFrequency, phase, verticalOffset];
-    }
-
-    /**
-     * @param {object} graph Like props.graph or props.correct
-     * @param {object} props of an InteractiveGraph instance
-     */
-    static getLineCoords(
-        graph: PerseusGraphType,
-        props: Props,
-    ): $ReadOnlyArray<Coord> {
-        return (
-            // $FlowFixMe[incompatible-return]
-            graph.coords ||
-            InteractiveGraph.pointsFromNormalized(props, [
-                [0.25, 0.75],
-                [0.75, 0.75],
-            ])
-        );
-    }
-
-    /**
-     * @param {object} graph Like props.graph or props.correct
-     * @param {object} props of an InteractiveGraph instance
-     */
-    static getPointCoords(
-        graph: PerseusGraphTypePoint,
-        props: Props,
-    ): $ReadOnlyArray<Coord> {
-        const numPoints = graph.numPoints || 1;
-        let coords = graph.coords;
-
-        if (coords) {
-            return coords;
-        }
-        switch (numPoints) {
-            case 1:
-                // Back in the day, one point's coords were in graph.coord
-                coords = [graph.coord || [0, 0]];
-                break;
-            case 2:
-                coords = [
-                    [-5, 0],
-                    [5, 0],
-                ];
-                break;
-            case 3:
-                coords = [
-                    [-5, 0],
-                    [0, 0],
-                    [5, 0],
-                ];
-                break;
-            case 4:
-                coords = [
-                    [-6, 0],
-                    [-2, 0],
-                    [2, 0],
-                    [6, 0],
-                ];
-                break;
-            case 5:
-                coords = [
-                    [-6, 0],
-                    [-3, 0],
-                    [0, 0],
-                    [3, 0],
-                    [6, 0],
-                ];
-                break;
-            case 6:
-                coords = [
-                    [-5, 0],
-                    [-3, 0],
-                    [-1, 0],
-                    [1, 0],
-                    [3, 0],
-                    [5, 0],
-                ];
-                break;
-            case UNLIMITED:
-                coords = [];
-                break;
-        }
-        // Transform coords from their -10 to 10 space to 0 to 1
-        // because of the old graph.coord, and also it's easier.
-        const range = [
-            [-10, 10],
-            [-10, 10],
-        ];
-        // $FlowFixMe[incompatible-call]
-        const newCoords = InteractiveGraph.normalizeCoords(coords, range);
-
-        return InteractiveGraph.pointsFromNormalized(props, newCoords);
-    }
-
-    /**
-     * @param {object} graph Like props.graph or props.correct
-     * @param {object} props of an InteractiveGraph instance
-     */
-    static getLinearSystemCoords(
-        graph: PerseusGraphType,
-        props: Props,
-    ): $ReadOnlyArray<$ReadOnlyArray<Coord>> {
-        return (
-            // The callers assume that we're return an array of points
-            // $FlowFixMe[incompatible-return]
-            graph.coords ||
-            _.map(
-                [
-                    [
-                        [0.25, 0.75],
-                        [0.75, 0.75],
-                    ],
-                    [
-                        [0.25, 0.25],
-                        [0.75, 0.25],
-                    ],
-                ],
-                (coords) => {
-                    return InteractiveGraph.pointsFromNormalized(props, coords);
-                },
-            )
-        );
-    }
-
-    /**
-     * @param {object} graph Like props.graph or props.correct
-     * @param {object} props of an InteractiveGraph instance
-     */
-    static getPolygonCoords(
-        graph: PerseusGraphType,
-        props: Props,
-    ): $ReadOnlyArray<Coord> {
-        if (graph.type !== "polygon") {
-            throw makeInvalidTypeError("toggleShowSides", "polygon");
-        }
-
-        let coords = graph.coords;
-        if (coords) {
-            return coords;
-        }
-
-        const n = graph.numSides || 3;
-
-        if (n === UNLIMITED) {
-            coords = [];
-        } else {
-            // $FlowFixMe[unsafe-addition]
-            const angle = (2 * Math.PI) / n;
-            // $FlowFixMe[unsafe-addition]
-            const offset = (1 / n - 1 / 2) * Math.PI;
-
-            // TODO(alex): Generalize this to more than just triangles so that
-            // all polygons have whole number side lengths if snapping to sides
-            const radius =
-                graph.snapTo === "sides" ? (Math.sqrt(3) / 3) * 7 : 4;
-
-            // Generate coords of a regular polygon with n sides
-            coords = _.times(n, function (i) {
-                return [
-                    radius * Math.cos(i * angle + offset),
-                    radius * Math.sin(i * angle + offset),
-                ];
-            });
-        }
-
-        const ranges: [Range, Range] = [
-            [-10, 10],
-            [-10, 10],
-        ];
-        coords = InteractiveGraph.normalizeCoords(coords, ranges);
-
-        const snapToGrid = !_.contains(["angles", "sides"], graph.snapTo);
-        coords = InteractiveGraph.pointsFromNormalized(
-            props,
-            coords,
-            /* noSnap */ !snapToGrid,
-        );
-
-        return coords;
-    }
-
-    /**
-     * @param {object} graph Like props.graph or props.correct
-     * @param {object} props of an InteractiveGraph instance
-     */
-    static getSegmentCoords(
-        graph: PerseusGraphTypeSegment,
-        props: Props,
-    ): $ReadOnlyArray<$ReadOnlyArray<Coord>> {
-        const coords = graph.coords;
-        if (coords) {
-            return coords;
-        }
-
-        const n = graph.numSegments || 1;
-        const ys: $ReadOnlyArray<number> = {
-            // $FlowFixMe[unsupported-syntax]
-            1: [5],
-            // $FlowFixMe[unsupported-syntax]
-            2: [5, -5],
-            // $FlowFixMe[unsupported-syntax]
-            3: [5, 0, -5],
-            // $FlowFixMe[unsupported-syntax]
-            4: [6, 2, -2, -6],
-            // $FlowFixMe[unsupported-syntax]
-            5: [6, 3, 0, -3, -6],
-            // $FlowFixMe[unsupported-syntax]
-            6: [5, 3, 1, -1, -3, -5],
-        }[n];
-        const range = [
-            [-10, 10],
-            [-10, 10],
-        ];
-
-        return ys.map(function (y) {
-            let segment = [
-                [-5, y],
-                [5, y],
-            ];
-            segment = InteractiveGraph.normalizeCoords(segment, range);
-            segment = InteractiveGraph.pointsFromNormalized(props, segment);
-            return segment;
-        });
-    }
-
-    /**
-     * @param {object} graph Like props.graph or props.correct
-     * @param {object} props of an InteractiveGraph instance
-     */
-    static getAngleCoords(
-        graph: PerseusGraphTypeAngle,
-        props: Props,
-    ): $ReadOnlyArray<Coord> {
-        let coords = graph.coords;
-        if (coords) {
-            return coords;
-        }
-
-        const snap = graph.snapDegrees || 1;
-        let angle = snap;
-        while (angle < 20) {
-            angle += snap;
-        }
-        angle = (angle * Math.PI) / 180;
-        const offset = ((graph.angleOffsetDeg || 0) * Math.PI) / 180;
-
-        coords = InteractiveGraph.pointsFromNormalized(props, [
-            [0.85, 0.5],
-            [0.5, 0.5],
-        ]);
-
-        const radius = magnitude(vector(...coords));
-
-        // Adjust the lower point by angleOffsetDeg degrees
-        // $FlowFixMe[cannot-write]
-        coords[0] = [
-            coords[1][0] + radius * Math.cos(offset),
-            coords[1][1] + radius * Math.sin(offset),
-        ];
-        // Position the upper point angle radians from the
-        // lower point
-        // $FlowFixMe[cannot-write]
-        coords[2] = [
-            coords[1][0] + radius * Math.cos(angle + offset),
-            coords[1][1] + radius * Math.sin(angle + offset),
-        ];
-
-        return coords;
-    }
-
-    static normalizeCoords(
-        coordsList: $ReadOnlyArray<Coord>,
-        ranges: [Range, Range],
-    ): $ReadOnlyArray<Coord> {
-        return _.map(coordsList, function (coords) {
-            return _.map(coords, function (coord, i) {
-                const extent = ranges[i][1] - ranges[i][0];
-                return (coord + ranges[i][1]) / extent;
-            });
-        });
-    }
-
-    static getEquationString(props: Props): string {
-        const type = props.graph.type;
-        const funcName = "get" + capitalize(type) + "EquationString";
-        // $FlowFixMe[incompatible-use]
-        return InteractiveGraph[funcName](props);
-    }
-
-    static pointsFromNormalized(
-        props: Props,
-        coordsList: $ReadOnlyArray<Coord>,
-        noSnap?: boolean,
-    ): $ReadOnlyArray<Coord> {
-        return _.map(coordsList, function (coords) {
-            return _.map(coords, function (coord, i) {
-                const range: Range = props.range[i];
-                if (noSnap) {
-                    return range[0] + (range[1] - range[0]) * coord;
-                }
-                const step = props.step[i];
-                const nSteps = numSteps(range, step);
-                const tick = Math.round(coord * nSteps);
-                return range[0] + step * tick;
-            });
-        });
-    }
-
-    static getLinearEquationString(props: Props): string {
-        const coords = InteractiveGraph.getLineCoords(props.graph, props);
-        if (eq(coords[0][0], coords[1][0])) {
-            return "x = " + coords[0][0].toFixed(3);
-        }
-        const m = (coords[1][1] - coords[0][1]) / (coords[1][0] - coords[0][0]);
-        const b = coords[0][1] - m * coords[0][0];
-        if (eq(m, 0)) {
-            return "y = " + b.toFixed(3);
-        }
-        return "y = " + m.toFixed(3) + "x + " + b.toFixed(3);
-    }
-
-    static getCurrentQuadraticCoefficients(props: Props): QuadraticCoefficient {
-        // TODO(alpert): Don't duplicate
-        const coords =
-            props.graph.coords ||
-            InteractiveGraph.defaultQuadraticCoords(props);
-        // $FlowFixMe[incompatible-call]
-        return InteractiveGraph.getQuadraticCoefficients(coords);
-    }
-
-    static defaultQuadraticCoords(props: Props): $ReadOnlyArray<Coord> {
-        const coords = [
-            [0.25, 0.75],
-            [0.5, 0.25],
-            [0.75, 0.75],
-        ];
-        return InteractiveGraph.pointsFromNormalized(props, coords);
-    }
-
-    static getQuadraticEquationString(props: Props): string {
-        const coeffs = InteractiveGraph.getCurrentQuadraticCoefficients(props);
-        return (
-            "y = " +
-            coeffs[0].toFixed(3) +
-            "x^2 + " +
-            coeffs[1].toFixed(3) +
-            "x + " +
-            coeffs[2].toFixed(3)
-        );
-    }
-
-    static getCurrentSinusoidCoefficients(props: Props): SineCoefficient {
-        const coords =
-            props.graph.coords || InteractiveGraph.defaultSinusoidCoords(props);
-        // $FlowFixMe[incompatible-call]
-        return InteractiveGraph.getSinusoidCoefficients(coords);
-    }
-
-    static defaultSinusoidCoords(props: Props): $ReadOnlyArray<Coord> {
-        const coords = [
-            [0.5, 0.5],
-            [0.65, 0.6],
-        ];
-        return InteractiveGraph.pointsFromNormalized(props, coords);
-    }
-
-    static getSinusoidEquationString(props: Props): string {
-        const coeffs = InteractiveGraph.getCurrentSinusoidCoefficients(props);
-        return (
-            "y = " +
-            coeffs[0].toFixed(3) +
-            "sin(" +
-            coeffs[1].toFixed(3) +
-            "x - " +
-            coeffs[2].toFixed(3) +
-            ") + " +
-            coeffs[3].toFixed(3)
-        );
-    }
-
-    static getCircleEquationString(props: Props): string {
-        const graph = props.graph;
-        // TODO(alpert): Don't duplicate
-        const center = graph.center || [0, 0];
-        const radius = graph.radius || 2;
-        return (
-            "center (" + center[0] + ", " + center[1] + "), radius " + radius
-        );
-    }
-
-    static getLinearSystemEquationString(props: Props): string {
-        const coords = InteractiveGraph.getLinearSystemCoords(
-            props.graph,
-            props,
-        );
-
-        return (
-            "\n" +
-            getLineEquation(coords[0][0], coords[0][1]) +
-            "\n" +
-            getLineEquation(coords[1][0], coords[1][1]) +
-            "\n" +
-            getLineIntersection(coords[0], coords[1])
-        );
-    }
-
-    static getPointEquationString(props: Props): string {
-        if (props.graph.type !== "point") {
-            throw makeInvalidTypeError("getPointEquationString", "point");
-        }
-
-        const coords = InteractiveGraph.getPointCoords(props.graph, props);
-        return coords
-            .map(function (coord) {
-                return "(" + coord[0] + ", " + coord[1] + ")";
-            })
-            .join(", ");
-    }
-
-    static getSegmentEquationString(props: Props): string {
-        if (props.graph.type !== "segment") {
-            throw makeInvalidTypeError("getSegmentEquationString", "segment");
-        }
-
-        const segments = InteractiveGraph.getSegmentCoords(props.graph, props);
-        return _.map(segments, function (segment) {
-            return (
-                "[" +
-                _.map(segment, function (coord) {
-                    return "(" + coord.join(", ") + ")";
-                }).join(" ") +
-                "]"
-            );
-        }).join(" ");
-    }
-
-    static getRayEquationString(props: Props): string {
-        if (props.graph.type !== "ray") {
-            throw makeInvalidTypeError("createPointForPolygonType", "ray");
-        }
-
-        const coords = InteractiveGraph.getLineCoords(props.graph, props);
-        const a = coords[0];
-        const b = coords[1];
-        let eq = InteractiveGraph.getLinearEquationString(props);
-
-        if (a[0] > b[0]) {
-            eq += " (for x <= " + a[0].toFixed(3) + ")";
-        } else if (a[0] < b[0]) {
-            eq += " (for x >= " + a[0].toFixed(3) + ")";
-        } else if (a[1] > b[1]) {
-            eq += " (for y <= " + a[1].toFixed(3) + ")";
-        } else {
-            eq += " (for y >= " + a[1].toFixed(3) + ")";
-        }
-
-        return eq;
-    }
-
-    static getPolygonEquationString(props: Props): string {
-        if (props.graph.type !== "polygon") {
-            throw makeInvalidTypeError("getPolygonEquationString", "polygon");
-        }
-        const coords = InteractiveGraph.getPolygonCoords(props.graph, props);
-        return _.map(coords, function (coord) {
-            return "(" + coord.join(", ") + ")";
-        }).join(" ");
-    }
-
-    static getAngleEquationString(props: Props): string {
-        if (props.graph.type !== "angle") {
-            throw makeInvalidTypeError("getAngleEquationString", "angle");
-        }
-        const coords = InteractiveGraph.getAngleCoords(props.graph, props);
-        const angle = GraphUtils.findAngle(coords[2], coords[0], coords[1]);
-        return (
-            angle.toFixed(0) +
-            "\u00B0 angle" +
-            " at (" +
-            coords[1].join(", ") +
-            ")"
-        );
-    }
-
-    static validate(
-        // TODO(kevinb): rename state to userInput
-        state: PerseusGraphType, // state === userInput
-        rubric: Rubric,
-        component: $FlowFixMe,
-    ): PerseusScore {
-        // When nothing has moved, there will neither be coords nor the
-        // circle's center/radius fields. When those fields are absent, skip
-        // all these checks; just go mark the answer as empty.
-        const hasValue = !!(state.coords || (state.center && state.radius));
-
-        if (state.type === rubric.correct.type && hasValue) {
-            if (
-                state.type === "linear" &&
-                rubric.correct.type === "linear" &&
-                state.coords != null
-            ) {
-                const guess = state.coords;
-                const correct = rubric.correct.coords;
-
-                // If both of the guess points are on the correct line, it's
-                // correct.
-                if (
-                    // $FlowFixMe[incompatible-use] - Fix type so coords can't be omitted
-                    collinear(correct[0], correct[1], guess[0]) &&
-                    collinear(correct[0], correct[1], guess[1])
-                ) {
-                    return {
-                        type: "points",
-                        earned: 1,
-                        total: 1,
-                        message: null,
-                    };
-                }
-            } else if (
-                state.type === "linear-system" &&
-                rubric.correct.type === "linear-system" &&
-                state.coords != null
-            ) {
-                const guess = state.coords;
-                // $FlowFixMe[incompatible-cast] - Fix type so this can't be undefined
-                const correct = (rubric.correct.coords: $ReadOnlyArray<
-                    $ReadOnlyArray<Coord>,
-                >);
-
-                if (
-                    (collinear(correct[0][0], correct[0][1], guess[0][0]) &&
-                        collinear(correct[0][0], correct[0][1], guess[0][1]) &&
-                        collinear(correct[1][0], correct[1][1], guess[1][0]) &&
-                        collinear(correct[1][0], correct[1][1], guess[1][1])) ||
-                    (collinear(correct[0][0], correct[0][1], guess[1][0]) &&
-                        collinear(correct[0][0], correct[0][1], guess[1][1]) &&
-                        collinear(correct[1][0], correct[1][1], guess[0][0]) &&
-                        collinear(correct[1][0], correct[1][1], guess[0][1]))
-                ) {
-                    return {
-                        type: "points",
-                        earned: 1,
-                        total: 1,
-                        message: null,
-                    };
-                }
-            } else if (
-                state.type === "quadratic" &&
-                rubric.correct.type === "quadratic" &&
-                state.coords != null
-            ) {
-                // If the parabola coefficients match, it's correct.
-                const guessCoeffs = this.getQuadraticCoefficients(state.coords);
-                const correctCoeffs = this.getQuadraticCoefficients(
-                    // $FlowFixMe[incompatible-call]
-                    // $FlowFixMe[prop-missing]
-                    rubric.correct.coords,
-                );
-                if (deepEq(guessCoeffs, correctCoeffs)) {
-                    return {
-                        type: "points",
-                        earned: 1,
-                        total: 1,
-                        message: null,
-                    };
-                }
-            } else if (
-                state.type === "sinusoid" &&
-                rubric.correct.type === "sinusoid" &&
-                state.coords != null
-            ) {
-                const guessCoeffs = this.getSinusoidCoefficients(state.coords);
-                const correctCoeffs = this.getSinusoidCoefficients(
-                    // $FlowFixMe[incompatible-call]
-                    // $FlowFixMe[prop-missing]
-                    rubric.correct.coords,
-                );
-
-                const canonicalGuessCoeffs =
-                    canonicalSineCoefficients(guessCoeffs);
-                const canonicalCorrectCoeffs =
-                    canonicalSineCoefficients(correctCoeffs);
-                // If the canonical coefficients match, it's correct.
-                if (deepEq(canonicalGuessCoeffs, canonicalCorrectCoeffs)) {
-                    return {
-                        type: "points",
-                        earned: 1,
-                        total: 1,
-                        message: null,
-                    };
-                }
-            } else if (
-                state.type === "circle" &&
-                rubric.correct.type === "circle"
-            ) {
-                if (
-                    deepEq(state.center, rubric.correct.center) &&
-                    // $FlowFixMe[prop-missing]
-                    eq(state.radius, rubric.correct.radius)
-                ) {
-                    return {
-                        type: "points",
-                        earned: 1,
-                        total: 1,
-                        message: null,
-                    };
-                }
-            } else if (
-                state.type === "point" &&
-                rubric.correct.type === "point" &&
-                state.coords != null
-            ) {
-                let correct = InteractiveGraph.getPointCoords(
-                    rubric.correct,
-                    component,
-                );
-                const guess = state.coords?.slice();
-                correct = correct.slice();
-                // Everything's already rounded so we shouldn't need to do an
-                // eq() comparison but _.isEqual(0, -0) is false, so we'll use
-                // eq() anyway. The sort should be fine because it'll stringify
-                // it and -0 converted to a string is "0"
-                guess?.sort();
-                correct.sort();
-                if (deepEq(guess, correct)) {
-                    return {
-                        type: "points",
-                        earned: 1,
-                        total: 1,
-                        message: null,
-                    };
-                }
-            } else if (
-                state.type === "polygon" &&
-                rubric.correct.type === "polygon" &&
-                state.coords != null
-            ) {
-                const guess: Array<Coord> = state.coords?.slice(); // eslint-disable-line ft-flow/no-mutable-array
-                // $FlowFixMe[incompatible-type]
-                // $FlowFixMe[prop-missing]
-                const correct: Array<Coord> = rubric.correct.coords?.slice(); // eslint-disable-line ft-flow/no-mutable-array
-
-                let match;
-                if (rubric.correct.match === "similar") {
-                    match = similar(guess, correct, Number.POSITIVE_INFINITY);
-                } else if (rubric.correct.match === "congruent") {
-                    match = similar(guess, correct, knumber.DEFAULT_TOLERANCE);
-                } else if (rubric.correct.match === "approx") {
-                    match = similar(guess, correct, 0.1);
-                } else {
-                    /* exact */
-                    guess.sort();
-                    correct.sort();
-                    match = deepEq(guess, correct);
-                }
-
-                if (match) {
-                    return {
-                        type: "points",
-                        earned: 1,
-                        total: 1,
-                        message: null,
-                    };
-                }
-            } else if (
-                state.type === "segment" &&
-                rubric.correct.type === "segment" &&
-                state.coords != null
-            ) {
-                let guess = state.coords.slice();
-                // $FlowFixMe[prop-missing]
-                let correct = rubric.correct.coords?.slice();
-                guess = _.invoke(guess, "sort").sort();
-                correct = _.invoke(correct, "sort").sort();
-                if (deepEq(guess, correct)) {
-                    return {
-                        type: "points",
-                        earned: 1,
-                        total: 1,
-                        message: null,
-                    };
-                }
-            } else if (
-                state.type === "ray" &&
-                rubric.correct.type === "ray" &&
-                state.coords != null
-            ) {
-                const guess = state.coords;
-                const correct = rubric.correct.coords;
-                if (
-                    // $FlowFixMe[incompatible-use]
-                    deepEq(guess[0], correct[0]) &&
-                    // $FlowFixMe[incompatible-use]
-                    collinear(correct[0], correct[1], guess[1])
-                ) {
-                    return {
-                        type: "points",
-                        earned: 1,
-                        total: 1,
-                        message: null,
-                    };
-                }
-            } else if (
-                state.type === "angle" &&
-                rubric.correct.type === "angle"
-            ) {
-                const guess = state.coords;
-                const correct = rubric.correct.coords;
-
-                let match;
-                if (rubric.correct.match === "congruent") {
-                    const angles = _.map([guess, correct], function (coords) {
-                        const angle = GraphUtils.findAngle(
-                            coords[2],
-                            coords[0],
-                            coords[1],
-                        );
-                        return (angle + 360) % 360;
-                    });
-                    match = eq(...angles);
-                } else {
-                    /* exact */
-                    match =
-                        // $FlowFixMe[incompatible-use]
-                        deepEq(guess[1], correct[1]) &&
-                        // $FlowFixMe[incompatible-use]
-                        collinear(correct[1], correct[0], guess[0]) &&
-                        // $FlowFixMe[incompatible-use]
-                        collinear(correct[1], correct[2], guess[2]);
-                }
-
-                if (match) {
-                    return {
-                        type: "points",
-                        earned: 1,
-                        total: 1,
-                        message: null,
-                    };
-                }
-            }
-        }
-
-        // The input wasn't correct, so check if it's a blank input or if it's
-        // actually just wrong
-        if (!hasValue || _.isEqual(state, rubric.graph)) {
-            // We're where we started.
-            return {
-                type: "invalid",
-                message: null,
-            };
-        }
-        return {
-            type: "points",
-            earned: 0,
-            total: 1,
-            message: null,
-        };
-    }
-
-    static getUserInputFromProps(props: Props): PerseusGraphType {
-        return props.graph;
-    }
-}
-
-export default ({
-    name: "interactive-graph",
-    displayName: "Interactive graph",
-    widget: InteractiveGraph,
-}: WidgetExports<typeof InteractiveGraph>);