[InteractiveGraph] Interactive but unscored (implementation)

.changeset/famous-ghosts-type.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/short-drinks-tap.md

@@ -0,0 +1,8 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+"@khanacademy/perseus-score": minor
+"@khanacademy/perseus-core": patch
+---
+
+Implement "ungraded" InteractiveGraphs: interactive IGs that aren't scored as part of the regular scoring flow

__docs__/sample-data.ts

@@ -4,7 +4,7 @@ import type {PerseusRenderer} from "@khanacademy/perseus-core";
 // it.
 export const graphExample: PerseusRenderer = {
     content:
-        "An example of a the beautiful**interactive-graph** widget:\n\n[[☃ interactive-graph 1]]",
+        "An example of a the beautiful **interactive-graph** widget:\n\n[[☃ interactive-graph 1]]",
     widgets: {
         "interactive-graph 1": {
             type: "interactive-graph",

packages/perseus-core/src/data-schema.ts

@@ -376,8 +376,19 @@ export type WidgetOptions<
      */
     static?: boolean;
     /**
-     * Whether a widget is scored. Usually true except for IFrame widgets (deprecated).
+     * Whether a widget is scored.
      * Default: true
+     *
+     * The behavior depends on how the widget decides to implement it.
+     * For example, Interactive Graph will render an ungraded graph
+     * that is still interactive that learners can use to visualize
+     * math.
+     *
+     * Historical uses seem questionable (See LEMS-3958):
+     * - IFrame
+     * - Explanation
+     * - Image
+     * - Transformer (deprecated)
      */
     graded?: boolean;
     /**

packages/perseus-core/src/feature-flags.ts

@@ -18,6 +18,7 @@ const PerseusFeatureFlags = [
     "interactive-graph-logarithm", // TODO(LEMS-3976): clean up feature flag
     "interactive-graph-exponent", // TODO(LEMS-3976): clean up feature flag
     "interactive-graph-vector", // TODO(LEMS-3976): clean up feature flag
+    "interactive-graph-not-scored", // TODO(LEMS-3976): clean up feature flag
 ] as const;
 
 export default PerseusFeatureFlags;

packages/perseus-core/src/utils/generators/interactive-graph-widget-generator.ts

@@ -265,9 +265,15 @@ export function generateInteractiveGraphQuestion(
     options?: Partial<PerseusInteractiveGraphWidgetOptions> & {
         content?: string;
         isStatic?: boolean;
+        graded?: boolean;
     },
 ): PerseusRenderer {
-    const {content, isStatic, ...widgetOptions} = options ?? {};
+    const {
+        content = "[[☃ interactive-graph 1]]",
+        isStatic = false,
+        graded = true,
+        ...widgetOptions
+    } = options ?? {};
 
     // The `graph` and `correct` fields share all fields except for
     // the answers (coords, center, etc.) When only `correct` is provided,
@@ -293,10 +299,11 @@ export function generateInteractiveGraphQuestion(
     };
 
     return generateTestPerseusRenderer({
-        content: content ?? "[[☃ interactive-graph 1]]",
+        content: content,
         widgets: {
             "interactive-graph 1": generateInteractiveGraphWidget({
-                static: isStatic ?? false,
+                static: isStatic,
+                graded,
                 options: generateInteractiveGraphOptions(optionsWithDefaults),
             }),
         },

packages/perseus-editor/src/components/__tests__/widget-editor.test.tsx

@@ -8,7 +8,6 @@ import {testDependencies} from "../../testing/test-dependencies";
 import {registerAllWidgetsAndEditorsForTesting} from "../../util/register-all-widgets-and-editors-for-testing";
 import WidgetEditor from "../widget-editor";
 
-import type {Alignment} from "@khanacademy/perseus-core";
 import type {UserEvent} from "@testing-library/user-event";
 
 describe("WidgetEditor", () => {
@@ -37,7 +36,7 @@ describe("WidgetEditor", () => {
                 "getSupportedAlignments",
             ).mockReturnValue(["block", "inline", "full-width"]);
 
-            const {container} = render(
+            render(
                 <WidgetEditor
                     id="radio 1"
                     type="radio"
@@ -58,10 +57,9 @@ describe("WidgetEditor", () => {
             // Assert
             // Even though getSupportedAlignments returns multiple alignments,
             // the dropdown should NOT be shown because showAlignmentOptions is false
-            const alignmentDropdown =
-                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-                container.querySelector("select.alignment");
-            expect(alignmentDropdown).not.toBeInTheDocument();
+            expect(
+                screen.queryByRole("combobox", {name: "Alignment"}),
+            ).not.toBeInTheDocument();
         });
 
         it("should display alignment dropdown when widget supports multiple alignments", () => {
@@ -91,9 +89,10 @@ describe("WidgetEditor", () => {
             );
 
             // Assert
-            const dropdown = screen.getByRole("combobox");
+            const dropdown = screen.getByRole("combobox", {
+                name: "Alignment",
+            });
             expect(dropdown).toBeInTheDocument();
-            expect(dropdown).toHaveClass("alignment");
         });
 
         it("should NOT display alignment dropdown when widget supports only one alignment", () => {
@@ -123,45 +122,9 @@ describe("WidgetEditor", () => {
             );
 
             // Assert
-            expect(screen.queryByRole("combobox")).not.toBeInTheDocument();
-        });
-
-        it("should display all alignment options in the dropdown", () => {
-            // Arrange
-            const alignments: readonly Alignment[] = [
-                "block",
-                "inline",
-                "full-width",
-            ];
-            jest.spyOn(
-                CoreWidgetRegistry,
-                "getSupportedAlignments",
-            ).mockReturnValue(alignments);
-
-            render(
-                <WidgetEditor
-                    id="image 1"
-                    type="image"
-                    alignment="block"
-                    static={false}
-                    graded={true}
-                    options={{}}
-                    version={{major: 0, minor: 0}}
-                    onChange={() => {}}
-                    onRemove={() => {}}
-                    apiOptions={{
-                        ...ApiOptions.defaults,
-                        showAlignmentOptions: true,
-                    }}
-                />,
-            );
-
-            // Assert
-            const options = screen.getAllByRole("option");
-            expect(options).toHaveLength(3);
-            expect(options[0]).toHaveTextContent("block");
-            expect(options[1]).toHaveTextContent("inline");
-            expect(options[2]).toHaveTextContent("full-width");
+            expect(
+                screen.queryByRole("combobox", {name: "Alignment"}),
+            ).not.toBeInTheDocument();
         });
 
         it("should call onChange when alignment is changed", async () => {
@@ -191,8 +154,12 @@ describe("WidgetEditor", () => {
             );
 
             // Act
-            const dropdown = screen.getByRole("combobox");
-            await userEvent.selectOptions(dropdown, "inline");
+            const dropdown = screen.getByRole("combobox", {
+                name: "Alignment",
+            });
+            await userEvent.click(dropdown);
+            const option = screen.getByRole("option", {name: "inline"});
+            await userEvent.click(option);
 
             // Assert
             expect(onChangeMock).toHaveBeenCalledWith(
@@ -229,8 +196,10 @@ describe("WidgetEditor", () => {
             );
 
             // Assert
-            const dropdown = screen.getByRole("combobox");
-            expect(dropdown).toBeDisabled();
+            const dropdown = screen.getByRole("combobox", {
+                name: "Alignment",
+            });
+            expect(dropdown).toHaveAttribute("aria-disabled", "true");
         });
     });
 });

packages/perseus-editor/src/components/alignment-select.tsx

@@ -1,10 +1,16 @@
 import {components} from "@khanacademy/perseus";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
 import {sizing} from "@khanacademy/wonder-blocks-tokens";
+import {BodyText} from "@khanacademy/wonder-blocks-typography";
+import {StyleSheet} from "aphrodite";
 import * as React from "react";
+import {useId} from "react";
 
 import {alignmentInfoMap} from "./util";
 
 import type {Alignment, PerseusWidget} from "@khanacademy/perseus-core";
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 const {InfoTip} = components;
 
@@ -13,24 +19,60 @@ interface Props {
     widgetInfo: PerseusWidget;
     isEditingDisabled: boolean;
     onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+    style?: StyleType;
 }
 
 export function AlignmentSelect({
     supportedAlignments,
     widgetInfo,
     isEditingDisabled,
     onChange,
+    style,
 }: Props) {
+    const labelId = useId();
     return (
-        <>
+        <View
+            style={[
+                {
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: sizing.size_080,
+                },
+                style,
+            ]}
+        >
+            <BodyText id={labelId} tag="span">
+                Alignment
+            </BodyText>
+            <SingleSelect
+                aria-labelledby={labelId}
+                selectedValue={widgetInfo.alignment ?? "default"}
+                disabled={isEditingDisabled}
+                onChange={(value) => {
+                    // Create a synthetic-like event to match the existing
+                    // onChange signature expected by WidgetEditor
+                    const syntheticEvent = {
+                        currentTarget: {value},
+                    } as React.ChangeEvent<HTMLSelectElement>;
+                    onChange(syntheticEvent);
+                }}
+                placeholder="Select alignment"
+                style={styles.singleSelectShort}
+            >
+                {supportedAlignments.map((alignment) => (
+                    <OptionItem
+                        key={alignment}
+                        value={alignment}
+                        label={alignment}
+                    />
+                ))}
+            </SingleSelect>
             <InfoTip>
                 <ul>
                     {supportedAlignments.map((alignment, index) => (
                         <li
                             key={alignment}
                             style={{
-                                // Put line breaks after each alignment description
-                                // except the last one.
                                 marginBlockEnd:
                                     index < supportedAlignments.length - 1
                                         ? sizing.size_240
@@ -42,17 +84,12 @@ export function AlignmentSelect({
                     ))}
                 </ul>
             </InfoTip>
-            <select
-                className="alignment"
-                value={widgetInfo.alignment}
-                disabled={isEditingDisabled}
-                onChange={onChange}
-                style={{marginLeft: sizing.size_060}}
-            >
-                {supportedAlignments.map((alignment) => (
-                    <option key={alignment}>{alignment}</option>
-                ))}
-            </select>
-        </>
+        </View>
     );
 }
+
+const styles = StyleSheet.create({
+    singleSelectShort: {
+        height: sizing.size_260,
+    },
+});

packages/perseus-editor/src/components/widget-editor-settings.css

@@ -0,0 +1,10 @@
+/* We have to use !important until wonder blocks is in the shared layer. */
+/* TODO(LEMS-3686): Remove the !important once we don't need it anymore. */
+.widget-editor-settings-container {
+    padding-inline: var(--wb-sizing-size_120) !important;
+    padding-block-start: var(--wb-sizing-size_120) !important;
+}
+
+.best-practices-container {
+    margin-block-end: var(--wb-sizing-size_060) !important;
+}