@khanacademy/perseus 2.1.0 → 4.0.0

package/src/widgets/number-line.jsx

@@ -1,858 +0,0 @@
-// @flow
-import {number as knumber} from "@khanacademy/kmath";
-import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import * as React from "react";
-import ReactDOM from "react-dom";
-import _ from "underscore";
-
-import Graphie from "../components/graphie.jsx";
-import MathOutput from "../components/math-output.jsx";
-import NumberInput from "../components/number-input.jsx";
-import SimpleKeypadInput from "../components/simple-keypad-input.jsx";
-import InteractiveUtil from "../interactive2/interactive-util.js";
-import * as Changeable from "../mixins/changeable.jsx";
-import {ApiOptions} from "../perseus-api.jsx";
-import KhanColors from "../util/colors.js";
-import KhanMath from "../util/math.js";
-
-import type {ChangeableProps} from "../mixins/changeable.jsx";
-import type {APIOptions, WidgetExports} from "../types";
-
-// $FlowFixMe[prop-missing]
-const MovablePoint = Graphie.MovablePoint;
-// $FlowFixMe[prop-missing]
-const Line = Graphie.Line;
-const {assert} = InteractiveUtil;
-
-const bound = (x, gt, lt) => Math.min(Math.max(x, gt), lt);
-
-const EN_DASH = "\u2013";
-const horizontalPadding = 30;
-
-const reverseRel = {
-    ge: "le",
-    gt: "lt",
-    le: "ge",
-    lt: "gt",
-};
-
-const toggleStrictRel = {
-    ge: "gt",
-    gt: "ge",
-    le: "lt",
-    lt: "le",
-};
-
-function formatImproper(n: number, d: number): string {
-    if (d === 1) {
-        return "" + n;
-    }
-    return `\\dfrac{${n}}{${d}}`;
-}
-
-function formatMixed(n: number, d: number): string {
-    if (n < 0) {
-        return "-" + formatMixed(-n, d);
-    }
-    const w = Math.floor(n / d);
-    if (w === 0) {
-        return formatImproper(n, d);
-    }
-    if (n - w * d === 0) {
-        return "" + w;
-    }
-    return w + formatImproper(n - w * d, d);
-}
-
-function formatNonReduced(n: number, d: number, base: number): string {
-    const factor = Math.floor(base / d);
-    return formatImproper(n * factor, base);
-}
-
-const _label = (graphie, labelStyle, pos, value, base: number): $FlowFixMe => {
-    value = value || pos;
-
-    // TODO(jack): Find out if any exercises have "decimal ticks" set,
-    // and if so, re-save them and remove this check.
-    if (labelStyle === "decimal" || labelStyle === "decimal ticks") {
-        return graphie.label(
-            [pos, -0.53],
-            Math.round(value * 100) / 100,
-            "center",
-        );
-    }
-    if (labelStyle === "improper") {
-        const frac = KhanMath.toFraction(value);
-        return graphie.label(
-            [pos, -0.17],
-            formatImproper(frac[0], frac[1]),
-            "below",
-        );
-    }
-    if (labelStyle === "mixed") {
-        const frac = KhanMath.toFraction(value);
-        return graphie.label(
-            [pos, -0.17],
-            formatMixed(frac[0], frac[1]),
-            "below",
-        );
-    }
-    if (labelStyle === "non-reduced") {
-        const frac = KhanMath.toFraction(value);
-        return graphie.label(
-            [pos, -0.17],
-            formatNonReduced(frac[0], frac[1], base),
-            "below",
-        );
-    }
-};
-
-// $FlowFixMe[prop-missing]
-const TickMarks: $FlowFixMe = Graphie.createSimpleClass((graphie, props) => {
-    // Avoid infinite loop
-    if (!_.isFinite(props.tickStep) || props.tickStep <= 0) {
-        return []; // this has screwed me for the last time!
-    }
-
-    const results = [];
-
-    // For convenience, extract some props into separate variables
-    const range = props.range;
-    const labelRange = props.labelRange;
-    const leftLabel = labelRange[0] == null ? range[0] : labelRange[0];
-    const rightLabel = labelRange[1] == null ? range[1] : labelRange[1];
-
-    // Find base via GCD for non-reduced fractions
-    let base;
-    if (props.labelStyle === "non-reduced") {
-        const fractions = [leftLabel, rightLabel];
-        for (let i = 0; i <= props.numDivisions; i++) {
-            const x = range[0] + i * props.tickStep;
-            fractions.push(x);
-        }
-        const getDenom = (x) => knumber.toFraction(x)[1];
-        const denoms = _.map(fractions, getDenom);
-        base = _.reduce(denoms, (x, y) => KhanMath.getLCM(x, y));
-    } else {
-        base = undefined;
-    }
-
-    // Draw and save the tick marks and tick labels
-    for (let i = 0; i <= props.numDivisions; i++) {
-        const x = range[0] + i * props.tickStep;
-        results.push(graphie.line([x, -0.2], [x, 0.2]));
-
-        const labelTicks = props.labelTicks;
-        if (labelTicks || props.labelStyle === "decimal ticks") {
-            // $FlowFixMe[incompatible-call]
-            results.push(_label(graphie, props.labelStyle, x, x, base));
-        }
-    }
-
-    // Render the text labels
-    results.push(
-        graphie.style(
-            props.isMobile
-                ? {
-                      color: KhanColors.BLUE_D,
-                  }
-                : {},
-            // $FlowFixMe[incompatible-call]
-            () => _label(graphie, props.labelStyle, leftLabel, leftLabel, base),
-        ),
-    );
-
-    results.push(
-        graphie.style(
-            props.isMobile
-                ? {
-                      color: KhanColors.BLUE_D,
-                  }
-                : {},
-            () =>
-                // $FlowFixMe[incompatible-call]
-                _label(graphie, props.labelStyle, rightLabel, rightLabel, base),
-        ),
-    );
-
-    // Render the labels' lines
-    graphie.style(
-        {
-            stroke: props.isMobile ? KhanColors.BLUE_D : KhanColors.DYNAMIC,
-            strokeWidth: 3.5,
-        },
-        () => {
-            results.push(graphie.line([leftLabel, -0.2], [leftLabel, 0.2]));
-            results.push(graphie.line([rightLabel, -0.2], [rightLabel, 0.2]));
-        },
-    );
-
-    return results;
-});
-
-type Props = {|
-    ...ChangeableProps,
-
-    range: $ReadOnlyArray<number>,
-
-    labelRange: $ReadOnlyArray<number | null>,
-    labelStyle: string,
-    labelTicks: boolean,
-
-    divisionRange: $ReadOnlyArray<number>,
-    numDivisions: number,
-    snapDivisions: number,
-
-    isTickCtrl: boolean,
-    isInequality: boolean,
-
-    numLinePosition: number,
-    rel: "lt" | "gt" | "le" | "ge",
-
-    onFocus: ($FlowFixMe) => void,
-    onBlur: ($FlowFixMe) => void,
-    onChange: ($FlowFixMe, ?() => void) => void,
-
-    apiOptions: APIOptions,
-    keypadElement: ?HTMLElement,
-    static?: boolean,
-    showTooltips?: boolean,
-    trackInteraction: () => void,
-|};
-
-type DefaultProps = {|
-    range: Props["range"],
-    labelStyle: Props["labelStyle"],
-    labelRange: Props["labelRange"],
-    divisionRange: Props["divisionRange"],
-    labelTicks: Props["labelTicks"],
-    isTickCtrl: Props["isTickCtrl"],
-    isInequality: Props["isInequality"],
-    numLinePosition: Props["numLinePosition"],
-    snapDivisions: Props["snapDivisions"],
-    showTooltips: Props["showTooltips"],
-    rel: Props["rel"],
-    apiOptions: Props["apiOptions"],
-|};
-
-type State = {|
-    numDivisionsEmpty: boolean,
-|};
-class NumberLine extends React.Component<Props, State> {
-    static defaultProps: DefaultProps = {
-        range: [0, 10],
-        labelStyle: "decimal",
-        labelRange: [null, null],
-        divisionRange: [1, 12],
-        labelTicks: true,
-        isTickCtrl: false,
-        isInequality: false,
-        numLinePosition: 0,
-        snapDivisions: 2,
-        showTooltips: false,
-        rel: "ge",
-        apiOptions: ApiOptions.defaults,
-    };
-
-    state: $FlowFixMe = {
-        numDivisionsEmpty: false,
-    };
-
-    change: (...args: $ReadOnlyArray<mixed>) => $FlowFixMe = (...args) => {
-        // $FlowFixMe[incompatible-call]
-        return Changeable.change.apply(this, args);
-    };
-
-    isValid: () => boolean = () => {
-        const range = this.props.range;
-        let initialX = this.props.numLinePosition;
-        const divisionRange = this.props.divisionRange;
-
-        initialX = initialX == null ? range[0] : initialX;
-
-        return (
-            range[0] < range[1] &&
-            knumber.sign(initialX - range[0]) >= 0 &&
-            knumber.sign(initialX - range[1]) <= 0 &&
-            divisionRange[0] < divisionRange[1] &&
-            0 < this.props.numDivisions &&
-            0 < this.props.snapDivisions
-        );
-    };
-
-    onNumDivisionsChange: (number, $FlowFixMe) => void = (numDivisions, cb) => {
-        const divRange = this.props.divisionRange.slice();
-        const width = this.props.range[1] - this.props.range[0];
-
-        // Don't allow a fraction for the number of divisions
-        numDivisions = Math.round(numDivisions);
-
-        // Don't allow negative numbers for the number of divisions
-        numDivisions = numDivisions < 0 ? numDivisions * -1 : numDivisions;
-
-        // If the number of divisions isn't blank, update the number line
-        if (numDivisions) {
-            const nextProps = _.extend({}, this.props, {
-                tickStep: width / numDivisions,
-            });
-
-            const newNumLinePosition = this.snapNumLinePosition(
-                nextProps,
-                this.props.numLinePosition,
-            );
-
-            this.setState(
-                {
-                    numDivisionsEmpty: false,
-                },
-                () => {
-                    this.props.onChange(
-                        {
-                            divisionRange: divRange,
-                            numDivisions: numDivisions,
-                            numLinePosition: newNumLinePosition,
-                        },
-                        cb,
-                    );
-                },
-            );
-        } else {
-            this.setState(
-                {
-                    numDivisionsEmpty: true,
-                },
-                cb,
-            );
-        }
-    };
-
-    _handleTickCtrlFocus: () => void = () => {
-        this.props.onFocus(["tick-ctrl"]);
-    };
-
-    _handleTickCtrlBlur: () => void = () => {
-        this.props.onBlur(["tick-ctrl"]);
-    };
-
-    focus: () => ?boolean = () => {
-        if (this.props.isTickCtrl) {
-            // eslint-disable-next-line react/no-string-refs
-            this.refs["tick-ctrl"].focus();
-            return true;
-        }
-    };
-
-    focusInputPath: ($FlowFixMe) => void = (path) => {
-        if (path.length === 1) {
-            // eslint-disable-next-line react/no-string-refs
-            this.refs[path[0]].focus();
-        }
-    };
-
-    blurInputPath: ($FlowFixMe) => void = (path) => {
-        if (path.length === 1) {
-            // eslint-disable-next-line react/no-string-refs
-            this.refs[path[0]].blur();
-        }
-    };
-
-    getInputPaths: () => $ReadOnlyArray<$ReadOnlyArray<string>> = () => {
-        if (this.props.isTickCtrl) {
-            return [["tick-ctrl"]];
-        }
-        return [];
-    };
-
-    getDOMNodeForPath: ($FlowFixMe) => ?(Element | Text) = (inputPath) => {
-        if (inputPath.length === 1) {
-            // eslint-disable-next-line react/no-string-refs
-            return ReactDOM.findDOMNode(this.refs[inputPath[0]]);
-        }
-    };
-
-    getGrammarTypeForPath: ($FlowFixMe) => ?string = (inputPath) => {
-        if (inputPath.length === 1 && inputPath[0] === "tick-ctrl") {
-            return "number";
-        }
-    };
-
-    setInputValue: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => void = (
-        inputPath,
-        value,
-        callback,
-    ) => {
-        if (inputPath.length === 1 && inputPath[0] === "tick-ctrl") {
-            this.onNumDivisionsChange(value, callback);
-        }
-    };
-
-    _renderGraphie: () => React.Node = () => {
-        // Position variables
-        const range = this.props.range;
-        const width = range[1] - range[0];
-
-        const options = _.pick(this.props, ["range", "isTickCtrl"]);
-
-        // TODO(aria): Maybe save this as `this.calculatedProps`?
-        const props = _.extend({}, this.props, {
-            tickStep: width / this.props.numDivisions,
-        });
-
-        return (
-            <Graphie
-                // eslint-disable-next-line react/no-string-refs
-                ref="graphie"
-                // HACK(emily): We key this graphie on the label style because
-                // when the label style changes we want to resize the graphie,
-                // which isn't doable without throwing away the graphie and
-                // making a new one.
-                key={this.props.labelStyle}
-                box={[this.props.apiOptions.isMobile ? 288 : 460, 80]}
-                options={options}
-                onMouseDown={(coord) => {
-                    // eslint-disable-next-line react/no-string-refs
-                    this.refs.graphie.movables.numberLinePoint.grab(coord);
-                }}
-                setup={this._setupGraphie}
-                setDrawingAreaAvailable={
-                    this.props.apiOptions.setDrawingAreaAvailable
-                }
-                isMobile={this.props.apiOptions.isMobile}
-            >
-                <TickMarks
-                    {..._.pick(props, [
-                        "range",
-                        "numDivisions",
-                        "labelTicks",
-                        "labelStyle",
-                        "labelRange",
-                        "tickStep",
-                    ])}
-                    isMobile={this.props.apiOptions.isMobile}
-                />
-                {this._renderInequality(props)}
-                {this._renderNumberLinePoint(props)}
-            </Graphie>
-        );
-    };
-
-    snapNumLinePosition: ($FlowFixMe, number) => number = (
-        props,
-        numLinePosition,
-    ) => {
-        const left = props.range[0];
-        const right = props.range[1];
-        const snapX = props.tickStep / props.snapDivisions;
-
-        let x = bound(numLinePosition, left, right);
-        x = left + knumber.roundTo(x - left, snapX);
-        assert(_.isFinite(x));
-        return x;
-    };
-
-    // This function is intended to be used by the client code
-    // and by test code to directly set the target number line
-    // position
-    movePosition: (number) => void = (targetPosition) => {
-        this.change({numLinePosition: targetPosition});
-        this.props.trackInteraction();
-    };
-
-    _renderNumberLinePoint: ($FlowFixMe) => React.Node = (props) => {
-        const isOpen = _(["lt", "gt"]).contains(props.rel);
-
-        // In static mode the point's fill and stroke is blue to signify that
-        // it can't be interacted with.
-        let fill;
-        if (isOpen) {
-            fill = KhanColors._BACKGROUND;
-        } else if (props.static) {
-            fill = KhanColors.DYNAMIC;
-        } else {
-            fill = KhanColors.INTERACTIVE;
-        }
-        const normalStyle = {
-            fill: fill,
-            stroke: props.static ? KhanColors.DYNAMIC : KhanColors.INTERACTIVE,
-            "stroke-width": isOpen ? 3 : 1,
-        };
-        const highlightStyle = {
-            fill: isOpen ? KhanColors._BACKGROUND : KhanColors.INTERACTING,
-            "stroke-width": isOpen ? 3 : 1,
-        };
-
-        const mobileDotStyle = props.isInequality
-            ? {
-                  stroke: KhanColors.INTERACTIVE,
-                  "fill-opacity": isOpen ? 0 : 1,
-              }
-            : {};
-
-        return (
-            <MovablePoint
-                // eslint-disable-next-line react/no-string-refs
-                ref="numberLinePoint"
-                pointSize={6}
-                coord={[props.numLinePosition, 0]}
-                constraints={[
-                    (coord, prevCoord) => {
-                        // constrain-y
-                        return [coord[0], prevCoord[1]];
-                    },
-                    (coord, prevCoord) => {
-                        // snap X
-                        const x = this.snapNumLinePosition(props, coord[0]);
-                        return [x, coord[1]];
-                    },
-                ]}
-                normalStyle={normalStyle}
-                highlightStyle={highlightStyle}
-                onMove={(coord) => {
-                    this.movePosition(coord[0]);
-                }}
-                isMobile={this.props.apiOptions.isMobile}
-                mobileStyleOverride={mobileDotStyle}
-                showTooltips={this.props.showTooltips}
-                xOnlyTooltip={true}
-            />
-        );
-    };
-
-    handleReverse: () => void = () => {
-        const newRel = reverseRel[this.props.rel];
-        this.props.onChange({rel: newRel});
-    };
-
-    handleToggleStrict: () => void = () => {
-        const newRel = toggleStrictRel[this.props.rel];
-        this.props.onChange({rel: newRel});
-    };
-
-    _getInequalityEndpoint: ($FlowFixMe) => [number, number] = (props) => {
-        const isGreater = _(["ge", "gt"]).contains(props.rel);
-        const widthInPixels = 400;
-        const range = props.range;
-        const scale = (range[1] - range[0]) / widthInPixels;
-        const buffer = horizontalPadding * scale;
-        const left = range[0] - buffer;
-        const right = range[1] + buffer;
-        const end = isGreater ? [right, 0] : [left, 0];
-        return end;
-    };
-
-    _renderInequality: ($FlowFixMe) => React.Node = (props) => {
-        if (props.isInequality) {
-            const end = this._getInequalityEndpoint(props);
-            const style = {
-                arrows: "->",
-                stroke: this.props.apiOptions.isMobile
-                    ? KhanColors.INTERACTIVE
-                    : KhanColors.DYNAMIC,
-                strokeWidth: 3.5,
-            };
-
-            const isGreater = ["ge", "gt"].includes(props.rel);
-
-            return (
-                <Line
-                    // We shift the line to either side of the dot so they don't
-                    // intersect
-                    start={[
-                        (isGreater ? 0.4 : -0.4) + props.numLinePosition,
-                        0,
-                    ]}
-                    end={end}
-                    style={style}
-                />
-            );
-        }
-        return null;
-    };
-
-    _setupGraphie: ($FlowFixMe, $FlowFixMe) => void = (graphie, options) => {
-        // Ensure a sane configuration to avoid infinite loops
-        if (!this.isValid()) {
-            return;
-        }
-
-        // Position variables
-        const widthInPixels = this.props.apiOptions.isMobile
-            ? 288 - horizontalPadding * 2
-            : 400;
-        const range = options.range;
-        const scale = (range[1] - range[0]) / widthInPixels;
-        const buffer = horizontalPadding * scale;
-
-        // Initiate the graphie without actually drawing anything
-        const left = range[0] - buffer;
-        const right = range[1] + buffer;
-
-        const hasFractionalLabels =
-            this.props.labelStyle === "improper" ||
-            this.props.labelStyle === "mixed" ||
-            this.props.labelStyle === "non-reduced";
-        const bottom = hasFractionalLabels ? -1.5 : -1;
-        const top = 1;
-
-        graphie.init({
-            range: [
-                [left, right],
-                [bottom, top],
-            ],
-            scale: [1 / scale, 40],
-            isMobile: this.props.apiOptions.isMobile,
-        });
-
-        // Draw the number line
-        const center = (range[0] + range[1]) / 2;
-        graphie.line([center, 0], [right, 0], {arrows: "->"});
-        graphie.line([center, 0], [left, 0], {arrows: "->"});
-    };
-
-    getUserInput: () => $FlowFixMe = () => {
-        return {
-            numLinePosition: this.props.numLinePosition,
-            rel: this.props.isInequality ? this.props.rel : "eq",
-            numDivisions: this.props.numDivisions,
-            divisionRange: this.props.divisionRange,
-        };
-    };
-
-    simpleValidate: ($FlowFixMe) => $FlowFixMe = (rubric) => {
-        // $FlowFixMe[prop-missing]
-        return NumberLine.validate(this.getUserInput(), rubric);
-    };
-
-    render(): React.Node {
-        const divisionRange = this.props.divisionRange;
-        const divRangeString = divisionRange[0] + EN_DASH + divisionRange[1];
-        const invalidNumDivisions =
-            this.props.numDivisions < divisionRange[0] ||
-            this.props.numDivisions > divisionRange[1];
-
-        const inequalityControls = (
-            <div>
-                <input
-                    type="button"
-                    className="simple-button"
-                    value={i18n._("Switch direction")}
-                    onClick={this.handleReverse}
-                />
-                <input
-                    type="button"
-                    className="simple-button"
-                    value={
-                        _(["le", "ge"]).contains(this.props.rel)
-                            ? i18n._("Make circle open")
-                            : i18n._("Make circle filled")
-                    }
-                    onClick={this.handleToggleStrict}
-                />
-            </div>
-        );
-
-        let tickCtrl;
-        if (this.props.isTickCtrl) {
-            let Input;
-            if (this.props.apiOptions.customKeypad) {
-                Input = SimpleKeypadInput;
-            } else if (this.props.apiOptions.staticRender) {
-                Input = MathOutput;
-            } else {
-                Input = NumberInput;
-            }
-            tickCtrl = (
-                <label>
-                    {i18n._("Number of divisions:")}{" "}
-                    <Input
-                        // eslint-disable-next-line react/no-string-refs
-                        ref="tick-ctrl"
-                        value={
-                            this.state.numDivisionsEmpty
-                                ? null
-                                : this.props.numDivisions || divisionRange[0]
-                        }
-                        checkValidity={(val) =>
-                            val >= divisionRange[0] && val <= divisionRange[1]
-                        }
-                        onChange={this.onNumDivisionsChange}
-                        onFocus={this._handleTickCtrlFocus}
-                        onBlur={this._handleTickCtrlBlur}
-                        useArrowKeys={true}
-                        keypadElement={this.props.keypadElement}
-                    />
-                </label>
-            );
-        }
-
-        return (
-            <div
-                className={
-                    "perseus-widget " + "perseus-widget-interactive-number-line"
-                }
-            >
-                {tickCtrl}
-                {!this.isValid() ? (
-                    <div className="perseus-error">
-                        {i18n.doNotTranslate(
-                            "Invalid number line configuration.",
-                        )}
-                    </div>
-                ) : this.props.isTickCtrl && invalidNumDivisions ? (
-                    <div className="perseus-error">
-                        {i18n.$_(
-                            "Please make sure the number of divisions is " +
-                                "in the range %(divRangeString)s.",
-                            {divRangeString: divRangeString},
-                        )}
-                    </div>
-                ) : (
-                    this._renderGraphie()
-                )}
-                {!this.props.static &&
-                    this.props.isInequality &&
-                    inequalityControls}
-            </div>
-        );
-    }
-}
-
-_.extend(NumberLine, {
-    validate: function (state, rubric) {
-        const range = rubric.range;
-        const divisionRange = state.divisionRange;
-        const start = rubric.initialX != null ? rubric.initialX : range[0];
-        const startRel = rubric.isInequality ? "ge" : "eq";
-        const correctRel = rubric.correctRel || "eq";
-        const correctPos = knumber.equal(
-            state.numLinePosition,
-            rubric.correctX || 0,
-        );
-        const outsideAllowedRange =
-            state.numDivisions > divisionRange[1] ||
-            state.numDivisions < divisionRange[0];
-
-        if (state.isTickCrtl && outsideAllowedRange) {
-            return {
-                type: "invalid",
-                message: "Number of divisions is outside the allowed range.",
-            };
-        }
-        if (correctPos && correctRel === state.rel) {
-            return {
-                type: "points",
-                earned: 1,
-                total: 1,
-                message: null,
-            };
-        }
-        if (state.numLinePosition === start && state.rel === startRel) {
-            // We're where we started.
-            return {
-                type: "invalid",
-                message: null,
-            };
-        }
-        return {
-            type: "points",
-            earned: 0,
-            total: 1,
-            message: null,
-        };
-    },
-});
-
-const numberLineTransform: ($FlowFixMe) => $FlowFixMe = (editorProps) => {
-    const props = _.pick(editorProps, [
-        "range",
-
-        "labelRange",
-        "labelStyle",
-        "labelTicks",
-
-        "divisionRange",
-        "snapDivisions",
-
-        "isTickCtrl",
-        "isInequality",
-
-        "showTooltips",
-    ]);
-
-    const numLinePosition =
-        editorProps.initialX != null
-            ? editorProps.initialX
-            : editorProps.range[0];
-
-    const width = editorProps.range[1] - editorProps.range[0];
-
-    let numDivisions;
-    if (editorProps.numDivisions != null) {
-        numDivisions = editorProps.numDivisions;
-    } else if (editorProps.tickStep != null) {
-        numDivisions = width / editorProps.tickStep;
-    } else {
-        numDivisions = undefined; // send to getDefaultProps()
-    }
-
-    _.extend(props, {
-        numLinePosition: numLinePosition,
-        numDivisions: numDivisions,
-        // Use getDefaultProps value if null
-        snapDivisions: props.snapDivisions || undefined,
-    });
-
-    return props;
-};
-
-const staticTransform: ($FlowFixMe) => $FlowFixMe = (editorProps) => {
-    const props = _.pick(editorProps, [
-        "range",
-
-        "labelRange",
-        "labelStyle",
-        "labelTicks",
-
-        "divisionRange",
-        "snapDivisions",
-
-        // isTickCtrl is ignored since users can't interact with it anyway
-        "isInequality",
-    ]);
-
-    // The correct x is the initial position of the point
-    const numLinePosition =
-        editorProps.correctX != null
-            ? editorProps.correctX
-            : editorProps.range[0];
-
-    const width = editorProps.range[1] - editorProps.range[0];
-
-    let numDivisions;
-    if (editorProps.numDivisions != null) {
-        numDivisions = editorProps.numDivisions;
-    } else if (editorProps.tickStep != null) {
-        numDivisions = width / editorProps.tickStep;
-    } else {
-        numDivisions = undefined; // send to getDefaultProps()
-    }
-
-    _.extend(props, {
-        numLinePosition: numLinePosition,
-        numDivisions: numDivisions,
-        // Render the relation in the correct answer
-        rel: editorProps.isInequality ? editorProps.correctRel : null,
-        // Use getDefaultProps value if null
-        snapDivisions: props.snapDivisions || undefined,
-    });
-
-    return props;
-};
-
-export default ({
-    name: "number-line",
-    displayName: "Number line",
-    widget: NumberLine,
-    transform: numberLineTransform,
-    staticTransform: staticTransform,
-}: WidgetExports<typeof NumberLine>);