@khanacademy/perseus 3.0.0 → 4.0.0

package/src/widgets/unit.tsx

@@ -0,0 +1,374 @@
+// TODO(joel): teach KAS how to accept an answer only if it's expressed in
+// terms of a certain type.
+// TODO(joel): Allow sigfigs within a range rather than an exact expected
+// value?
+import * as KAS from "@khanacademy/kas";
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import lens from "hubble";
+import $ from "jquery";
+import * as React from "react";
+import ReactDOM from "react-dom";
+import _ from "underscore";
+
+import * as Changeable from "../mixins/changeable";
+import {ClassNames as ApiClassNames, ApiOptions} from "../perseus-api";
+import {SignificantFigures, displaySigFigs} from "../sigfigs";
+
+import type {
+    APIOptions,
+    ChangeHandler,
+    FocusPath,
+    WidgetExports,
+} from "../types";
+
+const ALL = "all";
+const MAX_SIGFIGS = 10;
+
+export const countSigfigs = function (value: string): number {
+    return new SignificantFigures(value).sigFigs;
+};
+
+export const sigfigPrint = function (num: number, sigfigs: number): string {
+    return displaySigFigs(num, sigfigs, -MAX_SIGFIGS, false);
+};
+
+type Rubric =
+    | {
+          value: string;
+          sigfigs: number;
+          accepting: "all";
+      }
+    | {
+          value: string;
+          sigfigs: number;
+          accepting: "some";
+          acceptingUnits: ReadonlyArray<string>;
+      };
+
+type ValidationResult =
+    | {
+          type: "points";
+          earned: 1 | 0;
+          message: string | null | undefined;
+          total: number;
+      }
+    | {
+          type: "invalid";
+          message: string | null | undefined;
+      };
+
+type Props = {
+    apiOptions: APIOptions;
+    onChange: ChangeHandler;
+    value: string;
+    onBlur: (arg1: FocusPath) => unknown;
+    onFocus: (arg1: FocusPath) => unknown;
+};
+
+type DefaultProps = {
+    apiOptions: Props["apiOptions"];
+    value: Props["value"];
+};
+
+/* I just wrote this, but it's old by analogy to `OldExpression`, in that it's
+ * the version that non-mathquill platforms get stuck with. Constructed with an
+ * <input>, a parser, popsicle sticks, and glue.
+ *
+ * In the same way as OldExpression, this parses continuously as you type, then
+ * shows and hides an error buddy. The error message is only shown after a
+ * rolling two second delay, but hidden immediately on further typing.
+ */
+export class OldUnitInput extends React.Component<Props> {
+    _errorTimeout: number | null | undefined;
+
+    static defaultProps: DefaultProps = {
+        apiOptions: ApiOptions.defaults,
+        value: "",
+    };
+
+    static validate(userInput: string, rubric: Rubric): ValidationResult {
+        const answer = KAS.unitParse(rubric.value).expr;
+        const guess = KAS.unitParse(userInput);
+        if (!guess.parsed) {
+            return {
+                type: "invalid",
+                message: i18n._("I couldn't understand those units."),
+            };
+        }
+
+        // Note: we check sigfigs, then numerical correctness, then units, so
+        // the most significant things come last, that way the user will see
+        // the most important message.
+        let message = null;
+
+        // did the user specify the right number of sigfigs?
+        // TODO(joel) - add a grading mode where the wrong number of sigfigs
+        // isn't marked wrong
+        const sigfigs = rubric.sigfigs;
+        const sigfigsCorrect = countSigfigs(guess.coefficient) === sigfigs;
+        if (!sigfigsCorrect) {
+            // @ts-expect-error [FEI-5003] - TS2322 - Type 'string' is not assignable to type 'null'.
+            message = i18n._("Check your significant figures.");
+        }
+
+        // now we need to check that the answer is correct to the precision we
+        // require.
+        let numericallyCorrect;
+        try {
+            const x = new KAS.Var("x");
+            const equality = new KAS.Eq(
+                answer.simplify(),
+                "=",
+                new KAS.Mul(x, guess.expr.simplify()),
+            );
+
+            const conversion = equality.solveLinearEquationForVariable(x);
+
+            // Make sure the conversion factor between the user's input answer
+            // and the canonical answer is 1, to sigfig places.
+            // TODO(joel) is this sound?
+            numericallyCorrect =
+                Number(conversion.eval()).toPrecision(sigfigs) ===
+                Number(1).toPrecision(sigfigs);
+        } catch (e: any) {
+            numericallyCorrect = false;
+        }
+
+        if (!numericallyCorrect) {
+            // @ts-expect-error [FEI-5003] - TS2322 - Type 'string' is not assignable to type 'null'.
+            message = i18n._("That answer is numerically incorrect.");
+        }
+
+        let kasCorrect;
+        const guessUnit = primUnits(guess.expr.simplify());
+        const answerUnit = primUnits(answer.simplify());
+
+        if (rubric.accepting === ALL) {
+            // We're accepting all units - KAS does the hard work of figuring
+            // out if the user's unit is equivalent to the author's unit.
+            kasCorrect = KAS.compare(guessUnit, answerUnit).equal;
+        } else {
+            // Are any of the accepted units the same as what the user entered?
+            kasCorrect = _(rubric.acceptingUnits).any((unit) => {
+                const thisAnswerUnit = primUnits(
+                    KAS.unitParse(unit).unit.simplify(),
+                );
+                return KAS.compare(
+                    thisAnswerUnit,
+                    guessUnit,
+                    // TODO(joel) - make this work as intended.
+                    // { form: true }
+                ).equal;
+            });
+        }
+        if (!kasCorrect) {
+            // @ts-expect-error [FEI-5003] - TS2322 - Type 'string' is not assignable to type 'null'.
+            message = i18n._("Check your units.");
+        }
+
+        const correct = kasCorrect && numericallyCorrect && sigfigsCorrect;
+
+        return {
+            type: "points",
+            earned: correct ? 1 : 0,
+            total: 1,
+            message,
+        };
+    }
+
+    componentDidUpdate() {
+        // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
+        // eslint-disable-next-line no-restricted-syntax
+        // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+        clearTimeout(this._errorTimeout);
+        if (KAS.unitParse(this.props.value).parsed) {
+            this._hideError();
+        } else {
+            // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
+            // eslint-disable-next-line no-restricted-syntax
+            // @ts-expect-error [FEI-5003] - TS2322 - Type 'Timeout' is not assignable to type 'number'.
+            this._errorTimeout = setTimeout(this._showError, 2000);
+        }
+    }
+
+    componentWillUnmount() {
+        // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
+        // eslint-disable-next-line no-restricted-syntax
+        // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+        clearTimeout(this._errorTimeout);
+    }
+
+    _showError: () => void = () => {
+        if (this.props.value === "") {
+            return;
+        }
+
+        // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+        const $error = $(ReactDOM.findDOMNode(this.refs.error));
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'is' does not exist on type 'JQueryStatic'.
+        if (!$error.is(":visible")) {
+            $error
+                // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+                .css({top: 50, opacity: 0.1})
+                .show()
+                .animate({top: 0, opacity: 1.0}, 300);
+        }
+    };
+
+    _hideError: () => void = () => {
+        // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+        const $error = $(ReactDOM.findDOMNode(this.refs.error));
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'is' does not exist on type 'JQueryStatic'.
+        if ($error.is(":visible")) {
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'animate' does not exist on type 'JQueryStatic'.
+            $error.animate({top: 50, opacity: 0.1}, 300, function () {
+                // eslint-disable-next-line @babel/no-invalid-this
+                // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+                // eslint-disable-next-line @babel/no-invalid-this
+                $(this).hide();
+            });
+        }
+    };
+
+    change: (...args: ReadonlyArray<any>) => any | null | undefined = (
+        ...args
+    ) => {
+        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'readonly any[]' is not assignable to parameter of type 'any[]'.
+        return Changeable.change.apply(this, args);
+    };
+
+    handleBlur: () => void = () => {
+        this.props.onBlur([]);
+        // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
+        // eslint-disable-next-line no-restricted-syntax
+        // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+        clearTimeout(this._errorTimeout);
+        if (!KAS.unitParse(this.props.value).parsed) {
+            this._showError();
+        }
+    };
+
+    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void = (
+        event: React.ChangeEvent<HTMLInputElement>,
+    ) => {
+        this._hideError();
+        this.props.onChange({value: event.target.value});
+    };
+
+    simpleValidate: (
+        rubric: Rubric,
+        onInputError?: () => unknown,
+    ) => ValidationResult = (rubric: Rubric, onInputError?: () => unknown) => {
+        onInputError = onInputError || function () {};
+        return OldUnitInput.validate(this.getUserInput(), rubric);
+    };
+
+    getUserInput: () => string = () => {
+        return this.props.value;
+    };
+
+    // begin mobile stuff
+
+    getInputPaths: () => ReadonlyArray<ReadonlyArray<any>> = () => {
+        // The widget itself is an input, so we return a single empty list to
+        // indicate this.
+        return [[]];
+    };
+
+    focusInputPath: (inputPath: FocusPath) => void = (inputPath: FocusPath) => {
+        // eslint-disable-next-line react/no-string-refs
+        const input = ReactDOM.findDOMNode(this.refs.input);
+        if (input) {
+            /**
+             * TODO(somewhatabstract, JIRA-XXXX):
+             * Change to using a ref callback so that focus() can be
+             * accessed.
+             */
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
+            input.focus();
+        }
+    };
+
+    handleFocus: () => void = () => {
+        this.props.onFocus([]);
+    };
+
+    blurInputPath: (inputPath: FocusPath) => void = (inputPath: FocusPath) => {
+        // eslint-disable-next-line react/no-string-refs
+        const input = ReactDOM.findDOMNode(this.refs.input);
+        if (input) {
+            /**
+             * TODO(somewhatabstract, JIRA-XXXX):
+             * Change to using a ref callback so that focus() can be
+             * accessed.
+             */
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'blur' does not exist on type 'Element | Text'.
+            input.blur();
+        }
+    };
+
+    setInputValue: (
+        path: FocusPath,
+        newValue: string,
+        cb: () => unknown,
+    ) => void = (path: FocusPath, newValue: string, cb: () => unknown) => {
+        this.props.onChange(
+            {
+                value: newValue,
+            },
+            cb,
+        );
+    };
+
+    getDOMNodeForPath: () => null | Element | Text = () => {
+        // eslint-disable-next-line react/no-string-refs
+        return ReactDOM.findDOMNode(this.refs.input);
+    };
+
+    getGrammarTypeForPath: (inputPath: FocusPath) => string = (
+        inputPath: FocusPath,
+    ) => {
+        return "unit";
+    };
+
+    // end mobile stuff
+
+    // TODO(joel) think about showing the error buddy
+    render(): React.ReactNode {
+        return (
+            <div className="old-unit-input">
+                <input
+                    onChange={this.handleChange}
+                    ref="input" // eslint-disable-line react/no-string-refs
+                    className={ApiClassNames.INTERACTIVE}
+                    value={this.props.value}
+                    onFocus={this.handleFocus}
+                    onBlur={this.handleBlur}
+                />
+                {/* eslint-disable-next-line react/no-string-refs */}
+                <div ref="error" className="error" style={{display: "none"}}>
+                    {i18n._("I don't understand that")}
+                </div>
+            </div>
+        );
+    }
+}
+
+// Extract the primitive units from a unit expression. This first simplifies
+// `expr` to a `Mul` like "5 kg m / s^2" then removes the first term.
+const primUnits = function (expr) {
+    return expr.simplify().asMul().partition()[1].flatten().simplify();
+};
+
+export default {
+    name: "unit-input",
+    displayName: "Unit",
+    defaultAlignment: "inline-block",
+    widget: OldUnitInput,
+    transform: (x: any): any => lens(x).del(["value"]).freeze(),
+    version: {major: 0, minor: 1},
+    hidden: true,
+} as WidgetExports<typeof OldUnitInput>;

package/src/widgets/video-transcript-link.test.tsx

@@ -0,0 +1,213 @@
+import {render, screen} from "@testing-library/react";
+import * as React from "react";
+import "@testing-library/jest-dom/extend-expect";
+
+import {testDependencies} from "../../../../testing/test-dependencies";
+import * as Dependencies from "../dependencies";
+
+import VideoTranscriptLink from "./video-transcript-link";
+
+describe("VideoTranscriptLink", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
+            ...testDependencies,
+            useVideo: (videoId, kind) => {
+                if (videoId === "5qap5aO4i9A") {
+                    return {
+                        status: "success",
+                        data: {
+                            video: {
+                                id: "YoutubeVideo",
+                                title: "Youtube Video Title",
+                                youtubeId: "5qap5aO4i9A",
+                                contentId: "contentId",
+                                __typename: "Video",
+                            },
+                        },
+                    };
+                }
+                if (videoId === "slug-video-id") {
+                    return {
+                        status: "success",
+                        data: {
+                            video: {
+                                id: "VideoId",
+                                title: "Slug Video Title",
+                                youtubeId: "YoutubeId",
+                                contentId: "contentId",
+                                __typename: "Video",
+                            },
+                        },
+                    };
+                }
+                return {status: "loading"};
+            },
+        });
+    });
+
+    it("renders the title with youtube video name when given a youtube link", async () => {
+        // Arrange
+        render(
+            <VideoTranscriptLink location="https://www.youtube.com/watch?v=5qap5aO4i9A" />,
+        );
+
+        // Assert
+        // Find by Text test will fail if the indicated text is missing
+        await screen.findByText("Youtube Video Title");
+    });
+
+    it("renders the title with slug video name when provided a slug-id", async () => {
+        // Arrange
+        render(<VideoTranscriptLink location="slug-video-id" />);
+
+        // Assert
+        await screen.findByText("Slug Video Title");
+    });
+
+    it("renders the button with the correct link", async () => {
+        // Act
+        render(<VideoTranscriptLink location="slug-video-id" />);
+
+        // Assert
+        await screen.findByText("Slug Video Title");
+        await expect(screen.getByRole("link")).toHaveAttribute(
+            "href",
+            "/transcript/contentId",
+        );
+    });
+
+    it("can parse a youtube URL with feature text", async () => {
+        // Act
+        render(
+            <VideoTranscriptLink location="http://www.youtube.com/watch?v=5qap5aO4i9A&feature=feedrec_grec_index" />,
+        );
+
+        // Assert
+        await screen.findByText("Youtube Video Title");
+    });
+
+    it("can parse a youtube URL with userID text", async () => {
+        // Act
+        render(
+            <VideoTranscriptLink location="http://www.youtube.com/user/IngridMichaelsonVEVO#p/a/u/1/5qap5aO4i9A" />,
+        );
+
+        // Assert
+        await screen.findByText("Youtube Video Title");
+    });
+
+    it("can parse a youtube URL with location/language text", async () => {
+        // Act
+        render(
+            <VideoTranscriptLink location="http://www.youtube.com/v/5qap5aO4i9A?fs=1&amp;hl=en_US&amp;rel=0" />,
+        );
+
+        // Assert
+        await screen.findByText("Youtube Video Title");
+    });
+
+    it("can parse a youtube URL with a time stamp", async () => {
+        // Act
+        render(
+            <VideoTranscriptLink location="http://www.youtube.com/watch?v=5qap5aO4i9A#t=0m10s" />,
+        );
+
+        // Assert
+        await screen.findByText("Youtube Video Title");
+    });
+
+    it("can parse an embed youtube URL", async () => {
+        // Act
+        render(
+            <VideoTranscriptLink location="http://www.youtube.com/embed/5qap5aO4i9A?rel=0" />,
+        );
+
+        // Assert
+        await screen.findByText("Youtube Video Title");
+    });
+
+    it("can parse a shorthand youtube URL", async () => {
+        // Act
+        render(<VideoTranscriptLink location="http://youtu.be/5qap5aO4i9A" />);
+
+        // Assert
+        await screen.findByText("Youtube Video Title");
+    });
+
+    it("should link to /transcript/videoNotFound if the URL is not a youtube URL", () => {
+        // Arrange
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
+            ...testDependencies,
+            // @ts-expect-error [FEI-5003] - TS2322 - Type '(videoId: string, kind: VideoKind) => { status: "success"; data: {}; }' is not assignable to type '(id: string, kind: VideoKind) => Result<{ video: VideoData | null | undefined; }>'.
+            useVideo: (videoId, kind) => {
+                return {status: "success", data: {}};
+            },
+        });
+
+        render(<VideoTranscriptLink location="http://stackoverflow.com" />);
+
+        expect(
+            screen.getByRole("link", {name: "See video transcript"}),
+        ).toHaveAttribute("href", "/transcript/videoNotFound");
+    });
+
+    it("should handle a success state", () => {
+        // Arrange
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
+            ...testDependencies,
+            useVideo: (videoId, kind) => {
+                return {status: "loading"};
+            },
+        });
+
+        render(<VideoTranscriptLink location="regula-1" />);
+
+        expect(screen.getByText("Loading...")).toBeInTheDocument();
+    });
+
+    it("should link to /transcript/videoNotFound if there's no data", () => {
+        // Arrange
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
+            ...testDependencies,
+            // @ts-expect-error [FEI-5003] - TS2322 - Type '(videoId: string, kind: VideoKind) => { status: "success"; data: {}; }' is not assignable to type '(id: string, kind: VideoKind) => Result<{ video: VideoData | null | undefined; }>'.
+            useVideo: (videoId, kind) => {
+                return {status: "success", data: {}};
+            },
+        });
+
+        render(<VideoTranscriptLink location="regula-1" />);
+
+        expect(
+            screen.getByRole("link", {name: "See video transcript"}),
+        ).toHaveAttribute("href", "/transcript/videoNotFound");
+    });
+
+    it("should handle an error state", () => {
+        // Arrange
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
+            ...testDependencies,
+            // @ts-expect-error [FEI-5003] - TS2322 - Type '(videoId: string, kind: VideoKind) => { status: "error"; }' is not assignable to type '(id: string, kind: VideoKind) => Result<{ video: VideoData | null | undefined; }>'.
+            useVideo: (videoId, kind) => {
+                return {status: "error"};
+            },
+        });
+
+        render(<VideoTranscriptLink location="regula-1" />);
+
+        expect(screen.getByText("Something went wrong.")).toBeInTheDocument();
+    });
+
+    it("should handle an aborted state", () => {
+        // Arrange
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
+            ...testDependencies,
+            useVideo: (videoId, kind) => {
+                return {status: "aborted"};
+            },
+        });
+
+        render(<VideoTranscriptLink location="regula-1" />);
+
+        expect(screen.getByText("Something went wrong.")).toBeInTheDocument();
+    });
+});

package/src/widgets/video-transcript-link.tsx

@@ -0,0 +1,84 @@
+/**
+ * This is a component that adds a link to the transcript for embedded videos in articles.
+ */
+
+import {View, Text} from "@khanacademy/wonder-blocks-core";
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import Link from "@khanacademy/wonder-blocks-link";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+
+import {getDependencies} from "../dependencies";
+
+const IS_URL = /^https?:\/\//;
+
+const getYoutubeId = (url: string): string => {
+    const regExp =
+        /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+    const match = url.match(regExp);
+    if (match && match[7].length === 11) {
+        return match[7];
+    }
+    return "videoNotFound";
+};
+
+// will accept a youtube link or a video's slug name from embedded video and then query accordingly.
+type Props = {
+    location: string;
+};
+
+/**
+ * Video Transcript Link Component.
+ */
+const VideoTranscriptLink: React.FC<Props> = (props): React.ReactElement => {
+    const {location} = props;
+    const {useVideo} = getDependencies();
+    const [id, kind] = IS_URL.test(location)
+        ? [getYoutubeId(location), "YOUTUBE_ID"]
+        : [location, "READABLE_ID"];
+    // The result value conforms to the wonder-blocks-data `Result` type
+    // which is used by our GraphQL framework.
+    // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'string' is not assignable to parameter of type 'VideoKind'.
+    const result = useVideo(id, kind);
+
+    switch (result.status) {
+        case "loading":
+            return <View>{i18n._("Loading...")}</View>;
+        case "success": {
+            const video = result.data?.video;
+            return (
+                <View style={styles.transcriptLink}>
+                    <Text>{video?.title}</Text>
+                    <Strut size={10} />
+                    <Link
+                        href={
+                            "/transcript/" +
+                            (video?.contentId || "videoNotFound")
+                        }
+                        target="_blank"
+                        className="visited-no-recolor"
+                    >
+                        {i18n._("See video transcript")}
+                    </Link>
+                </View>
+            );
+        }
+        case "error":
+            return <View>{i18n._("Something went wrong.")}</View>;
+        case "aborted":
+            return <View>{i18n._("Something went wrong.")}</View>;
+        default:
+            return <View>{i18n._("Something went wrong.")}</View>;
+    }
+};
+
+const styles = StyleSheet.create({
+    transcriptLink: {
+        flexDirection: "row",
+        width: "100%",
+        justifyContent: "center",
+    },
+});
+
+export default VideoTranscriptLink;