@khanacademy/perseus 19.1.5 → 19.1.6

package/src/widgets/measurer.tsx

@@ -1,222 +0,0 @@
-/* eslint-disable @babel/no-invalid-this, react/sort-comp */
-import createReactClass from "create-react-class";
-import $ from "jquery";
-import PropTypes from "prop-types";
-import * as React from "react";
-import ReactDOM from "react-dom";
-import _ from "underscore";
-
-import SvgImage from "../components/svg-image";
-import {ApiOptions} from "../perseus-api";
-import GraphUtils from "../util/graph-utils";
-
-import type {WidgetExports} from "../types";
-import type {Interval} from "../util/interval";
-import type {Coord} from "@khanacademy/perseus";
-
-const defaultImage = {
-    url: null,
-    top: 0,
-    left: 0,
-} as const;
-
-const Measurer: any = createReactClass({
-    displayName: "Measurer",
-
-    propTypes: {
-        apiOptions: ApiOptions.propTypes,
-        box: PropTypes.arrayOf(PropTypes.number),
-        image: PropTypes.shape({
-            url: PropTypes.string,
-            top: PropTypes.number,
-            left: PropTypes.number,
-        }),
-        showProtractor: PropTypes.bool,
-        protractorX: PropTypes.number,
-        protractorY: PropTypes.number,
-        showRuler: PropTypes.bool,
-        rulerLabel: PropTypes.string,
-        rulerTicks: PropTypes.number,
-        rulerPixels: PropTypes.number,
-        rulerLength: PropTypes.number,
-    },
-
-    getDefaultProps: function () {
-        return {
-            box: [480, 480],
-            image: {},
-            showProtractor: true,
-            protractorX: 7.5,
-            protractorY: 0.5,
-            showRuler: false,
-            rulerLabel: "",
-            rulerTicks: 10,
-            rulerPixels: 40,
-            rulerLength: 10,
-        };
-    },
-
-    getInitialState: function () {
-        return {};
-    },
-
-    render: function () {
-        const image = _.extend({}, defaultImage, this.props.image);
-
-        // TODO(scottgrant): This isn't a11y-friendly! We should insist on
-        // finding some valid alt text when this widget is used.
-        return (
-            <div
-                className={
-                    "perseus-widget perseus-widget-measurer " +
-                    "graphie-container above-scratchpad"
-                }
-                style={{width: this.props.box[0], height: this.props.box[1]}}
-            >
-                {image.url && (
-                    <div
-                        style={{
-                            position: "relative",
-                            top: image.top,
-                            left: image.left,
-                        }}
-                    >
-                        {/* @ts-expect-error - TS2741 - Property 'alt' is missing in type '{ src: any; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'. */}
-                        <SvgImage src={image.url} />
-                    </div>
-                )}
-                {/* eslint-disable-next-line react/no-string-refs */}
-                <div className="graphie" ref="graphieDiv" />
-            </div>
-        );
-    },
-
-    componentDidMount: function () {
-        this.setupGraphie();
-    },
-
-    componentDidUpdate: function (prevProps) {
-        const shouldSetupGraphie = _.any(
-            [
-                "box",
-                "showProtractor",
-                "showRuler",
-                "rulerLabel",
-                "rulerTicks",
-                "rulerPixels",
-                "rulerLength",
-            ],
-            function (prop) {
-                // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                return prevProps[prop] !== this.props[prop];
-            },
-            this,
-        );
-
-        if (shouldSetupGraphie) {
-            this.setupGraphie();
-        }
-    },
-
-    setupGraphie: function () {
-        // eslint-disable-next-line react/no-string-refs
-        const graphieDiv = ReactDOM.findDOMNode(this.refs.graphieDiv);
-        // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
-        $(graphieDiv).empty();
-        // @ts-expect-error - Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLElement'.
-        const graphie = (this.graphie = GraphUtils.createGraphie(graphieDiv));
-
-        const scale: Coord = [40, 40];
-        const range: [Interval, Interval] = [
-            [0, this.props.box[0] / scale[0]],
-            [0, this.props.box[1] / scale[1]],
-        ];
-        graphie.init({
-            range: range,
-            scale: scale,
-        });
-        // @ts-expect-error - Property 'addMouseLayer' does not exist on type 'Graphie'.
-        graphie.addMouseLayer({
-            allowScratchpad: true,
-            setDrawingAreaAvailable:
-                this.props.apiOptions.setDrawingAreaAvailable,
-        });
-
-        if (this.protractor) {
-            this.protractor.remove();
-        }
-
-        if (this.props.showProtractor) {
-            // @ts-expect-error - Property 'protractor' does not exist on type 'Graphie'.
-            this.protractor = graphie.protractor([
-                this.props.protractorX,
-                this.props.protractorY,
-            ]);
-        }
-
-        if (this.ruler) {
-            this.ruler.remove();
-        }
-
-        if (this.props.showRuler) {
-            // @ts-expect-error - Property 'ruler' does not exist on type 'Graphie'.
-            this.ruler = graphie.ruler({
-                center: [
-                    (range[0][0] + range[0][1]) / 2,
-                    (range[1][0] + range[1][1]) / 2,
-                ],
-                label: this.props.rulerLabel,
-                pixelsPerUnit: this.props.rulerPixels,
-                ticksPerUnit: this.props.rulerTicks,
-                units: this.props.rulerLength,
-            });
-        }
-    },
-
-    getUserInput: function () {
-        return {};
-    },
-
-    simpleValidate: function (rubric) {
-        // TODO(joel) - I don't understand how this is useful!
-        return Measurer.validate(this.getUserInput(), rubric);
-    },
-
-    focus: $.noop,
-});
-
-_.extend(Measurer, {
-    validate: function (state, rubric) {
-        return {
-            type: "points",
-            earned: 1,
-            total: 1,
-            message: null,
-        };
-    },
-});
-
-const propUpgrades = {
-    "1": (v0props: any): any => {
-        const v1props = _(v0props)
-            .chain()
-            .omit("imageUrl", "imageTop", "imageLeft")
-            .extend({
-                image: {
-                    url: v0props.imageUrl,
-                    top: v0props.imageTop,
-                    left: v0props.imageLeft,
-                },
-            })
-            .value();
-        return v1props;
-    },
-} as const;
-
-export default {
-    name: "measurer",
-    displayName: "Measurer",
-    widget: Measurer,
-    version: {major: 1, minor: 0},
-    propUpgrades: propUpgrades,
-} as WidgetExports<typeof Measurer>;

package/src/widgets/molecule/__tests__/layout.test.ts

@@ -1,162 +0,0 @@
-import Layout from "../molecule-layout";
-import SmilesParser from "../smiles-parser";
-
-function assertApproximately(actual: any, expected: number, allowed: number) {
-    expect(Math.abs(expected - actual) <= allowed).toBeTruthy();
-}
-
-describe("Molecule layout", () => {
-    describe("Simple molecules", () => {
-        // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-        const parsedAtoms = SmilesParser.parse("CC");
-        const converted = Layout._convertTree({}, [], parsedAtoms);
-        const atoms = converted[0];
-        const bonds = converted[1];
-
-        describe("Converting the parse tree", () => {
-            it("should convert to a map of atoms and a list of bonds", () => {
-                expect(Object.keys(atoms)).toHaveLength(2);
-                expect(bonds).toHaveLength(1);
-                expect(atoms[bonds[0].from].connections[0]).toBe(bonds[0].to);
-                expect(atoms[bonds[0].to].connections[0]).toBe(bonds[0].from);
-            });
-        });
-
-        describe("Positioning with a single bond", () => {
-            it("should put the first atom at the origin", () => {
-                const atomInfo = Layout._atomLayout(
-                    atoms["1,0"],
-                    atoms,
-                    bonds,
-                    0,
-                );
-                expect(atomInfo.pos).toEqual([0, 0]);
-            });
-
-            it("should put the next atom at a fixed distance", () => {
-                // Direction was arbitrarily chosen, but fixed.
-                Layout._atomLayout(atoms["1,0"], atoms, bonds, 0);
-                const atomInfo = Layout._atomLayout(
-                    atoms["2,0"],
-                    atoms,
-                    bonds,
-                    0,
-                );
-                assertApproximately(atomInfo.pos[0], 0, 1e-14);
-                expect(atomInfo.pos[1]).toBe(Layout._bondLength);
-            });
-
-            it("can rotate", () => {
-                // Direction was arbitrarily chosen, but fixed.
-                Layout._atomLayout(atoms["1,0"], atoms, bonds, 90);
-                const atomInfo = Layout._atomLayout(
-                    atoms["2,0"],
-                    atoms,
-                    bonds,
-                    90,
-                );
-                assertApproximately(atomInfo.pos[0], Layout._bondLength, 1e-14);
-                expect(atomInfo.pos[1]).toBe(0);
-            });
-
-            it("creates the bond betwen the two atoms", () => {
-                Layout._atomLayout(atoms["1,0"], atoms, bonds, 0);
-                Layout._atomLayout(atoms["2,0"], atoms, bonds, 0);
-                const bondInfo = Layout._bondLayout(bonds[0], atoms);
-                expect(bondInfo.startPos).toEqual([0, 0]);
-                expect(bondInfo.endPos[1]).toBe(Layout._bondLength);
-                assertApproximately(bondInfo.endPos[0], 0, 1e-14);
-                expect(bondInfo.type).toBe("line:single");
-            });
-        });
-    });
-
-    describe("Layout at a three-way junction", () => {
-        // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-        const layoutItems = Layout.layout(SmilesParser.parse("CC(C)C"), 0);
-        it("should place the second atom in the center", () => {
-            const centerAtom = layoutItems.find((item) => item.idx === "2,0");
-            assertApproximately(centerAtom.pos[0], 0, 1e-14);
-            expect(centerAtom.pos[1]).toBe(Layout._bondLength);
-        });
-
-        it("should place the branched atom at +60 degrees", () => {
-            const branchedAtom = layoutItems.find(
-                (item) => item.idx === "2,1:1,0",
-            );
-            assertApproximately(
-                branchedAtom.pos[0],
-                (Math.sqrt(3) / 2) * Layout._bondLength,
-                1e-14,
-            );
-            assertApproximately(
-                branchedAtom.pos[1],
-                1.5 * Layout._bondLength,
-                1e-14,
-            );
-        });
-
-        it("should place the next atom in the backbone at -60 degrees", () => {
-            const nextAtom = layoutItems.find((item) => item.idx === "3,0");
-            assertApproximately(
-                nextAtom.pos[0],
-                ((-1 * Math.sqrt(3)) / 2) * Layout._bondLength,
-                1e-14,
-            );
-            assertApproximately(
-                nextAtom.pos[1],
-                1.5 * Layout._bondLength,
-                1e-14,
-            );
-        });
-    });
-
-    describe("Layout at a four-way junction", () => {
-        // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-        const layoutItems = Layout.layout(SmilesParser.parse("CC(C)(C)C"), 0);
-        it("should place the second atom in the center", () => {
-            const centerAtom = layoutItems.find((item) => item.idx === "2,0");
-            assertApproximately(centerAtom.pos[0], 0, 1e-7);
-            expect(centerAtom.pos[1]).toBe(Layout._bondLength);
-        });
-
-        it("should place the branched atom at +90 degrees", () => {
-            const branchedAtom = layoutItems.find(
-                (item) => item.idx === "2,1:1,0",
-            );
-            assertApproximately(branchedAtom.pos[0], Layout._bondLength, 1e-7);
-            assertApproximately(branchedAtom.pos[1], Layout._bondLength, 1e-7);
-        });
-
-        it("should place the second branched atom at 0 degrees", () => {
-            const branchedAtom = layoutItems.find(
-                (item) => item.idx === "2,2:1,0",
-            );
-            assertApproximately(branchedAtom.pos[0], 0, 1e-7);
-            assertApproximately(
-                branchedAtom.pos[1],
-                2 * Layout._bondLength,
-                1e-7,
-            );
-        });
-
-        it("should place the next atom in the backbone at -90 degrees", () => {
-            const nextAtom = layoutItems.find((item) => item.idx === "3,0");
-            assertApproximately(nextAtom.pos[0], -1 * Layout._bondLength, 1e-7);
-            assertApproximately(nextAtom.pos[1], Layout._bondLength, 1e-7);
-        });
-    });
-
-    describe("Triple bond layout", () => {
-        // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-        const layoutItems = Layout.layout(SmilesParser.parse("CC#CC"), 0);
-        it("should place all the atoms colinearly", () => {
-            const atoms = layoutItems.filter((item) => item.idx);
-            expect(atoms).toHaveLength(4);
-            atoms.forEach((atom, i) => {
-                assertApproximately(atom.pos[0], 0, 1e-14);
-                assertApproximately(atom.pos[1], i * Layout._bondLength, 1e-14);
-            });
-        });
-    });
-});

package/src/widgets/molecule/__tests__/parser.test.ts

@@ -1,155 +0,0 @@
-import SmilesParser from "../smiles-parser";
-
-const parser = SmilesParser.parse;
-
-describe("SMILES parser", () => {
-    describe("single atom parsing", () => {
-        it("should parse a single bare atom", () => {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-            const parsed = parser("C");
-            expect(parsed).toEqual({
-                type: "atom",
-                symbol: "C",
-                bonds: null,
-                idx: [[1, 0]],
-            });
-        });
-
-        it("should parse a bracketed atom", () => {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-            const parsed = parser("[At]");
-            expect(parsed).toEqual({
-                type: "atom",
-                symbol: "At",
-                bonds: null,
-                idx: [[1, 0]],
-            });
-        });
-
-        it("should parse certain common two-letter atoms", () => {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-            const parsed = parser("Br");
-            expect(parsed).toEqual({
-                type: "atom",
-                symbol: "Br",
-                bonds: null,
-                idx: [[1, 0]],
-            });
-        });
-
-        it("should fail to parse an unusual atom when not bracketed", () => {
-            // Arrange
-            // Act
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-            const underTest = () => parser("At");
-
-            // Assert
-            expect(underTest).toThrow();
-        });
-    });
-
-    describe("bond parsing", () => {
-        it("should parse a single bond", () => {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-            const parsed = parser("CC");
-            const expectedBond = {
-                type: "bond",
-                bondType: "single",
-                to: {
-                    type: "atom",
-                    symbol: "C",
-                    bonds: null,
-                    idx: [[2, 0]],
-                },
-            } as const;
-            expect(parsed).toEqual({
-                type: "atom",
-                symbol: "C",
-                bonds: [expectedBond],
-                idx: [[1, 0]],
-            });
-        });
-
-        it("should parse a double bond", () => {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-            const parsed = parser("C=C");
-            const expectedBond = {
-                type: "bond",
-                bondType: "double",
-                to: {
-                    type: "atom",
-                    symbol: "C",
-                    bonds: null,
-                    idx: [[2, 0]],
-                },
-            } as const;
-            expect(parsed).toEqual({
-                type: "atom",
-                symbol: "C",
-                bonds: [expectedBond],
-                idx: [[1, 0]],
-            });
-        });
-
-        it("should parse a triple bond", () => {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-            const parsed = parser("C#C");
-            const expectedBond = {
-                type: "bond",
-                bondType: "triple",
-                to: {
-                    type: "atom",
-                    symbol: "C",
-                    bonds: null,
-                    idx: [[2, 0]],
-                },
-            } as const;
-            expect(parsed).toEqual({
-                type: "atom",
-                symbol: "C",
-                bonds: [expectedBond],
-                idx: [[1, 0]],
-            });
-        });
-    });
-
-    describe("branch parsing", () => {
-        it("should parse a branch", () => {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-            const parsed = parser("C(C)C");
-            expect(parsed.bonds).toHaveLength(2);
-            expect(parsed.bonds[0].type).toBe("bond");
-            expect(parsed.bonds[1].type).toBe("bond");
-
-            expect(parsed.bonds[0].to.idx).toEqual([
-                [1, 1],
-                [0, 0],
-            ]);
-            expect(parsed.bonds[1].to.idx).toEqual([[2, 0]]);
-        });
-
-        it("should apply bond modifiers only to one branch", () => {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-            let parsed = parser("C(=O)C");
-            expect(parsed.bonds).toHaveLength(2);
-            expect(parsed.bonds[0].bondType).toBe("double");
-            expect(parsed.bonds[1].bondType).toBe("single");
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-            parsed = parser("C(O)=C");
-            expect(parsed.bonds).toHaveLength(2);
-            expect(parsed.bonds[0].bondType).toBe("single");
-            expect(parsed.bonds[1].bondType).toBe("double");
-        });
-
-        it("should error on mismatched parentheses", () => {
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-            expect(() => parser("C)")).toThrow();
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-            expect(() => parser("C(")).toThrow();
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-            expect(() => parser("C(()")).toThrow();
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-            expect(() => parser("C())")).toThrow();
-        });
-    });
-});