@khanacademy/perseus 7.1.1 → 7.2.1

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

@@ -0,0 +1,65 @@
+import "@testing-library/jest-dom";
+import {screen, render} from "@testing-library/react";
+import React from "react";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import {setDependencies} from "../../dependencies";
+import {APIOptions} from "../../types";
+import {question1} from "../__testdata__/plotter.testdata";
+import {Plotter} from "../plotter";
+
+import {renderQuestion} from "./renderQuestion";
+
+describe("plotter widget", () => {
+    beforeEach(() => {
+        setDependencies(testDependencies);
+    });
+
+    it("should snapshot basic question", () => {
+        // Arrange and Act
+        const {container} = renderQuestion(question1);
+
+        // Assert
+        expect(container).toMatchSnapshot("initial render");
+    });
+
+    it("should show drag text when not static", () => {
+        // Arrange and Act
+        const apiOptions: APIOptions = {isMobile: true};
+        render(
+            <Plotter
+                static={false}
+                trackInteraction={() => {}}
+                onChange={() => {}}
+                apiOptions={apiOptions}
+                starting={[0]}
+                markings={""}
+            />,
+        );
+
+        // Assert
+        expect(
+            screen.getByText("Drag handles to make graph"),
+        ).toBeInTheDocument();
+    });
+
+    it("should not show drag text when static", () => {
+        // Arrange and Act
+        const apiOptions: APIOptions = {isMobile: true};
+        render(
+            <Plotter
+                static={true}
+                trackInteraction={() => {}}
+                onChange={() => {}}
+                apiOptions={apiOptions}
+                starting={[0]}
+                markings={""}
+            />,
+        );
+
+        // Assert
+        expect(
+            screen.queryByText("Drag handles to make graph"),
+        ).not.toBeInTheDocument();
+    });
+});

package/src/widgets/categorizer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable react/sort-comp */
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";

package/src/widgets/graded-group-set.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import Color from "@khanacademy/wonder-blocks-color";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";

package/src/widgets/graded-group.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import Button from "@khanacademy/wonder-blocks-button";
 import Color from "@khanacademy/wonder-blocks-color";

package/src/widgets/interaction.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable @babel/no-invalid-this, react/no-unsafe, react/sort-comp */
 import * as KAS from "@khanacademy/kas";
 import {vector as kvector} from "@khanacademy/kmath";

package/src/widgets/label-image/marker.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /**
  * Controlled question image marker, rendered as a styled button element.
  *

package/src/widgets/matcher.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable react/forbid-prop-types, react/sort-comp */
 import {
     linterContextProps,

package/src/widgets/orderer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable @babel/no-invalid-this, @typescript-eslint/no-unused-vars, one-var, react/no-unsafe, react/sort-comp */
 import {
     linterContextProps,

package/src/widgets/passage-ref-target.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 import {
     linterContextProps,
     linterContextDefault,

package/src/widgets/plotter.tsx

@@ -1,7 +1,6 @@
-/* eslint-disable @babel/no-invalid-this, @typescript-eslint/no-unused-vars, one-var, react/no-unsafe, react/sort-comp */
+/* eslint-disable react/no-unsafe */
 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";
@@ -14,38 +13,60 @@ import KhanColors from "../util/colors";
 import GraphUtils from "../util/graph-utils";
 import KhanMath from "../util/math";
 
-import type {WidgetExports} from "../types";
+import type {APIOptions, WidgetExports} from "../types";
 
 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,
-} as const;
-
-class Plotter extends React.Component<any, any> {
+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 DefaultProps = {
+    type: Props["type"];
+    labels: Props["labels"];
+    categories: Props["categories"];
+    scaleY: Props["scaleY"];
+    maxY: Props["maxY"];
+    snapsPerLine: Props["snapsPerLine"];
+    picSize: Props["picSize"];
+    picBoxHeight: Props["picBoxHeight"];
+    picUrl: Props["picUrl"];
+    plotDimensions: Props["plotDimensions"];
+    labelInterval: Props["labelInterval"];
+};
+
+type State = {
+    values: Array<number>;
+    categoryHeights: Record<string, number>;
+};
+
+export class Plotter extends React.Component<Props, State> {
     // @ts-expect-error [FEI-5003] - TS2564 - Property 'shouldSetupGraphie' has no initializer and is not definitely assigned in the constructor.
     shouldSetupGraphie: boolean;
     _isMounted = false;
@@ -53,14 +74,7 @@ class Plotter extends React.Component<any, any> {
     hairlineRange: any;
     graphie: any;
 
-    static propTypes = {
-        onChange: PropTypes.func.isRequired,
-        trackInteraction: PropTypes.func.isRequired,
-        // TODO(alex): Figure out why lint chokes on this line
-        // ...widgetPropTypes,
-    };
-
-    static defaultProps: any = {
+    static defaultProps: DefaultProps = {
         type: BAR,
         labels: ["", ""],
         categories: [""],
@@ -77,7 +91,7 @@ class Plotter extends React.Component<any, any> {
         labelInterval: 1,
     };
 
-    state: any = {
+    state: State = {
         values: this.props.starting || [1],
 
         // The measured rendered height of category strings. Used to calculate
@@ -86,57 +100,13 @@ class Plotter extends React.Component<any, any> {
         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.ReactNode {
-        // 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,
-        } as const;
-
-        return (
-            <div
-                className={
-                    "perseus-widget-plotter graphie " +
-                    ApiClassNames.INTERACTIVE
-                }
-                // eslint-disable-next-line react/no-string-refs
-                ref="graphieDiv"
-                style={style}
-            />
-        );
-    }
-
-    componentDidUpdate(prevProps: any, prevState: any) {
-        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: any) {
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
         const props = [
             "type",
             "labels",
@@ -151,10 +121,7 @@ class Plotter extends React.Component<any, any> {
 
         this.shouldSetupGraphie = _.any(
             props,
-            function (prop) {
-                // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                return !_.isEqual(this.props[prop], nextProps[prop]);
-            },
+            (prop) => !_.isEqual(this.props[prop], nextProps[prop]),
             this,
         );
 
@@ -167,10 +134,32 @@ class Plotter extends React.Component<any, any> {
         }
     }
 
+    componentDidUpdate(prevProps: Props, prevState: State) {
+        this.shouldSetupGraphie =
+            this.shouldSetupGraphie ||
+            !_.isEqual(this.state.categoryHeights, prevState.categoryHeights);
+
+        if (this.shouldSetupGraphie) {
+            this.setupGraphie(prevState);
+        }
+    }
+
     componentWillUnmount() {
         this._isMounted = false;
     }
 
+    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;
+    };
+
     setupGraphie: (arg1: any) => void = (prevState) => {
         const self = this;
         self.shouldSetupGraphie = false;
@@ -186,11 +175,11 @@ class Plotter extends React.Component<any, any> {
         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 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;
 
@@ -264,7 +253,6 @@ class Plotter extends React.Component<any, any> {
         if (isMobile && (isBar || isTiledPlot)) {
             const maxCategoryHeight = Math.max(
                 0,
-                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'number'.
                 ...Object.values(self.state.categoryHeights),
             );
 
@@ -340,7 +328,7 @@ class Plotter extends React.Component<any, any> {
             }
         }
 
-        if ((isBar || isLine) && isMobile) {
+        if ((isBar || isLine) && isMobile && !this.props.static) {
             self.graphie.dragPrompt = graphie
                 .label(
                     [c.dimX / 2, c.dimY / 2],
@@ -721,8 +709,8 @@ class Plotter extends React.Component<any, any> {
 
             if (isHistogram) {
                 // Scale dividers between buckets
-                const leftDivider = config.graph.dividers[i - 1],
-                    rightDivider = config.graph.dividers[i];
+                const leftDivider = config.graph.dividers[i - 1];
+                const rightDivider = config.graph.dividers[i];
 
                 if (leftDivider) {
                     const divHeight = Math.min(
@@ -1173,6 +1161,28 @@ class Plotter extends React.Component<any, any> {
         // @ts-expect-error [FEI-5003] - TS2339 - Property 'validate' does not exist on type 'typeof Plotter'.
         return Plotter.validate(this.getUserInput(), rubric);
     };
+
+    render(): React.ReactNode {
+        // 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,
+        } as const;
+
+        return (
+            <div
+                className={
+                    "perseus-widget-plotter graphie " +
+                    ApiClassNames.INTERACTIVE
+                }
+                // eslint-disable-next-line react/no-string-refs
+                ref="graphieDiv"
+                style={style}
+            />
+        );
+    }
 }
 
 _.extend(Plotter, {

package/src/widgets/radio/base-radio.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
 import classNames from "classnames";

package/src/widgets/radio/choice-icon/choice-icon.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* Component for rendering a letter icon in a library radio choice */
 
 import Color from "@khanacademy/wonder-blocks-color";

package/src/widgets/sorter.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 import {
     linterContextProps,
     linterContextDefault,

package/src/widgets/transformer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable @babel/no-invalid-this */
 /* eslint-disable camelcase */
 /* eslint-disable react/no-did-update-set-state */