@khanacademy/perseus 7.1.1 → 7.2.1

package/src/styles/widgets/sortable.less

@@ -32,7 +32,7 @@
         touch-action: none;
 
         &.placeholder {
-            background:#ddd;
+            background: #ddd;
             border: 1px solid #ccc;
         }
 

package/src/styles/widgets/table.less

@@ -8,7 +8,8 @@
         height: 23px;
     }
 
-    th, td {
+    th,
+    td {
         border: 2px solid black;
         border-width: 0 2px;
 

package/src/styles/widgets/transformer.less

@@ -7,7 +7,8 @@
         position: relative;
         overflow: hidden;
 
-        > img, > .unresponsive-svg-image {
+        > img,
+        > .unresponsive-svg-image {
             position: absolute;
             // Preserves background image alignment (if image is a graph,
             // it can extend up and to the right to allow for axis labels)

package/src/styles/widgets/unit.less

@@ -1,4 +1,5 @@
-.old-unit-input input, .unit-editor-canonical {
+.old-unit-input input,
+.unit-editor-canonical {
     border: 1px solid #a4a4a4;
     border-radius: 5px;
     // box-sizing: border-box;

package/src/util.graphie.test.ts

@@ -0,0 +1,45 @@
+import {describe, it} from "@jest/globals";
+
+import {getRealImageUrl, isLabeledSVG} from "./util.graphie";
+
+describe(".getRealImageUrl", () => {
+    it("when passed a graphie URL, it transforms the URL to an http url", () => {
+        const input =
+            "web+graphie://ka-perseus-graphie.s3.amazonaws.com/b4a76d480e49f89fddb973c88c53fc301ba0d927";
+        const result =
+            "https://ka-perseus-graphie.s3.amazonaws.com/b4a76d480e49f89fddb973c88c53fc301ba0d927.svg";
+        expect(getRealImageUrl(input)).toBe(result);
+    });
+
+    it("when it's passed an HTTP URL, it returns the URL", () => {
+        const input =
+            "https://cdn.kastatic.org/ka-perseus-images/c633a1d04970211586b413985a7959876ca6c909.png";
+        expect(getRealImageUrl(input)).toBe(input);
+    });
+});
+
+describe(".isLabeledSVG", () => {
+    it("returns true for web+graphie", () => {
+        expect(
+            isLabeledSVG(
+                "web+graphie://ka-perseus-graphie.s3.amazonaws.com/b4a76d480e49f89fddb973c88c53fc301ba0d927",
+            ),
+        ).toBeTruthy();
+    });
+
+    it("returns true for file+graphie", () => {
+        expect(
+            isLabeledSVG(
+                "file+graphie://b4a76d480e49f89fddb973c88c53fc301ba0d927",
+            ),
+        ).toBeTruthy();
+    });
+
+    it("returns false for all other protocols", () => {
+        expect(
+            isLabeledSVG(
+                "https://cdn.kastatic.org/ka-perseus-images/c633a1d04970211586b413985a7959876ca6c909.png",
+            ),
+        ).toBeFalsy();
+    });
+});

package/src/util.graphie.ts

@@ -0,0 +1,59 @@
+const svgLabelsRegex = /^web\+graphie:/;
+// For offline exercises in the mobile app, we download the graphie data
+// (svgs and localized data files) and serve them from the local file
+// system (with file://). We replace urls that start with `web+graphie`
+// in the perseus json with this `file+graphie` prefix to indicate that
+// they should have the `file://` protocol instead of `https://`.
+const svgLocalLabelsRegex = /^file\+graphie:/;
+
+// Sometimes other components want to download the actual image e.g. to
+// determine its size. Here, we transform an .svg-labels url into the
+// correct image url, and leave normal image urls alone
+export function getRealImageUrl(graphieUrl: string): string {
+    if (isLabeledSVG(graphieUrl)) {
+        return getSvgUrl(graphieUrl);
+    }
+    return graphieUrl;
+}
+
+export function isLabeledSVG(graphieUrl: string): boolean {
+    return (
+        svgLabelsRegex.test(graphieUrl) || svgLocalLabelsRegex.test(graphieUrl)
+    );
+}
+
+// For each graphie, there are two urls we need to download from. This gets
+// the base url without the suffix, and `getSvgUrl` and `getDataUrl` apply
+// appropriate suffixes to get the image and other data
+export function getBaseUrl(graphieUrl: string): string {
+    return graphieUrl
+        .replace(svgLabelsRegex, "https:")
+        .replace(svgLocalLabelsRegex, "file:");
+}
+
+export function getSvgUrl(graphieUrl: string): string {
+    return getBaseUrl(graphieUrl) + ".svg";
+}
+
+export function getDataUrl(graphieUrl: string): string {
+    return getBaseUrl(graphieUrl) + "-data.json";
+}
+
+export async function getImageSizeModern(
+    url: string,
+): Promise<[number, number]> {
+    const image = new Image();
+
+    return new Promise((resolve, reject) => {
+        // Handle the success case
+        image.onload = () => {
+            resolve([image.naturalWidth, image.naturalHeight]);
+        };
+
+        // Handle the error case
+        image.onerror = reject;
+
+        // Kick off the loading
+        image.src = getRealImageUrl(url);
+    });
+}

package/src/util.ts

@@ -3,6 +3,7 @@ import _ from "underscore";
 
 import {Errors} from "./logging/log";
 import {PerseusError} from "./perseus-error";
+import * as GraphieUtil from "./util.graphie";
 import KhanAnswerTypes from "./util/answer-types";
 
 import type {Range} from "./perseus-types";
@@ -51,14 +52,6 @@ type TouchHandlers = {
 
 let supportsPassive = false;
 
-const svgLabelsRegex = /^web\+graphie:/;
-// For offline exercises in the mobile app, we download the graphie data
-// (svgs and localized data files) and serve them from the local file
-// system (with file://). We replace urls that start with `web+graphie`
-// in the perseus json with this `file+graphie` prefix to indicate that
-// they should have the `file://` protocol instead of `https://`.
-const svgLocalLabelsRegex = /^file\+graphie:/;
-
 const nestedMap = function <T, M>(
     children: T | ReadonlyArray<T>,
     func: (arg1: T) => M,
@@ -839,23 +832,6 @@ function captureScratchpadTouchStart(e: TouchEvent) {
     e.stopPropagation();
 }
 
-async function getImageSizeModern(url: string): Promise<[number, number]> {
-    const image = new Image();
-
-    return new Promise((resolve, reject) => {
-        // Handle the success case
-        image.onload = () => {
-            resolve([image.naturalWidth, image.naturalHeight]);
-        };
-
-        // Handle the error case
-        image.onerror = reject;
-
-        // Kick off the loading
-        image.src = url;
-    });
-}
-
 function getImageSize(
     url: string,
     callback: (width: number, height: number) => void,
@@ -884,38 +860,7 @@ function getImageSize(
         }
     };
 
-    img.src = getRealImageUrl(url);
-}
-
-// Sometimes other components want to download the actual image e.g. to
-// determine its size. Here, we transform an .svg-labels url into the
-// correct image url, and leave normal image urls alone
-function getRealImageUrl(url: string): string {
-    if (isLabeledSVG(url)) {
-        return getSvgUrl(url);
-    }
-    return url;
-}
-
-function isLabeledSVG(url: string): boolean {
-    return svgLabelsRegex.test(url) || svgLocalLabelsRegex.test(url);
-}
-
-// For each svg+labels, there are two urls we need to download from. This gets
-// the base url without the suffix, and `getSvgUrl` and `getDataUrl` apply
-// appropriate suffixes to get the image and other data
-function getBaseUrl(url: string): string {
-    return url
-        .replace(svgLabelsRegex, "https:")
-        .replace(svgLocalLabelsRegex, "file:");
-}
-
-function getSvgUrl(url: string): string {
-    return getBaseUrl(url) + ".svg";
-}
-
-function getDataUrl(url: string): string {
-    return getBaseUrl(url) + "-data.json";
+    img.src = GraphieUtil.getRealImageUrl(url);
 }
 
 /**
@@ -1007,12 +952,12 @@ const Util = {
     supportsPassiveEvents,
     captureScratchpadTouchStart,
     getImageSize,
-    getImageSizeModern,
-    getRealImageUrl,
-    isLabeledSVG,
-    getBaseUrl,
-    getSvgUrl,
-    getDataUrl,
+    getImageSizeModern: GraphieUtil.getImageSizeModern,
+    getRealImageUrl: GraphieUtil.getRealImageUrl,
+    isLabeledSVG: GraphieUtil.isLabeledSVG,
+    getBaseUrl: GraphieUtil.getBaseUrl,
+    getSvgUrl: GraphieUtil.getSvgUrl,
+    getDataUrl: GraphieUtil.getDataUrl,
     textarea,
     unescapeMathMode,
     random,

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

@@ -0,0 +1,27 @@
+import {View} from "@khanacademy/wonder-blocks-core";
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
+import {question1} from "../__testdata__/plotter.testdata";
+
+import type {PerseusRenderer} from "../../perseus-types";
+
+export default {
+    title: "Perseus/Widgets/Plotter",
+};
+
+type StoryArgs = Record<any, any>;
+
+const Template = (props: {question: PerseusRenderer}): React.ReactElement => (
+    <View
+        style={{
+            paddingLeft: 20,
+        }}
+    >
+        <RendererWithDebugUI question={props.question} />
+    </View>
+);
+
+export const Basic = (args: StoryArgs): React.ReactElement => {
+    return <Template question={question1} />;
+};

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

@@ -0,0 +1,36 @@
+import type {PerseusRenderer} from "../../perseus-types";
+
+export const question1: PerseusRenderer = {
+    content:
+        "The elementary school principal asked teachers to report the number of students absent in each grade during the past week.\n\n**Create a bar graph to show how many students were absent in each grade.**\n\nSchool grade | Number of absent students  \n:- | :-: \n$1^{\\text{st}} \\text{ grade}$ | $15$ \n$2^{\\text{nd}} \\text{ grade}$ |$25$ \n$3^{\\text{rd}} \\text{ grade}$ | $5$  \n$4^{\\text{th}} \\text{ grade}$ | $10$  \n$5^{\\text{th}} \\text{ grade}$ | $10$  \n\n[[☃ plotter 1]]\n\n",
+    images: {},
+    widgets: {
+        // This is the actual problem from the server
+        // I don't know why the type is incorrect
+        // @ts-expect-error - TS2322
+        "plotter 1": {
+            alignment: "default",
+            graded: true,
+            options: {
+                categories: [
+                    "$1^{\\text{st}} \\text{}$",
+                    "$2^{\\text{nd}} \\text{}$",
+                    "$3^{\\text{rd}} \\text{}$",
+                    "$4^{\\text{th}} \\text{}$",
+                    "$5^{\\text{th}} \\text{}$",
+                ],
+                correct: [15, 25, 5, 10, 10],
+                labelInterval: 1,
+                labels: ["School grade", "Number of absent students"],
+                maxY: 30,
+                scaleY: 5,
+                snapsPerLine: 1,
+                starting: [0, 0, 0, 0, 0],
+                type: "bar",
+            },
+            static: false,
+            type: "plotter",
+            version: {major: 0, minor: 0},
+        },
+    },
+};