@khanacademy/perseus 12.4.0 → 13.1.0

package/dist/item-renderer.d.ts

@@ -16,7 +16,9 @@ KeypadProps & {
     item: PerseusItem | any;
     onShowCalculator?: () => unknown;
     onShowChi2Table?: () => unknown;
-    onShowPeriodicTable?: () => unknown;
+    onShowPeriodicTable?: (options?: {
+        showKey: boolean;
+    }) => unknown;
     onShowTTable?: () => unknown;
     onShowZTable?: () => unknown;
     problemNum: number;

package/dist/perseus-types.d.ts

@@ -413,17 +413,19 @@ export type PerseusPassageRefWidgetOptions = {
     referenceNumber: number;
     summaryText: string;
 };
+export declare const plotterPlotTypes: readonly ["bar", "line", "pic", "histogram", "dotplot"];
+export type PlotType = typeof plotterPlotTypes[number];
 export type PerseusPlotterWidgetOptions = {
     labels: ReadonlyArray<string>;
     categories: ReadonlyArray<string>;
-    type: string;
+    type: PlotType;
     maxY: number;
     scaleY: number;
     labelInterval: number | null | undefined;
     snapsPerLine: number;
     starting: ReadonlyArray<number>;
     correct: ReadonlyArray<number>;
-    picUrl: number | null | undefined;
+    picUrl: string | null | undefined;
     picSize: number | null | undefined;
     picBoxHeight: number | null | undefined;
     plotDimensions: ReadonlyArray<number>;

package/dist/widgets/label-image/strings.d.ts

@@ -0,0 +1,3 @@
+export declare const strings: {
+    hideAnswersToggleLabel: string;
+};

package/dist/widgets/plotter.d.ts

@@ -1,25 +1,11 @@
 import * as React from "react";
-import type { APIOptions } from "../types";
-declare const plotTypes: string[];
-type PlotType = typeof plotTypes[number];
-type Props = {
-    type: PlotType;
-    labels: ReadonlyArray<string>;
-    categories: ReadonlyArray<string | number>;
-    scaleY: number;
-    maxY: number;
-    snapsPerLine: number;
-    picSize: number;
-    picBoxHeight: number;
-    picUrl: string;
-    plotDimensions: ReadonlyArray<number>;
-    labelInterval: number;
-    starting: Array<number>;
-    static: boolean;
-    markings: any;
-    onChange: any;
-    trackInteraction: () => void;
-    apiOptions: APIOptions;
+import type { PerseusPlotterWidgetOptions } from "../perseus-types";
+import type { WidgetProps } from "../types";
+type Rubric = PerseusPlotterWidgetOptions;
+type RenderProps = PerseusPlotterWidgetOptions;
+type Props = WidgetProps<RenderProps, Rubric> & {
+    labelInterval: NonNullable<PerseusPlotterWidgetOptions["labelInterval"]>;
+    picSize: NonNullable<PerseusPlotterWidgetOptions["picSize"]>;
 };
 type DefaultProps = {
     type: Props["type"];
@@ -35,7 +21,7 @@ type DefaultProps = {
     labelInterval: Props["labelInterval"];
 };
 type State = {
-    values: Array<number>;
+    values: ReadonlyArray<number>;
     categoryHeights: Record<string, number>;
 };
 export declare class Plotter extends React.Component<Props, State> {

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "12.4.0",
+    "version": "13.1.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,7 +24,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.5",
         "@khanacademy/kmath": "^0.1.6",
-        "@khanacademy/math-input": "^14.2.2",
+        "@khanacademy/math-input": "^15.0.1",
         "@khanacademy/perseus-core": "1.3.0",
         "@khanacademy/perseus-linter": "^0.3.8",
         "@khanacademy/pure-markdown": "^0.2.10",
@@ -48,6 +48,7 @@
         "@khanacademy/wonder-blocks-tooltip": "^2.1.2",
         "@khanacademy/wonder-blocks-typography": "^2.1.3",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
+        "@phosphor-icons/core": "^2.0.2",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",
@@ -82,6 +83,7 @@
         "@khanacademy/wonder-blocks-tooltip": "^2.1.2",
         "@khanacademy/wonder-blocks-typography": "^2.1.3",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
+        "@phosphor-icons/core": "^2.0.2",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",

package/src/__tests__/item-renderer.test.tsx

@@ -805,6 +805,47 @@ describe("item renderer", () => {
             expect(onShowTTable).toHaveBeenCalled();
             expect(onShowChi2Table).toHaveBeenCalled();
         });
+
+        it("should call onShowPeriodicTable with showKey option if selected", () => {
+            // Arrange
+            const item = {
+                ...itemWithInput,
+                answerArea: {
+                    zTable: false,
+                    chi2Table: false,
+                    tTable: false,
+                    calculator: false,
+                    periodicTable: true,
+                    periodicTableWithKey: true,
+                },
+            } as const;
+
+            const onShowCalculator = jest.fn();
+            const onShowPeriodicTable = jest.fn();
+            const onShowZTable = jest.fn();
+            const onShowTTable = jest.fn();
+            const onShowChi2Table = jest.fn();
+            const localExtraProps = {
+                ...extraProps,
+                onShowCalculator,
+                onShowPeriodicTable,
+                onShowZTable,
+                onShowTTable,
+                onShowChi2Table,
+            } as const;
+
+            // Act
+            renderQuestion(item, undefined, localExtraProps);
+
+            // Assert
+            expect(onShowCalculator).not.toHaveBeenCalled();
+            expect(onShowZTable).not.toHaveBeenCalled();
+            expect(onShowTTable).not.toHaveBeenCalled();
+            expect(onShowChi2Table).not.toHaveBeenCalled();
+            expect(onShowPeriodicTable).toHaveBeenCalledWith(
+                expect.objectContaining({showKey: true}),
+            );
+        });
     });
 
     describe("controlPeripherals is enabled", () => {

package/src/index.ts

@@ -62,7 +62,10 @@ export {default as KhanMath} from "./util/math";
 export {default as LoadingContext} from "./loading-context";
 export {default as mediaQueries} from "./styles/media-queries";
 export {default as PerseusMarkdown} from "./perseus-markdown";
-export {PerseusExpressionAnswerFormConsidered} from "./perseus-types";
+export {
+    PerseusExpressionAnswerFormConsidered,
+    plotterPlotTypes,
+} from "./perseus-types";
 export {traverse} from "./traversal";
 export {isItemRenderableByVersion} from "./renderability";
 export {violatingWidgets} from "./a11y";
@@ -123,6 +126,7 @@ export type {
     PerseusInteractiveGraphWidgetOptions,
     PerseusRadioWidgetOptions,
     PerseusExpressionWidgetOptions,
+    PerseusPlotterWidgetOptions,
     PerseusRenderer,
 } from "./perseus-types";
 export type {Coord} from "./interactive2/types";

package/src/item-renderer.tsx

@@ -39,7 +39,7 @@ type Props = // These props are used by the ProvideKeypad mixin.
         item: PerseusItem | any /* any for _multi items */;
         onShowCalculator?: () => unknown;
         onShowChi2Table?: () => unknown;
-        onShowPeriodicTable?: () => unknown;
+        onShowPeriodicTable?: (options?: {showKey: boolean}) => unknown;
         onShowTTable?: () => unknown;
         onShowZTable?: () => unknown;
         problemNum: number;
@@ -254,7 +254,9 @@ class ItemRenderer extends React.Component<Props, State> {
             }
             if (answerArea.periodicTable) {
                 this.props.onShowPeriodicTable &&
-                    this.props.onShowPeriodicTable();
+                    this.props.onShowPeriodicTable({
+                        showKey: answerArea.periodicTableWithKey,
+                    });
             }
             if (answerArea.zTable) {
                 this.props.onShowZTable && this.props.onShowZTable();

package/src/perseus-types.ts

@@ -848,13 +848,22 @@ export type PerseusPassageRefWidgetOptions = {
     summaryText: string;
 };
 
+export const plotterPlotTypes = [
+    "bar",
+    "line",
+    "pic",
+    "histogram",
+    "dotplot",
+] as const;
+export type PlotType = typeof plotterPlotTypes[number];
+
 export type PerseusPlotterWidgetOptions = {
     // Translatable Text; The Axis labels. e.g. ["X Label", "Y Label"]
     labels: ReadonlyArray<string>;
     // Translatable Text; Categories to display along the X access.  e.g. [">0", ">6", ">12", ">18"]
     categories: ReadonlyArray<string>;
     // The type of the graph. options "bar", "line", "pic", "histogram", "dotplot"
-    type: string;
+    type: PlotType;
     // The maximimum Y tick to display in the graph
     maxY: number;
     // The scale of the Y Axis
@@ -868,7 +877,7 @@ export type PerseusPlotterWidgetOptions = {
     // The Y values that represent the correct answer expected
     correct: ReadonlyArray<number>;
     // A picture to represent items in a graph.
-    picUrl: number | null | undefined;
+    picUrl: string | null | undefined;
     // deprecated
     picSize: number | null | undefined;
     // deprecated

package/src/widgets/__stories__/video.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {question1} from "../__testdata__/video.testdata";
+import {question1, question2, question3} from "../__testdata__/video.testdata";
 
 export default {
     title: "Perseus/Widgets/Video",
@@ -12,3 +12,11 @@ type StoryArgs = Record<any, any>;
 export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };
+
+export const Question2 = (args: StoryArgs): React.ReactElement => {
+    return <RendererWithDebugUI question={question2} />;
+};
+
+export const Question3 = (args: StoryArgs): React.ReactElement => {
+    return <RendererWithDebugUI question={question3} />;
+};

package/src/widgets/__testdata__/video.testdata.ts

@@ -19,3 +19,43 @@ export const question1: PerseusRenderer = {
     },
     replace: false,
 };
+
+export const question2: PerseusRenderer = {
+    content:
+        "Watch the WMF at Angkor Wat video to find the answer.\n\n[[\u2603 video 1]]\n\n",
+    images: {},
+    widgets: {
+        "video 1": {
+            graded: true,
+            version: {major: 0, minor: 0},
+            static: false,
+            type: "video",
+            options: {
+                static: false,
+                location: "https://player.vimeo.com/video/4754041",
+            },
+            alignment: "block",
+        },
+    },
+    replace: false,
+};
+
+export const question3: PerseusRenderer = {
+    content:
+        "Watch the WMF at Angkor Wat video to find the answer.\n\n[[\u2603 video 1]]\n\n",
+    images: {},
+    widgets: {
+        "video 1": {
+            graded: true,
+            version: {major: 0, minor: 0},
+            static: false,
+            type: "video",
+            options: {
+                static: false,
+                location: "https://player.vimeo.com/video/4754041?h=64fbc32a6e",
+            },
+            alignment: "block",
+        },
+    },
+    replace: false,
+};

package/src/widgets/__tests__/plotter.test.tsx

@@ -4,13 +4,12 @@ import React from "react";
 
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import {setDependencies} from "../../dependencies";
+import {ApiOptions} from "../../perseus-api";
 import {question1} from "../__testdata__/plotter.testdata";
 import {Plotter} from "../plotter";
 
 import {renderQuestion} from "./renderQuestion";
 
-import type {APIOptions} from "../../types";
-
 describe("plotter widget", () => {
     beforeEach(() => {
         setDependencies(testDependencies);
@@ -26,15 +25,17 @@ describe("plotter widget", () => {
 
     it("should show drag text when not static", () => {
         // Arrange and Act
-        const apiOptions: APIOptions = {isMobile: true};
         render(
+            // @ts-expect-error - TS2769 - test works, but I can't figure out how to make the types happy
             <Plotter
                 static={false}
                 trackInteraction={() => {}}
                 onChange={() => {}}
-                apiOptions={apiOptions}
+                apiOptions={{
+                    ...ApiOptions.defaults,
+                    isMobile: true,
+                }}
                 starting={[0]}
-                markings={""}
             />,
         );
 
@@ -46,15 +47,17 @@ describe("plotter widget", () => {
 
     it("should not show drag text when static", () => {
         // Arrange and Act
-        const apiOptions: APIOptions = {isMobile: true};
         render(
+            // @ts-expect-error - TS2769 - test works, but I can't figure out how to make the types happy
             <Plotter
                 static={true}
                 trackInteraction={() => {}}
                 onChange={() => {}}
-                apiOptions={apiOptions}
+                apiOptions={{
+                    ...ApiOptions.defaults,
+                    isMobile: true,
+                }}
                 starting={[0]}
-                markings={""}
             />,
         );
 

package/src/widgets/__tests__/video.test.ts

@@ -2,7 +2,7 @@ import "@testing-library/jest-dom";
 
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
-import {question1} from "../__testdata__/video.testdata";
+import {question1, question2} from "../__testdata__/video.testdata";
 
 import {renderQuestion} from "./renderQuestion";
 
@@ -50,4 +50,20 @@ describe("video widget", () => {
         // Assert
         expect(container).toMatchSnapshot("first mobile render");
     });
+
+    it("vimeo widget should contain dnt param", () => {
+        // Arrange
+        const apiOptions: APIOptions = {
+            isMobile: false,
+        };
+
+        // Act
+        renderQuestion(question2, apiOptions);
+
+        // Assert
+        // eslint-disable-next-line testing-library/no-node-access
+        expect(document.getElementsByTagName("iframe")[0].src).toContain(
+            "dnt=1",
+        );
+    });
 });

package/src/widgets/label-image/strings.ts

@@ -0,0 +1,3 @@
+export const strings = {
+    hideAnswersToggleLabel: "Hide answer choices",
+};

package/src/widgets/plotter.tsx

@@ -13,38 +13,17 @@ import KhanColors from "../util/colors";
 import GraphUtils from "../util/graph-utils";
 import KhanMath from "../util/math";
 
-import type {APIOptions, WidgetExports} from "../types";
+import type {PerseusPlotterWidgetOptions} from "../perseus-types";
+import type {WidgetExports, WidgetProps} from "../types";
 
 const {deepEq} = Util;
 
-const BAR = "bar";
-const LINE = "line";
-const PIC = "pic";
-const HISTOGRAM = "histogram";
-const DOTPLOT = "dotplot";
-
-const plotTypes = [BAR, LINE, PIC, HISTOGRAM, DOTPLOT];
-type PlotType = typeof plotTypes[number];
-
-type Props = {
-    type: PlotType;
-    labels: ReadonlyArray<string>;
-    categories: ReadonlyArray<string | number>;
-    scaleY: number;
-    maxY: number;
-    snapsPerLine: number;
-    picSize: number;
-    picBoxHeight: number;
-    picUrl: string;
-    plotDimensions: ReadonlyArray<number>;
-    labelInterval: number;
-
-    starting: Array<number>;
-    static: boolean;
-    markings: any;
-    onChange: any;
-    trackInteraction: () => void;
-    apiOptions: APIOptions;
+type Rubric = PerseusPlotterWidgetOptions;
+type RenderProps = PerseusPlotterWidgetOptions;
+
+type Props = WidgetProps<RenderProps, Rubric> & {
+    labelInterval: NonNullable<PerseusPlotterWidgetOptions["labelInterval"]>;
+    picSize: NonNullable<PerseusPlotterWidgetOptions["picSize"]>;
 };
 
 type DefaultProps = {
@@ -62,7 +41,7 @@ type DefaultProps = {
 };
 
 type State = {
-    values: Array<number>;
+    values: ReadonlyArray<number>;
     categoryHeights: Record<string, number>;
 };
 
@@ -75,7 +54,7 @@ export class Plotter extends React.Component<Props, State> {
     graphie: any;
 
     static defaultProps: DefaultProps = {
-        type: BAR,
+        type: "bar",
         labels: ["", ""],
         categories: [""],
 
@@ -175,11 +154,11 @@ export class Plotter extends React.Component<Props, State> {
         self.graphie.pics = [];
         self.graphie.dotTicks = [];
 
-        const isBar = self.props.type === BAR;
-        const isLine = self.props.type === LINE;
-        const isPic = self.props.type === PIC;
-        const isHistogram = self.props.type === HISTOGRAM;
-        const isDotplot = self.props.type === DOTPLOT;
+        const isBar = self.props.type === "bar";
+        const isLine = self.props.type === "line";
+        const isPic = self.props.type === "pic";
+        const isHistogram = self.props.type === "histogram";
+        const isDotplot = self.props.type === "dotplot";
 
         const isTiledPlot = isPic || isDotplot;
 
@@ -462,7 +441,7 @@ export class Plotter extends React.Component<Props, State> {
     };
 
     showHairlines: (arg1: any) => void = (point) => {
-        if (this.props.apiOptions.isMobile && this.props.markings !== "none") {
+        if (this.props.apiOptions.isMobile) {
             // Hairlines are already initialized when the graph is loaded, so
             // here we just move them to the updated location and make them
             // visible.
@@ -546,7 +525,7 @@ export class Plotter extends React.Component<Props, State> {
         // The deferred measurements returned from `labelCategory`.
         const categoryHeightPromises = [];
 
-        if (self.props.type === HISTOGRAM) {
+        if (self.props.type === "histogram") {
             // Histograms with n labels/categories have n - 1 buckets
             _.times(self.props.categories.length - 1, function (i) {
                 self.setupBar({
@@ -580,29 +559,29 @@ export class Plotter extends React.Component<Props, State> {
                 const startHeight = self.state.values[i];
                 let x;
 
-                if (self.props.type === BAR) {
+                if (self.props.type === "bar") {
                     x = self.setupBar({
                         index: i,
                         startHeight: startHeight,
                         config: config,
                         isHistogram: false,
                     });
-                } else if (self.props.type === LINE) {
+                } else if (self.props.type === "line") {
                     x = self.setupLine(i, startHeight, config);
-                } else if (self.props.type === PIC) {
+                } else if (self.props.type === "pic") {
                     x = self.setupPic(i, config);
-                } else if (self.props.type === DOTPLOT) {
+                } 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) {
+                if (self.props.type === "dotplot" && !isMobile) {
                     tickStart = -tickEnd;
                 }
 
-                if (self.props.type === DOTPLOT) {
+                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.
@@ -804,7 +783,7 @@ export class Plotter extends React.Component<Props, State> {
                     onMove: function () {
                         const y = config.graph.lines[i].coord()[1];
 
-                        const values = _.clone(self.state.values);
+                        const values = [...self.state.values];
                         values[i] = y;
                         self.setState({values: values});
                         self.changeAndTrack({values: values});
@@ -851,7 +830,7 @@ export class Plotter extends React.Component<Props, State> {
                     this.transform();
                 }
 
-                const values = _.clone(self.state.values);
+                const values = [...self.state.values];
                 values[i] = y;
                 self.setState({values: values});
                 self.changeAndTrack({values: values});
@@ -901,7 +880,7 @@ export class Plotter extends React.Component<Props, State> {
                 onMove: function () {
                     const y = c.graph.points[i].coord()[1];
 
-                    const values = _.clone(self.state.values);
+                    const values = [...self.state.values];
                     values[i] = y;
                     self.setState({values: values});
                     self.changeAndTrack({values: values});
@@ -941,7 +920,7 @@ export class Plotter extends React.Component<Props, State> {
             });
             c.graph.points[i].onMove = function (x, y) {
                 y = Math.min(Math.max(y, 0), c.dimY);
-                const values = _.clone(self.state.values);
+                const values = [...self.state.values];
                 values[i] = y;
                 self.setState({values: values});
                 self.changeAndTrack({values: values});
@@ -1095,7 +1074,7 @@ export class Plotter extends React.Component<Props, State> {
     };
 
     setPicHeight: (arg1: number, arg2: number) => void = (i, y) => {
-        const values = _.clone(this.state.values);
+        const values = [...this.state.values];
         values[i] = y;
         this.drawPicHeights(values, this.state.values);
         this.setState({values: values});
@@ -1126,7 +1105,7 @@ export class Plotter extends React.Component<Props, State> {
                 const y = (j + 1) * self.props.scaleY;
                 const show = y <= values[i];
 
-                if (self.props.type === DOTPLOT) {
+                if (self.props.type === "dotplot") {
                     const wasShown = y <= prevValues[i];
                     const wasJustShown = show && !wasShown;
                     if (wasJustShown) {

package/src/widgets/video.tsx

@@ -24,6 +24,7 @@ const DEFAULT_HEIGHT = 720;
 const KA_EMBED = "{host}/embed_video?slug={slug}" + "&internal_video_only=1";
 const IS_URL = /^https?:\/\//;
 const IS_KA_SITE = /(khanacademy\.org|localhost)/;
+const IS_VIMEO = /(vimeo\.com)/;
 
 type UserInput = null;
 type Rubric = PerseusVideoWidgetOptions;
@@ -75,6 +76,16 @@ class Video extends React.Component<Props> {
 
         if (IS_URL.test(location)) {
             url = location;
+            if (IS_VIMEO.test(url)) {
+                // If this is a vimeo video, we need to add the query string
+                // parameter "dnt" so that analytics/tracking cookies aren't set.
+                // https://help.vimeo.com/hc/en-us/articles/12426260232977-Player-parameters-overview
+                if (url.indexOf("?") === -1) {
+                    url += "?dnt=1";
+                } else {
+                    url += "&dnt=1";
+                }
+            }
         } else {
             url = KA_EMBED.replace("{slug}", location);
             let embedHostname = "https://www.khanacademy.org";