@khanacademy/perseus 0.0.1 → 0.1.0

package/src/widgets/measurer.jsx

@@ -0,0 +1,215 @@
+/* eslint-disable @babel/no-invalid-this, react/sort-comp */
+// @flow
+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.jsx";
+import {ApiOptions} from "../perseus-api.jsx";
+import GraphUtils from "../util/graph-utils.js";
+
+import type {WidgetExports} from "../types.js";
+
+const defaultImage = {
+    url: null,
+    top: 0,
+    left: 0,
+};
+
+const Measurer: $FlowFixMe = 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,
+                        }}
+                    >
+                        {/* $FlowFixMe[prop-missing]: alt prop is missing */}
+                        <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) {
+                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);
+        $(graphieDiv).empty();
+        const graphie = (this.graphie = GraphUtils.createGraphie(graphieDiv));
+
+        const scale = [40, 40];
+        const range = [
+            [0, this.props.box[0] / scale[0]],
+            [0, this.props.box[1] / scale[1]],
+        ];
+        graphie.init({
+            range: range,
+            scale: scale,
+        });
+        graphie.addMouseLayer({
+            allowScratchpad: true,
+            setDrawingAreaAvailable:
+                this.props.apiOptions.setDrawingAreaAvailable,
+        });
+
+        if (this.protractor) {
+            this.protractor.remove();
+        }
+
+        if (this.props.showProtractor) {
+            this.protractor = graphie.protractor([
+                this.props.protractorX,
+                this.props.protractorY,
+            ]);
+        }
+
+        if (this.ruler) {
+            this.ruler.remove();
+        }
+
+        if (this.props.showRuler) {
+            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: $FlowFixMe): $FlowFixMe => {
+        const v1props = _(v0props)
+            .chain()
+            .omit("imageUrl", "imageTop", "imageLeft")
+            .extend({
+                image: {
+                    url: v0props.imageUrl,
+                    top: v0props.imageTop,
+                    left: v0props.imageLeft,
+                },
+            })
+            .value();
+        return v1props;
+    },
+};
+
+export default ({
+    name: "measurer",
+    displayName: "Measurer",
+    widget: Measurer,
+    version: {major: 1, minor: 0},
+    propUpgrades: propUpgrades,
+}: WidgetExports<typeof Measurer>);

package/src/widgets/molecule/__tests__/layout_test.jsx

@@ -0,0 +1,159 @@
+// @flow
+import Layout from "../molecule-layout.jsx";
+import SmilesParser from "../smiles-parser.jsx";
+
+function assertApproximately(actual, expected, allowed) {
+    expect(Math.abs(expected - actual) <= allowed).toBeTruthy();
+}
+
+describe("Molecule layout", () => {
+    describe("Simple molecules", () => {
+        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", () => {
+        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", () => {
+        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", () => {
+        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.jsx

@@ -0,0 +1,142 @@
+// @flow
+import SmilesParser from "../smiles-parser.jsx";
+
+const parser = SmilesParser.parse;
+
+describe("SMILES parser", () => {
+    describe("single atom parsing", () => {
+        it("should parse a single bare atom", () => {
+            const parsed = parser("C");
+            expect(parsed).toEqual({
+                type: "atom",
+                symbol: "C",
+                bonds: null,
+                idx: [[1, 0]],
+            });
+        });
+
+        it("should parse a bracketed atom", () => {
+            const parsed = parser("[At]");
+            expect(parsed).toEqual({
+                type: "atom",
+                symbol: "At",
+                bonds: null,
+                idx: [[1, 0]],
+            });
+        });
+
+        it("should parse certain common two-letter atoms", () => {
+            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
+            const underTest = () => parser("At");
+
+            // Assert
+            expect(underTest).toThrow();
+        });
+    });
+
+    describe("bond parsing", () => {
+        it("should parse a single bond", () => {
+            const parsed = parser("CC");
+            const expectedBond = {
+                type: "bond",
+                bondType: "single",
+                to: {
+                    type: "atom",
+                    symbol: "C",
+                    bonds: null,
+                    idx: [[2, 0]],
+                },
+            };
+            expect(parsed).toEqual({
+                type: "atom",
+                symbol: "C",
+                bonds: [expectedBond],
+                idx: [[1, 0]],
+            });
+        });
+
+        it("should parse a double bond", () => {
+            const parsed = parser("C=C");
+            const expectedBond = {
+                type: "bond",
+                bondType: "double",
+                to: {
+                    type: "atom",
+                    symbol: "C",
+                    bonds: null,
+                    idx: [[2, 0]],
+                },
+            };
+            expect(parsed).toEqual({
+                type: "atom",
+                symbol: "C",
+                bonds: [expectedBond],
+                idx: [[1, 0]],
+            });
+        });
+
+        it("should parse a triple bond", () => {
+            const parsed = parser("C#C");
+            const expectedBond = {
+                type: "bond",
+                bondType: "triple",
+                to: {
+                    type: "atom",
+                    symbol: "C",
+                    bonds: null,
+                    idx: [[2, 0]],
+                },
+            };
+            expect(parsed).toEqual({
+                type: "atom",
+                symbol: "C",
+                bonds: [expectedBond],
+                idx: [[1, 0]],
+            });
+        });
+    });
+
+    describe("branch parsing", () => {
+        it("should parse a branch", () => {
+            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", () => {
+            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");
+            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", () => {
+            expect(() => parser("C)")).toThrow();
+            expect(() => parser("C(")).toThrow();
+            expect(() => parser("C(()")).toThrow();
+            expect(() => parser("C())")).toThrow();
+        });
+    });
+});

package/src/widgets/molecule/molecule-drawing.jsx

@@ -0,0 +1,175 @@
+// @flow
+/**
+ * Draw some text into a 2D canvas drawing context.
+ *
+ * Args:
+ *     ctx: the 2D drawing context
+ *     item: the rendering instruction for the text.  Must look like: {
+ *         type: "text",
+ *         pos: [x, y],
+ *         value: "some text to draw",
+ *     }
+ *
+ */
+function drawText(ctx, item) {
+    if (item.value === null) {
+        return;
+    }
+    ctx.fillStyle = styles.fgColor;
+    ctx.font = styles.font;
+    ctx.fillText(
+        item.value,
+        item.pos[0] - styles.fontSizePx / 2 + 1,
+        item.pos[1] + styles.fontSizePx / 2,
+    );
+}
+
+/**
+ * Draw a double line into a 2D canvas drawing context.
+ *
+ * Apparently the way you do this is to stroke an extra-wide line in the
+ * foreground color and then a smaller line in the background color. 5:3
+ * foreground:background width looks reasonable for drawing chemical bonds.
+ *
+ * Args:
+ *     ctx: the 2D drawing context
+ *     item: the rendering instruction for the line.  Must look like: {
+ *         type: "line:double",
+ *         startPos: [x, y],
+ *         endPos: [x, y],
+ *     }
+ */
+function drawDoubleLine(ctx, item) {
+    // Outer line that forms both of the bond lines.
+    let path = new Path2D();
+    ctx.lineWidth = 5 * styles.lineWidth;
+    ctx.strokeStyle = styles.fgColor;
+    path.moveTo(item.startPos[0], item.startPos[1]);
+    path.lineTo(item.endPos[0], item.endPos[1]);
+    ctx.stroke(path);
+
+    // Inner white line that separates the two bond lines.
+    path = new Path2D();
+    ctx.lineWidth = 3 * styles.lineWidth;
+    ctx.strokeStyle = styles.bgColor;
+    path.moveTo(item.startPos[0], item.startPos[1]);
+    path.lineTo(item.endPos[0], item.endPos[1]);
+    ctx.stroke(path);
+}
+
+/**
+ * Draw a triple line into a 2D canvas drawing context.
+ *
+ * Following the strategy for the double line, we stroke a very wide
+ * foreground-color line, then a medium background-color line, then a narrow
+ * foreground-color line.
+ *
+ * Args:
+ *     ctx: the 2D drawing context
+ *     item: the rendering instruction for the line.  Must look like: {
+ *         type: "line:triple",
+ *         startPos: [x, y],
+ *         endPos: [x, y],
+ *     }
+ */
+function drawTripleLine(ctx, item) {
+    // TODO(colin): consolidate duplicated code from the three line drawing
+    // functions.
+
+    // Outer line that will form the two outer bond lines.
+    let path = new Path2D();
+    ctx.lineWidth = 7 * styles.lineWidth;
+    ctx.strokeStyle = styles.fgColor;
+    path.moveTo(item.startPos[0], item.startPos[1]);
+    path.lineTo(item.endPos[0], item.endPos[1]);
+    ctx.stroke(path);
+
+    // Middle white line that separates the bonds
+    path = new Path2D();
+    ctx.lineWidth = 5 * styles.lineWidth;
+    ctx.strokeStyle = styles.bgColor;
+    path.moveTo(item.startPos[0], item.startPos[1]);
+    path.lineTo(item.endPos[0], item.endPos[1]);
+    ctx.stroke(path);
+
+    // Inner line that forms the middle bond line.
+    drawLine(ctx, item);
+}
+
+/**
+ * Draw a single line into a 2D canvas drawing context
+ *
+ * Args:
+ *     ctx: the 2D drawing context
+ *     item: the rendering instruction for the line.  Must look like: {
+ *         type: "line:single",
+ *         startPos: [x, y],
+ *         endPos: [x, y],
+ *     }
+ */
+function drawLine(ctx, item) {
+    const path = new Path2D();
+    ctx.lineWidth = styles.lineWidth;
+    ctx.strokeStyle = styles.fgColor;
+    path.moveTo(item.startPos[0], item.startPos[1]);
+    path.lineTo(item.endPos[0], item.endPos[1]);
+    ctx.stroke(path);
+}
+
+/**
+ * Lookup table that maps drawing instruction types to the functions that
+ * render them.
+ */
+const drawingFuncs = {
+    text: drawText,
+    "line:single": drawLine,
+    "line:double": drawDoubleLine,
+    "line:triple": drawTripleLine,
+};
+
+/**
+ * Draw a single rendering instruction into a 2D canvas drawing context.
+ */
+function drawItem(ctx) {
+    return function (item) {
+        drawingFuncs[item.type](ctx, item);
+    };
+}
+
+/**
+ * Lookup table for drawing priorities.
+ *
+ * Types with lower priorities are drawn first.
+ */
+const ordering = {
+    "line:single": 0,
+    "line:double": 0,
+    "line:triple": 0,
+    text: 1,
+};
+
+/**
+ * Sorting comparison function that orders rendering instructions according to
+ * their type's priority.
+ */
+function compareElements(item0, item1) {
+    return ordering[item0.type] - ordering[item1.type];
+}
+
+/**
+ * Draw an array of rendering instructions into a 2D canvas drawing context.
+ */
+// eslint-disable-next-line flowtype/no-mutable-array
+function draw(ctx: $FlowFixMe, items: Array<$FlowFixMe>) {
+    items.sort(compareElements).forEach(drawItem(ctx));
+}
+
+const styles = {
+    bgColor: "rgb(255, 255, 255)",
+    fgColor: "rgb(0, 0, 0)",
+    fontSizePx: 12,
+    lineWidth: 1,
+    font: "12px sans",
+};
+
+export default draw;