@khanacademy/perseus 3.0.0 → 4.0.0

package/src/widgets/plotter.jsx

@@ -1,1198 +0,0 @@
-/* eslint-disable @babel/no-invalid-this, no-unused-vars, one-var, react/no-unsafe, react/sort-comp */
-// @flow
-import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import $ from "jquery";
-import PropTypes from "prop-types";
-import * as React from "react";
-import ReactDOM from "react-dom";
-import _ from "underscore";
-
-import Interactive2 from "../interactive2.js";
-import WrappedLine from "../interactive2/wrapped-line.js";
-import {ClassNames as ApiClassNames} from "../perseus-api.jsx";
-import Util from "../util.js";
-import KhanColors from "../util/colors.js";
-import GraphUtils from "../util/graph-utils.js";
-import KhanMath from "../util/math.js";
-
-import type {WidgetExports} from "../types.js";
-
-const {deepEq} = Util;
-
-const BAR = "bar",
-    LINE = "line",
-    PIC = "pic",
-    HISTOGRAM = "histogram",
-    DOTPLOT = "dotplot";
-
-const widgetPropTypes = {
-    type: PropTypes.oneOf([BAR, LINE, PIC, HISTOGRAM, DOTPLOT]),
-    labels: PropTypes.arrayOf(PropTypes.string),
-    categories: PropTypes.arrayOf(
-        PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    ),
-
-    scaleY: PropTypes.number,
-    maxY: PropTypes.number,
-    snapsPerLine: PropTypes.number,
-
-    picSize: PropTypes.number,
-    pixBoxHeight: PropTypes.number,
-    picUrl: PropTypes.string,
-
-    plotDimensions: PropTypes.arrayOf(PropTypes.number),
-    labelInterval: PropTypes.number,
-    starting: PropTypes.arrayOf(PropTypes.number),
-    static: PropTypes.bool,
-};
-
-class Plotter extends React.Component<$FlowFixMe, $FlowFixMe> {
-    shouldSetupGraphie: boolean;
-    _isMounted: boolean = false;
-    horizHairline: $FlowFixMe;
-    hairlineRange: $FlowFixMe;
-    graphie: $FlowFixMe;
-
-    static propTypes = {
-        onChange: PropTypes.func.isRequired,
-        trackInteraction: PropTypes.func.isRequired,
-        // TODO(alex): Figure out why lint chokes on this line
-        // ...widgetPropTypes,
-    };
-
-    static defaultProps: $FlowFixMe = {
-        type: BAR,
-        labels: ["", ""],
-        categories: [""],
-
-        scaleY: 1,
-        maxY: 10,
-        snapsPerLine: 2,
-
-        picSize: 40,
-        picBoxHeight: 48,
-        picUrl: "",
-
-        plotDimensions: [380, 300],
-        labelInterval: 1,
-    };
-
-    state: $FlowFixMe = {
-        values: this.props.starting || [1],
-
-        // The measured rendered height of category strings. Used to calculate
-        // bottom padding of plot, to prevent categories from overlapping the
-        // bottom label.
-        categoryHeights: {},
-    };
-
-    DOT_PLOT_POINT_SIZE: () => number = () => {
-        return this.props.apiOptions.isMobile ? 6 : 4;
-    };
-
-    DOT_PLOT_POINT_PADDING: () => number = () => {
-        return 8;
-    };
-
-    DOT_TICK_POINT_SIZE: () => number = () => {
-        return 2;
-    };
-
-    render(): React.Node {
-        // TODO(kevinb) actually compute the size of the graphie correctly and
-        // make it that size so we don't have to add extra padding.  The value
-        // was determined by eye-balling the layout.  :(
-        const paddingForBottomLabel = 75;
-        const style = {
-            marginBottom: this.props.labels[0] ? paddingForBottomLabel : 0,
-        };
-
-        return (
-            <div
-                className={
-                    "perseus-widget-plotter graphie " +
-                    ApiClassNames.INTERACTIVE
-                }
-                // eslint-disable-next-line react/no-string-refs
-                ref="graphieDiv"
-                style={style}
-            />
-        );
-    }
-
-    componentDidUpdate(prevProps: $FlowFixMe, prevState: $FlowFixMe) {
-        this.shouldSetupGraphie =
-            this.shouldSetupGraphie ||
-            !_.isEqual(this.state.categoryHeights, prevState.categoryHeights);
-
-        if (this.shouldSetupGraphie) {
-            this.setupGraphie(prevState);
-        }
-    }
-
-    componentDidMount() {
-        this._isMounted = true;
-
-        this.setupGraphie(this.state);
-    }
-
-    UNSAFE_componentWillReceiveProps(nextProps: $FlowFixMe) {
-        const props = [
-            "type",
-            "labels",
-            "categories",
-            "scaleY",
-            "maxY",
-            "snapsPerLine",
-            "picUrl",
-            "labelInterval",
-            "static",
-        ];
-
-        this.shouldSetupGraphie = _.any(
-            props,
-            function (prop) {
-                return !_.isEqual(this.props[prop], nextProps[prop]);
-            },
-            this,
-        );
-
-        if (
-            !_.isEqual(this.props.starting, nextProps.starting) &&
-            !_.isEqual(this.state.values, nextProps.starting)
-        ) {
-            this.shouldSetupGraphie = true;
-            this.setState({values: nextProps.starting});
-        }
-    }
-
-    componentWillUnmount() {
-        this._isMounted = false;
-    }
-
-    setupGraphie: ($FlowFixMe) => void = (prevState) => {
-        const self = this;
-        self.shouldSetupGraphie = false;
-        const graphieDiv = ReactDOM.findDOMNode(self.refs.graphieDiv);
-        $(graphieDiv).empty();
-        const graphie = GraphUtils.createGraphie(graphieDiv);
-
-        // TODO(jakesandlund): It's not the react way to hang
-        // something off the component object, but since graphie
-        // is outside React, it makes it easier to do this.
-        self.graphie = graphie;
-        self.graphie.pics = [];
-        self.graphie.dotTicks = [];
-
-        const isBar = self.props.type === BAR,
-            isLine = self.props.type === LINE,
-            isPic = self.props.type === PIC,
-            isHistogram = self.props.type === HISTOGRAM,
-            isDotplot = self.props.type === DOTPLOT;
-
-        const isTiledPlot = isPic || isDotplot;
-
-        const config = {};
-        const c = config; // c for short
-
-        const isMobile = this.props.apiOptions.isMobile;
-
-        c.graph = {
-            lines: [],
-            bars: [],
-            points: [],
-            dividers: [],
-        };
-        c.scaleY = self.props.scaleY;
-        c.dimX = self.props.categories.length;
-        const plotDimensions = isMobile
-            ? [288, 336]
-            : self.props.plotDimensions;
-        if (isLine) {
-            // Subtracting 0.2 makes line have equal padding on each side
-            c.dimX += isMobile ? -0.2 : 1;
-        } else if (isHistogram) {
-            c.barPad = 0;
-            c.barWidth = 1;
-        } else if (isBar) {
-            c.barPad = isMobile ? 0.08 : 0.15;
-            c.barWidth = 1 - 2 * c.barPad;
-            c.dimX += (isMobile ? -2 : 2) * c.barPad;
-        } else if (isTiledPlot) {
-            c.picBoxHeight = self.props.picBoxHeight;
-            c.picBoxWidthPx = plotDimensions[0] / self.props.categories.length;
-            const picPadAllWidth = plotDimensions[0] - c.dimX * c.picBoxWidthPx;
-            c.picPad = picPadAllWidth / (2 * c.dimX + 2);
-            const picFullWidth = c.picBoxWidthPx + 2 * c.picPad;
-
-            // Convert from px to "unscaled"
-            c.picPad = c.picPad / picFullWidth;
-            c.picBoxWidth = c.picBoxWidthPx / picFullWidth;
-            c.dimX += 2 * c.picPad;
-        }
-
-        if (isDotplot) {
-            c.picBoxHeight =
-                this.DOT_PLOT_POINT_SIZE() * 2 + this.DOT_PLOT_POINT_PADDING();
-        }
-
-        c.dimY = Math.ceil(self.props.maxY / c.scaleY) * c.scaleY;
-
-        let padX = 25;
-
-        if ((isBar || isLine) && isMobile) {
-            padX = self.props.labels[1].length !== 0 ? 17 : 11;
-        }
-
-        // Since dotplot doesn't have an axis along the left it looks weird
-        // with the same padding as the others
-        if (isDotplot) {
-            padX /= 2;
-        }
-
-        if (isMobile && isTiledPlot && self.props.labels[1].length === 0) {
-            padX = 0;
-        }
-
-        // Default vertical padding.
-        let padTop = 25;
-        let padBottom = 25 * 3;
-
-        // TODO(michaelpolyak): Handle other plot types: Dot, Histogram, Line.
-        if (isMobile && (isBar || isTiledPlot)) {
-            // $FlowFixMe[incompatible-call]
-            const maxCategoryHeight = Math.max(
-                0,
-                ...Object.values(self.state.categoryHeights),
-            );
-
-            if (maxCategoryHeight) {
-                // Account for bottom label position, height.
-                let offsetY = 25;
-
-                if (isTiledPlot) {
-                    // Tiled plot categories have additional spacing.
-                    offsetY += 10;
-                }
-
-                padBottom = offsetY + maxCategoryHeight;
-            }
-        }
-
-        if (isMobile) {
-            c.scale = [
-                // We multiply pad by 4 because we add 3*pad padding on the left
-                // and 1*pad on the right
-                (plotDimensions[0] - padX * 4) / c.dimX,
-                (plotDimensions[1] - (padTop + padBottom)) / c.dimY,
-            ];
-        } else {
-            c.scale = _.map([c.dimX, c.dimY], function (dim, i) {
-                return plotDimensions[i] / dim;
-            });
-        }
-
-        if (isTiledPlot) {
-            c.scale[1] = c.picBoxHeight / c.scaleY;
-        }
-
-        // Transform from screen space (pixels) to plot space.
-        padX /= c.scale[0];
-        padTop /= c.scale[1];
-        padBottom /= c.scale[1];
-
-        graphie.init({
-            range: [
-                [-3 * padX, c.dimX + padX],
-                [-padBottom, c.dimY + padTop],
-            ],
-            scale: c.scale,
-            isMobile: this.props.apiOptions.isMobile,
-        });
-        graphie.addMouseLayer({
-            allowScratchpad: true,
-            setDrawingAreaAvailable:
-                this.props.apiOptions.setDrawingAreaAvailable,
-        });
-
-        if (!isTiledPlot) {
-            // If we have isMobile, we skip the 0 label.
-            const initialY = isMobile ? c.scaleY : 0;
-            for (let y = initialY; y <= c.dimY; y += c.scaleY) {
-                graphie.label(
-                    [0, y],
-                    KhanMath.roundToApprox(y, 2),
-                    "left",
-                    /* isTeX */ true /* for the \approx symbol */,
-                );
-                graphie.style(
-                    {
-                        stroke: isMobile ? "#e9ebec" : "#000",
-                        strokeWidth: 1,
-                        opacity: isMobile ? 1 : 0.3,
-                    },
-                    function () {
-                        graphie.line([0, y], [c.dimX, y]);
-                    },
-                );
-            }
-        }
-
-        if ((isBar || isLine) && isMobile) {
-            self.graphie.dragPrompt = graphie
-                .label(
-                    [c.dimX / 2, c.dimY / 2],
-                    i18n._("Drag handles to make graph"),
-                    "center",
-                    false,
-                )
-                .css("font-weight", "bold")
-                .css("color", KhanColors.KA_GREEN)
-                .css("display", "none");
-        }
-
-        self.setupCategories(config);
-
-        if (isTiledPlot && isMobile) {
-            self.graphie.dotPrompt = graphie
-                .label(
-                    [c.dimX / 2, c.dimY / 2],
-                    i18n._("Tap to add points"),
-                    "center",
-                    false,
-                )
-                .css("font-weight", "bold")
-                .css("color", KhanColors.KA_GREEN)
-                .css("display", "none");
-        }
-
-        if (isTiledPlot) {
-            self.drawPicHeights(self.state.values, prevState.values);
-        }
-
-        graphie.style(
-            {stroke: "#000", strokeWidth: 2, opacity: 1.0},
-            function () {
-                if (isTiledPlot) {
-                    if (isDotplot) {
-                        // Dotplot is a subtype of tiled plot, here we only draw
-                        // the x-axis
-                        graphie.style(
-                            {
-                                stroke: isMobile ? KhanColors.GRAY_G : "#000",
-                                strokeWidth: isMobile ? 1 : 2,
-                            },
-                            () =>
-                                graphie.line(
-                                    [isMobile ? 0 : 0.5, 0],
-                                    [c.dimX - (isMobile ? 0 : 0.5), 0],
-                                ),
-                        );
-                    } else {
-                        graphie.line([0, 0], [c.dimX, 0]);
-
-                        // Draw the left axis for non-dotplots
-                        if (self.props.labels[1].length !== 0 || !isMobile) {
-                            graphie.style(
-                                {
-                                    stroke: isMobile
-                                        ? KhanColors.GRAY_G
-                                        : "#000",
-                                    strokeWidth: isMobile ? 1 : 2,
-                                },
-                                () => graphie.line([0, 0], [0, c.dimY]),
-                            );
-                        }
-                    }
-                } else {
-                    // Draw normal axes
-                    graphie.style(
-                        {
-                            stroke: isMobile ? KhanColors.GRAY_G : "#000",
-                            strokeWidth: isMobile ? 1 : 2,
-                        },
-                        () =>
-                            graphie.line(
-                                [isMobile ? -padX * 3 : 0, 0],
-                                [c.dimX + (isMobile ? padX : 0), 0],
-                            ),
-                    );
-
-                    if (!((isBar || isLine) && isMobile)) {
-                        graphie.style(
-                            {
-                                stroke: isMobile ? KhanColors.GRAY_G : "#000",
-                                strokeWidth: isMobile ? 1 : 2,
-                            },
-                            () => graphie.line([0, 0], [0, c.dimY]),
-                        );
-                    }
-                }
-            },
-        );
-
-        graphie
-            .label(
-                [c.dimX / 2, isMobile ? -padBottom : -35 / c.scale[1]],
-                self.props.labels[0],
-                isMobile ? "above" : "below",
-                false,
-            )
-            .css("font-weight", "bold")
-            .css("color", isMobile && KhanColors.GRAY_F);
-
-        graphie
-            .label(
-                [(isMobile ? -35 : -60) / c.scale[0], c.dimY / 2],
-                self.props.labels[1],
-                "center",
-                false,
-            )
-            .css("font-weight", "bold")
-            .css("color", isMobile && KhanColors.GRAY_F)
-            .addClass("rotate");
-
-        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();
-
-            this.hairlineRange = [
-                [0, c.dimX],
-                [0, c.dimY],
-            ];
-        }
-    };
-
-    showHairlines: ($FlowFixMe) => 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.hairlineRange[0][0], point[1]],
-                [this.hairlineRange[0][1], point[1]],
-            );
-
-            this.horizHairline.show();
-        }
-    };
-
-    hideHairlines: () => void = () => {
-        if (this.props.apiOptions.isMobile) {
-            this.horizHairline.hide();
-        }
-    };
-
-    labelCategory: ($FlowFixMe, $FlowFixMe) => Promise<$FlowFixMe> = (
-        x,
-        category,
-    ) => {
-        const isMobile = this.props.apiOptions.isMobile;
-
-        const graphie = this.graphie;
-        category = category + "";
-        let isTeX = false;
-        const mathyCategory = category.match(/^\$(.*)\$$/);
-        if (mathyCategory) {
-            category = mathyCategory[1];
-            isTeX = true;
-        }
-
-        const translateX = 5;
-        const rotationDeg = 45;
-        const rotationRad = rotationDeg * (Math.PI / 180);
-
-        const labelRotation =
-            `translateX(-50%) translateX(${translateX}px) ` +
-            `translateY(-50%) rotate(-${rotationDeg}deg)`;
-
-        const shouldRotate = isMobile && !mathyCategory;
-
-        // We return a promise that will resolve to measured category height.
-        return new Promise((resolve) => {
-            graphie.style(
-                {
-                    color: isMobile ? KhanColors.GRAY_G : "inherit",
-                    transform: shouldRotate ? labelRotation : "none",
-                    transformOrigin: "100%",
-                },
-                () => {
-                    const $span = graphie.label(
-                        [x, isMobile ? -0.5 : 0],
-                        category,
-                        "below",
-                        isTeX,
-                    );
-
-                    const height =
-                        // Additional padding is applied by style.
-                        14 +
-                        (shouldRotate
-                            ? Math.round(
-                                  $span.height() * Math.cos(rotationRad) +
-                                      ($span.width() + translateX) *
-                                          Math.sin(rotationRad),
-                              )
-                            : $span.height());
-
-                    resolve({category, height});
-                },
-            );
-        });
-    };
-
-    setupCategories: ($FlowFixMe) => void = (config) => {
-        const self = this;
-        const c = config;
-        const graphie = self.graphie;
-
-        const isMobile = this.props.apiOptions.isMobile;
-
-        // The deferred measurements returned from `labelCategory`.
-        const categoryHeightPromises = [];
-
-        if (self.props.type === HISTOGRAM) {
-            // Histograms with n labels/categories have n - 1 buckets
-            _.times(self.props.categories.length - 1, function (i) {
-                self.setupBar({
-                    index: i,
-                    startHeight: self.state.values[i],
-                    config: config,
-                    isHistogram: true,
-                });
-            });
-
-            // Label categories
-            _.each(self.props.categories, function (category, i) {
-                const x = 0.5 + i * c.barWidth;
-
-                categoryHeightPromises.push(self.labelCategory(x, category));
-                const tickHeight = 6 / c.scale[1];
-                graphie.style(
-                    {
-                        stroke: "#000",
-                        strokeWidth: isMobile ? 1 : 2,
-                        opacity: 1.0,
-                    },
-                    function () {
-                        graphie.line([x, -tickHeight], [x, 0]);
-                    },
-                );
-            });
-        } else {
-            _.each(self.props.categories, function (category, i) {
-                const startHeight = self.state.values[i];
-                let x;
-
-                if (self.props.type === BAR) {
-                    x = self.setupBar({
-                        index: i,
-                        startHeight: startHeight,
-                        config: config,
-                        isHistogram: false,
-                    });
-                } else if (self.props.type === LINE) {
-                    x = self.setupLine(i, startHeight, config);
-                } else if (self.props.type === PIC) {
-                    x = self.setupPic(i, config);
-                } else if (self.props.type === DOTPLOT) {
-                    x = self.setupDotplot(i, config);
-                }
-
-                let tickStart = 0;
-                let tickEnd = -6 / c.scale[1];
-
-                if (self.props.type === DOTPLOT && !isMobile) {
-                    tickStart = -tickEnd;
-                }
-
-                if (self.props.type === DOTPLOT) {
-                    // Dotplot lets you specify to only show labels every 'n'
-                    // ticks. It also looks nicer if it makes the labelled
-                    // ticks a bit bigger.
-                    if (
-                        i % self.props.labelInterval === 0 ||
-                        i === self.props.categories.length - 1
-                    ) {
-                        categoryHeightPromises.push(
-                            self.labelCategory(x, category),
-                        );
-                        tickStart *= 1.5;
-                        tickEnd *= 1.5;
-                    }
-                } else {
-                    categoryHeightPromises.push(
-                        self.labelCategory(x, category),
-                    );
-                }
-
-                graphie.style(
-                    {
-                        stroke: isMobile ? KhanColors.GRAY_G : "#000",
-                        strokeWidth: isMobile ? 1 : 2,
-                        opacity: 1.0,
-                    },
-                    function () {
-                        graphie.line([x, tickStart], [x, tickEnd]);
-                    },
-                );
-            });
-        }
-
-        Promise.all(categoryHeightPromises).then((measurements) => {
-            if (self._isMounted) {
-                const categoryHeights = {};
-
-                measurements.forEach(
-                    ({category, height}) =>
-                        (categoryHeights[category] = height),
-                );
-
-                self.setState({categoryHeights});
-            }
-        });
-    };
-
-    _clampValue: (number, number, number) => number = (v, min, max) => {
-        return Math.max(Math.min(v, max), min);
-    };
-
-    _maybeShowDragPrompt: () => void = () => {
-        // The drag prompt is only added on certain types of plots.
-        if (this.graphie.dragPrompt != null) {
-            this.graphie.dragPrompt[0].style.display = "inline";
-        }
-    };
-
-    _maybeHideDragPrompt: () => void = () => {
-        // The drag prompt is only added on certain types of plots.
-        if (this.graphie.dragPrompt != null) {
-            this.graphie.dragPrompt[0].style.display = "none";
-        }
-    };
-
-    setupBar: ($FlowFixMe) => number = (args) => {
-        const isMobile = this.props.apiOptions.isMobile;
-
-        const i = args.index;
-        const startHeight = args.startHeight;
-        const config = args.config;
-        const isHistogram = args.isHistogram;
-
-        const self = this;
-        const graphie = self.graphie;
-        const barHalfWidth = config.barWidth / 2;
-        let x;
-        if (isHistogram) {
-            x = 0.5 + i * config.barWidth + barHalfWidth;
-        } else {
-            x = (isMobile ? barHalfWidth : 0.5 + config.barPad) + i;
-        }
-
-        /**
-         * Updates the bar with given index to the given height
-         * @param i the index of the bar to update
-         * @param height the new height of the bar
-         */
-        const scaleBar = function (i, height) {
-            const center = graphie.scalePoint(0);
-
-            // Scale filled bucket (bar)
-            config.graph.bars[i].scale(
-                1,
-                Math.max(isMobile ? 0.2 : 0.01, height / config.scaleY),
-                center[0],
-                center[1],
-            );
-
-            if (isHistogram) {
-                // Scale dividers between buckets
-                const leftDivider = config.graph.dividers[i - 1],
-                    rightDivider = config.graph.dividers[i];
-
-                if (leftDivider) {
-                    const divHeight = Math.min(
-                        self.state.values[i - 1],
-                        height,
-                    );
-                    leftDivider.scale(
-                        1,
-                        Math.max(0.01, divHeight / config.scaleY),
-                        center[0],
-                        center[1],
-                    );
-                }
-
-                if (rightDivider) {
-                    const divHeight = Math.min(
-                        self.state.values[i + 1],
-                        height,
-                    );
-                    rightDivider.scale(
-                        1,
-                        Math.max(0.01, divHeight / config.scaleY),
-                        center[0],
-                        center[1],
-                    );
-                }
-            }
-        };
-
-        graphie.style(
-            {
-                stroke: "none",
-                fill: isMobile ? KhanColors.BLUE_C : KhanColors.LIGHT_BLUE,
-                opacity: 1.0,
-            },
-            function () {
-                config.graph.bars[i] = graphie.path([
-                    [x - barHalfWidth, 0],
-                    [x - barHalfWidth, config.scaleY],
-                    [x + barHalfWidth, config.scaleY],
-                    [x + barHalfWidth, 0],
-                    [x - barHalfWidth, 0],
-                ]);
-            },
-        );
-
-        if (isHistogram) {
-            if (i > 0) {
-                // Don't draw a divider to the left of the first bucket
-                graphie.style(
-                    {
-                        stroke: "#000",
-                        strokeWidth: 1,
-                        opacity: 0.3,
-                    },
-                    function () {
-                        config.graph.dividers.push(
-                            graphie.path([
-                                [x - barHalfWidth, 0],
-                                [x - barHalfWidth, config.scaleY],
-                            ]),
-                        );
-                    },
-                );
-            }
-        }
-
-        if (isMobile) {
-            const snap = config.scaleY / self.props.snapsPerLine;
-            config.graph.lines[i] = Interactive2.addMaybeMobileMovablePoint(
-                this,
-                {
-                    coord: [x, startHeight],
-                    constraints: [
-                        (coord, prev, options) => {
-                            return [
-                                x,
-                                this._clampValue(
-                                    Math.round(coord[1] / snap) * snap,
-                                    0,
-                                    config.dimY,
-                                ),
-                            ];
-                        },
-                    ],
-                    onMoveStart: function () {
-                        config.graph.bars[i].attr({
-                            fill: KhanColors.INTERACTIVE,
-                        });
-                    },
-                    onMove: function () {
-                        const y = config.graph.lines[i].coord()[1];
-
-                        const values = _.clone(self.state.values);
-                        values[i] = y;
-                        self.setState({values: values});
-                        self.changeAndTrack({values: values});
-
-                        self._maybeHideDragPrompt();
-
-                        scaleBar(i, y);
-                    },
-                    onMoveEnd: function () {
-                        config.graph.bars[i].attr({
-                            fill: KhanColors.BLUE_C,
-                        });
-                    },
-                },
-            );
-
-            // We set the z-index to 1 here so that the hairlines cover up the
-            // points
-            config.graph.lines[i].state.visibleShape.wrapper.style.zIndex = "1";
-
-            self._maybeShowDragPrompt();
-        } else {
-            config.graph.lines[i] = graphie.addMovableLineSegment({
-                coordA: [x - barHalfWidth, startHeight],
-                coordZ: [x + barHalfWidth, startHeight],
-                snapY: config.scaleY / self.props.snapsPerLine,
-                constraints: {
-                    constrainX: true,
-                },
-                normalStyle: {
-                    stroke: KhanColors.INTERACTIVE,
-                    // Don't display graph handles in static mode
-                    "stroke-width": this.props.static ? 0 : 4,
-                },
-            });
-
-            config.graph.lines[i].onMove = function (dx, dy) {
-                let y = this.coordA[1];
-                if (y < 0 || y > config.dimY) {
-                    y = Math.min(Math.max(y, 0), config.dimY);
-                    this.coordA[1] = this.coordZ[1] = y;
-
-                    // Snap the line back into range.
-                    this.transform();
-                }
-
-                const values = _.clone(self.state.values);
-                values[i] = y;
-                self.setState({values: values});
-                self.changeAndTrack({values: values});
-
-                scaleBar(i, y);
-            };
-        }
-
-        scaleBar(i, startHeight);
-        return x;
-    };
-
-    /**
-     * Renders a segment of an interactive line to the plotter graph
-     * @param i the index of the point to render
-     * @param startHeight the initial height of the given point
-     * @param config the graph setup, such as scale and dimensions
-     */
-    setupLine: (number, number, $FlowFixMe) => number = (
-        i,
-        startHeight,
-        config,
-    ) => {
-        const isMobile = this.props.apiOptions.isMobile;
-
-        const self = this;
-        const c = config;
-        const graphie = self.graphie;
-        const x = i + (isMobile ? 0.4 : 1);
-
-        if (isMobile) {
-            const snap = config.scaleY / self.props.snapsPerLine;
-            c.graph.points[i] = Interactive2.addMaybeMobileMovablePoint(this, {
-                coord: [x, startHeight],
-                constraints: [
-                    (coord, prev, options) => {
-                        return [
-                            x,
-                            this._clampValue(
-                                Math.round(coord[1] / snap) * snap,
-                                0,
-                                config.dimY,
-                            ),
-                        ];
-                    },
-                ],
-                onMove: function () {
-                    const y = c.graph.points[i].coord()[1];
-
-                    const values = _.clone(self.state.values);
-                    values[i] = y;
-                    self.setState({values: values});
-                    self.changeAndTrack({values: values});
-
-                    self._maybeHideDragPrompt();
-                },
-            });
-
-            self._maybeShowDragPrompt();
-
-            if (i > 0) {
-                c.graph.lines[i] = Interactive2.addMovableLine(graphie, {
-                    points: [c.graph.points[i - 1], c.graph.points[i]],
-                    // $FlowFixMe[prop-missing]
-                    constraints: Interactive2.MovablePoint.constraints.fixed(),
-                    normalStyle: {
-                        stroke: KhanColors.BLUE_C,
-                        "stroke-width": 2,
-                    },
-                    highlightStyle: {
-                        stroke: KhanColors.BLUE_C,
-                        "stroke-width": 2,
-                    },
-                });
-            }
-        } else {
-            c.graph.points[i] = graphie.addMovablePoint({
-                coord: [x, startHeight],
-                constraints: {
-                    constrainX: true,
-                },
-                normalStyle: {
-                    fill: KhanColors.INTERACTIVE,
-                    stroke: KhanColors.INTERACTIVE,
-                },
-                snapY: c.scaleY / self.props.snapsPerLine,
-            });
-            c.graph.points[i].onMove = function (x, y) {
-                y = Math.min(Math.max(y, 0), c.dimY);
-                const values = _.clone(self.state.values);
-                values[i] = y;
-                self.setState({values: values});
-                self.changeAndTrack({values: values});
-                return [x, y];
-            };
-
-            if (i > 0) {
-                c.graph.lines[i] = graphie.addMovableLineSegment({
-                    pointA: c.graph.points[i - 1],
-                    pointZ: c.graph.points[i],
-                    constraints: {
-                        fixed: true,
-                    },
-                    normalStyle: {
-                        stroke: "#9ab8ed",
-                        "stroke-width": 2,
-                    },
-                });
-            }
-        }
-
-        return x;
-    };
-
-    setupDotplot: ($FlowFixMe, $FlowFixMe) => $FlowFixMe = (i, config) => {
-        const graphie = this.graphie;
-        const isMobile = this.props.apiOptions.isMobile;
-
-        return this.setupTiledPlot(i, isMobile ? 0.5 : 1, config, (x, y) => {
-            return graphie.ellipse(
-                [x, y],
-                [
-                    this.DOT_PLOT_POINT_SIZE() / graphie.scale[0],
-                    this.DOT_PLOT_POINT_SIZE() / graphie.scale[1],
-                ],
-                {
-                    fill: KhanColors.INTERACTIVE,
-                    stroke: KhanColors.INTERACTIVE,
-                },
-            );
-        });
-    };
-
-    setupPic: ($FlowFixMe, $FlowFixMe) => $FlowFixMe = (i, config) => {
-        const graphie = this.graphie;
-        return this.setupTiledPlot(i, 0, config, (x, y) => {
-            const scaledCenter = graphie.scalePoint([x, y]);
-            const size = this.props.picSize;
-            return graphie.raphael.image(
-                this.props.picUrl,
-                scaledCenter[0] - size / 2,
-                scaledCenter[1] - size / 2,
-                size,
-                size,
-            );
-        });
-    };
-
-    setupTiledPlot: (
-        $FlowFixMe,
-        $FlowFixMe,
-        $FlowFixMe,
-        $FlowFixMe,
-    ) => $FlowFixMe = (i, bottomMargin, config, createImage) => {
-        const self = this;
-        const c = config;
-        const graphie = self.graphie;
-        const pics = graphie.pics;
-        const dotTicks = graphie.dotTicks;
-        const x = i + 0.5 + c.picPad;
-
-        // In order to make sure that manipulating the graph doesn't cause
-        // dragging, we disable touch actions for the whole mouselayer.
-        // TODO(emily): Figure out a way to turn of touch actions for only the
-        // part of the widget that can be manipulated. Putting this style
-        // directly on the rects below doesn't work.
-        graphie.mouselayer.canvas.style.touchAction = "none";
-
-        pics[i] = [];
-        dotTicks[i] = [];
-        const n = Math.round(c.dimY / c.scaleY) + 1;
-        _(n).times(function (j) {
-            j -= 1;
-            const midY = (j + 0.5) * c.scaleY;
-            const leftX = x - c.picBoxWidth / 2;
-            const topY = midY + 0.5 * c.scaleY;
-            const coord = graphie.scalePoint([leftX, topY + bottomMargin]);
-            const mouseRect = graphie.mouselayer.rect(
-                coord[0],
-                coord[1],
-                c.picBoxWidthPx,
-                c.picBoxHeight,
-            );
-            $(mouseRect[0])
-                .css({fill: "#000", opacity: 0.0, cursor: "pointer"})
-                .on("vmousedown", function (e) {
-                    e.preventDefault();
-                    // $FlowFixMe[prop-missing]
-                    self.whichPicClicked = i;
-                    self.setPicHeight(i, topY);
-
-                    $(document).on("vmouseup.plotTile", function (e) {
-                        $(document).unbind(".plotTile");
-                    });
-
-                    $(document).on("vmousemove.plotTile", function (e) {
-                        e.preventDefault();
-
-                        // Reverse-engineer the initial calculation
-                        const yCoord = graphie.getMouseCoord(e)[1];
-                        const adjustedCoord = Math.floor(yCoord - bottomMargin);
-
-                        // Calculate top coord from j value, but don't let them
-                        // go below j = -1, which is equivalent to having '0'
-                        // on the dot plot (due to weird indexing).
-                        const newJ = Math.max(
-                            -1,
-                            Math.floor(adjustedCoord / c.scaleY),
-                        );
-                        const newMidY = (newJ + 0.5) * c.scaleY;
-                        // Constrain the max Y value to max displayable Y of the
-                        // plot.  Otherwise users can unintentionally select an
-                        // out-of-range value and not see that they have done so.
-                        const newTopY = Math.min(
-                            newMidY + 0.5 * c.scaleY,
-                            c.dimY,
-                        );
-                        // $FlowFixMe[prop-missing]
-                        self.setPicHeight(self.whichPicClicked, newTopY);
-                    });
-                });
-
-            if (j < 0) {
-                // Don't show a pic underneath the axis!
-                return;
-            }
-            pics[i][j] = createImage(x, midY + bottomMargin);
-            dotTicks[i][j] = graphie.ellipse(
-                [x, midY + bottomMargin],
-                [
-                    self.DOT_TICK_POINT_SIZE() / graphie.scale[0],
-                    self.DOT_TICK_POINT_SIZE() / graphie.scale[1],
-                ],
-                {
-                    fill: "#dee1e3",
-                    stroke: "#dee1e3",
-                },
-            );
-        });
-        return x;
-    };
-
-    setPicHeight: (number, number) => void = (i, y) => {
-        const values = _.clone(this.state.values);
-        values[i] = y;
-        this.drawPicHeights(values, this.state.values);
-        this.setState({values: values});
-        this.changeAndTrack({values: values});
-    };
-
-    changeAndTrack: ($FlowFixMe) => void = (data) => {
-        this.props.onChange(data);
-        this.props.trackInteraction();
-    };
-
-    drawPicHeights: ($FlowFixMe, $FlowFixMe) => void = (values, prevValues) => {
-        const self = this;
-        const graphie = self.graphie;
-        const pics = graphie.pics;
-
-        const isMobile = this.props.apiOptions.isMobile;
-
-        if (isMobile) {
-            const shouldDisplay = values.every((v) => v === 0);
-            graphie.dotPrompt[0].style.display = shouldDisplay
-                ? "inline"
-                : "none";
-        }
-
-        _.each(pics, function (ps, i) {
-            _.each(ps, function (pic, j) {
-                const y = (j + 1) * self.props.scaleY;
-                const show = y <= values[i];
-
-                if (self.props.type === DOTPLOT) {
-                    const wasShown = y <= prevValues[i];
-                    const wasJustShown = show && !wasShown;
-                    if (wasJustShown) {
-                        pic.animate(
-                            {
-                                "stroke-width": 8,
-                            },
-                            75,
-                            () =>
-                                pic.animate(
-                                    {
-                                        "stroke-width": 2,
-                                    },
-                                    75,
-                                ),
-                        );
-                    }
-                }
-                $(pic[0]).css({display: show ? "inline" : "none"});
-
-                graphie.dotTicks[i][j][0].style.display =
-                    show || !isMobile ? "none" : "inline";
-            });
-        });
-    };
-
-    getUserInput: () => $FlowFixMe = () => {
-        return this.state.values;
-    };
-
-    simpleValidate: ($FlowFixMe) => $FlowFixMe = (rubric) => {
-        // $FlowFixMe[prop-missing]
-        return Plotter.validate(this.getUserInput(), rubric);
-    };
-}
-
-_.extend(Plotter, {
-    validate: function (guess, rubric) {
-        if (deepEq(guess, rubric.starting)) {
-            return {
-                type: "invalid",
-                message: null,
-            };
-        }
-        return {
-            type: "points",
-            earned: deepEq(guess, rubric.correct) ? 1 : 0,
-            total: 1,
-            message: null,
-        };
-    },
-});
-
-// We don't need to change any of the original props for static mode
-const staticTransform = _.identity;
-
-export default ({
-    name: "plotter",
-    displayName: "Plotter",
-    widget: Plotter,
-    staticTransform: staticTransform,
-}: WidgetExports<typeof Plotter>);