[interactive graph editor] Refactor sections (#1416)

## Summary: This puts the correct answer and locked figures into their own section so that its easier to get the right things on the screen. Uploading editor-2.mov… <img width="832" alt="Screenshot 2024-07-16 at 1 10 43 PM" src="https://github.com/user-attachments/assets/294d5440-9abf-4647-bec1-2c5f7bf7e8e9"> Issue: LEMS-2179 ## Test plan: - Open Storybook - Open a graph editor - **You should be able to collapse and expand sections for locked figures and the correct answer** Author: nicolecomputer Reviewers: mark-fitzgerald, catandthemachines, nishasy Required Reviewers: Approved By: mark-fitzgerald, catandthemachines, nishasy Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1416
Khan · Jul 22, 2024 · daa3082 · daa3082
1 parent 8b128b5
commit daa3082
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 75 deletions.
diff --git a/.changeset/brave-turkeys-agree.md b/.changeset/brave-turkeys-agree.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": minor
+---
+
+Organizes the graph editor
diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-figures-section.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-figures-section.tsx
@@ -10,6 +10,7 @@ import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
+import Heading from "../heading";
 import {getDefaultFigureForType} from "../util";
 
 import LockedFigureSelect from "./locked-figure-select";
@@ -37,6 +38,8 @@ const LockedFiguresSection = (props: Props) => {
     const [expandedStates, setExpandedStates] =
         React.useState(collapsedStateArray);
 
+    const [isExpanded, setIsExpanded] = React.useState(true);
+
     const uniqueId = useUniqueIdWithMock().get("locked-figures-section");
     const {figures, onChange} = props;
 
@@ -149,53 +152,65 @@ const LockedFiguresSection = (props: Props) => {
     const showExpandButton = !!figures?.length;
 
     return (
-        <View>
-            {figures?.map((figure, index) => {
-                if (figure.type === "function") {
-                    // TODO(LEMS-1947): Add locked function settings.
-                    // Remove this block once function locked figure settings are
-                    // implemented.
-                    return;
-                }
-                return (
-                    <LockedFigureSettings
-                        key={`${uniqueId}-locked-${figure}-${index}`}
-                        showM2Features={props.showM2Features}
-                        showM2bFeatures={props.showM2bFeatures}
-                        expanded={expandedStates[index]}
-                        onToggle={(newValue) => {
-                            const newExpanded = [...expandedStates];
-                            newExpanded[index] = newValue;
-                            setExpandedStates(newExpanded);
-                        }}
-                        {...figure}
-                        onChangeProps={(newProps) =>
-                            changeProps(index, newProps)
+        <>
+            <Heading
+                title="Locked Figures"
+                isOpen={isExpanded}
+                onToggle={() => setIsExpanded(!isExpanded)}
+                isCollapsible={true}
+            />
+            {isExpanded && (
+                <View>
+                    {figures?.map((figure, index) => {
+                        if (figure.type === "function") {
+                            // TODO(LEMS-1947): Add locked function settings.
+                            // Remove this block once function locked figure settings are
+                            // implemented.
+                            return;
                         }
-                        onMove={(movement) => moveLockedFigure(index, movement)}
-                        onRemove={() => removeLockedFigure(index)}
-                    />
-                );
-            })}
-            <View style={styles.buttonContainer}>
-                <LockedFigureSelect
-                    showM2Features={props.showM2Features}
-                    showM2bFeatures={props.showM2bFeatures}
-                    id={`${uniqueId}-select`}
-                    onChange={addLockedFigure}
-                />
-                <Strut size={spacing.small_12} />
-                {showExpandButton && (
-                    <Button
-                        kind="secondary"
-                        onClick={() => toggleExpanded(allCollapsed)}
-                        style={styles.button}
-                    >
-                        {buttonLabel}
-                    </Button>
-                )}
-            </View>
-        </View>
+                        return (
+                            <LockedFigureSettings
+                                key={`${uniqueId}-locked-${figure}-${index}`}
+                                showM2Features={props.showM2Features}
+                                showM2bFeatures={props.showM2bFeatures}
+                                expanded={expandedStates[index]}
+                                onToggle={(newValue) => {
+                                    const newExpanded = [...expandedStates];
+                                    newExpanded[index] = newValue;
+                                    setExpandedStates(newExpanded);
+                                }}
+                                {...figure}
+                                onChangeProps={(newProps) =>
+                                    changeProps(index, newProps)
+                                }
+                                onMove={(movement) =>
+                                    moveLockedFigure(index, movement)
+                                }
+                                onRemove={() => removeLockedFigure(index)}
+                            />
+                        );
+                    })}
+                    <View style={styles.buttonContainer}>
+                        <LockedFigureSelect
+                            showM2Features={props.showM2Features}
+                            showM2bFeatures={props.showM2bFeatures}
+                            id={`${uniqueId}-select`}
+                            onChange={addLockedFigure}
+                        />
+                        <Strut size={spacing.small_12} />
+                        {showExpandButton && (
+                            <Button
+                                kind="secondary"
+                                onClick={() => toggleExpanded(allCollapsed)}
+                                style={styles.button}
+                            >
+                                {buttonLabel}
+                            </Button>
+                        )}
+                    </View>
+                </View>
+            )}
+        </>
     );
 };
 

diff --git a/packages/perseus-editor/src/components/heading.tsx b/packages/perseus-editor/src/components/heading.tsx
@@ -1,17 +1,19 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
-import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
+import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import * as React from "react";
 
 import ToggleableCaret from "./toggleable-caret";
 
 function Heading({
     title,
     isOpen,
+    isCollapsible,
     onToggle,
 }: {
     title: string;
     isOpen: boolean;
+    isCollapsible: boolean;
     onToggle?: (isOpen: boolean) => void;
 }) {
     return (
@@ -27,12 +29,20 @@ function Heading({
                 // match otherwise there's a gap from this header to the edge
                 // of the editor borders.
                 marginInline: -10,
-                cursor: "pointer",
+                cursor: isCollapsible ? "pointer" : "default",
+                userSelect: "none",
             }}
-            onClick={() => onToggle?.(!isOpen)}
+            onClick={() => isCollapsible && onToggle?.(!isOpen)}
         >
-            <LabelSmall>{title}</LabelSmall>
-            <ToggleableCaret isExpanded={isOpen} />
+            <LabelLarge
+                style={{
+                    fontSize: 14,
+                    fontWeight: 600,
+                }}
+            >
+                {title}
+            </LabelLarge>
+            {isCollapsible && <ToggleableCaret isExpanded={isOpen} />}
         </View>
     );
 }

diff --git a/packages/perseus-editor/src/components/interactive-graph-correct-answer.tsx b/packages/perseus-editor/src/components/interactive-graph-correct-answer.tsx
@@ -0,0 +1,54 @@
+import {View} from "@khanacademy/wonder-blocks-core";
+import {spacing, color} from "@khanacademy/wonder-blocks-tokens";
+import {
+    BodyMonospace,
+    LabelXSmall,
+} from "@khanacademy/wonder-blocks-typography";
+import * as React from "react";
+
+import Heading from "./heading";
+
+type Props = {
+    equationString: string;
+    children: React.ReactNode;
+};
+export function InteractiveGraphCorrectAnswer(props: Props) {
+    return (
+        <>
+            <Heading
+                title="Correct Answer"
+                isOpen={true}
+                isCollapsible={false}
+            />
+            <View>
+                <View>
+                    <LabelXSmall
+                        style={{
+                            paddingTop: spacing.xxSmall_6,
+                            paddingBottom: spacing.xxSmall_6,
+                            color: color.offBlack64,
+                        }}
+                    >
+                        Graph the correct answer in the graph below and ensure
+                        the equation or point coordinates displayed represent
+                        the correct answer.
+                    </LabelXSmall>
+
+                    <BodyMonospace
+                        style={{
+                            fontSize: 12,
+                            backgroundColor: "#eee",
+                            paddingInline: spacing.xxSmall_6,
+                            borderColor: "#ccc",
+                            borderStyle: "solid",
+                            borderWidth: 1,
+                        }}
+                    >
+                        {props.equationString}
+                    </BodyMonospace>
+                </View>
+                {props.children}
+            </View>
+        </>
+    );
+}
diff --git a/packages/perseus-editor/src/components/interactive-graph-settings.tsx b/packages/perseus-editor/src/components/interactive-graph-settings.tsx
@@ -465,6 +465,7 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
                 <Heading
                     title="Common Graph Settings"
                     isOpen={this.state.isExpanded}
+                    isCollapsible={true}
                     onToggle={() =>
                         this.setState({isExpanded: !this.state.isExpanded})
                     }

diff --git a/packages/perseus-editor/src/components/start-coord-settings.tsx b/packages/perseus-editor/src/components/start-coord-settings.tsx
@@ -77,6 +77,7 @@ const StartCoordSettings = (props: Props) => {
         <View style={styles.container}>
             {/* Heading for the collapsible section */}
             <Heading
+                isCollapsible={true}
                 title="Start coordinates"
                 isOpen={isOpen}
                 onToggle={() => setIsOpen(!isOpen)}

diff --git a/packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor.test.tsx
@@ -51,7 +51,11 @@ describe("InteractiveGraphEditor", () => {
         });
 
         // Assert
-        expect(await screen.findByText("Correct answer:")).toBeInTheDocument();
+        expect(
+            await screen.findByText(
+                "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer.",
+            ),
+        ).toBeInTheDocument();
     });
 
     test("changing the graph should call onChange", async () => {

diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor.tsx
@@ -12,7 +12,7 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
 import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import {spacing} from "@khanacademy/wonder-blocks-tokens";
-import {BodyMonospace, LabelSmall} from "@khanacademy/wonder-blocks-typography";
+import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import _ from "underscore";
@@ -21,6 +21,7 @@ import LabeledRow from "../components/graph-locked-figures/labeled-row";
 import LockedFiguresSection from "../components/graph-locked-figures/locked-figures-section";
 import GraphPointsCountSelector from "../components/graph-points-count-selector";
 import GraphTypeSelector from "../components/graph-type-selector";
+import {InteractiveGraphCorrectAnswer} from "../components/interactive-graph-correct-answer";
 import InteractiveGraphSettings from "../components/interactive-graph-settings";
 import SegmentCountSelector from "../components/segment-count-selector";
 import StartCoordSettings from "../components/start-coord-settings";
@@ -295,6 +296,9 @@ class InteractiveGraphEditor extends React.Component<Props> {
                         }}
                     />
                 </LabeledRow>
+                <InteractiveGraphCorrectAnswer equationString={equationString}>
+                    {graph}
+                </InteractiveGraphCorrectAnswer>
                 {this.props.correct?.type === "point" && (
                     <LabeledRow label="Number of Points:">
                         <GraphPointsCountSelector
@@ -602,28 +606,6 @@ class InteractiveGraphEditor extends React.Component<Props> {
                         </InfoTip>
                     </LabeledRow>
                 )}
-                <LabeledRow label="Correct answer:">
-                    <BodyMonospace
-                        style={{
-                            fontSize: 12,
-                            backgroundColor: "#eee",
-                            paddingInline: spacing.xxSmall_6,
-                            borderColor: "#ccc",
-                            borderStyle: "solid",
-                            borderWidth: 1,
-                        }}
-                    >
-                        {equationString}
-                    </BodyMonospace>
-                    <InfoTip>
-                        <p>
-                            Graph the correct answer in the graph below and
-                            ensure the equation or point coordinates displayed
-                            represent the correct answer.
-                        </p>
-                    </InfoTip>
-                </LabeledRow>
-                {graph}
                 {
                     // Only show the "Add locked figure" dropdown if the graph
                     // is using Mafs.