Add readOnly mode to interactive graphs to prevent keyboard interactions when question marked correct

.changeset/short-paws-suffer.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Make graphs non-interactive via keyboard when their question has been answered correctly

packages/perseus/src/types.ts

@@ -189,6 +189,10 @@ export type APIOptions = Readonly<{
     ) => unknown;
     GroupMetadataEditor?: React.ComponentType<StubTagEditorType>;
     showAlignmentOptions?: boolean;
+    /**
+     * A boolean that indicates whether the associated problem has been
+     * answered correctly and should no longer be interactive.
+     */
     readOnly?: boolean;
     answerableCallback?: (arg1: boolean) => unknown;
     getAnotherHint?: () => unknown;

packages/perseus/src/widgets/__stories__/interactive-graph.stories.tsx

@@ -22,17 +22,17 @@ import {
     segmentWithLockedPolygons,
 } from "../__testdata__/interactive-graph.testdata";
 
+import type {APIOptions} from "@khanacademy/perseus";
+
 export default {
     title: "Perseus/Widgets/Interactive Graph",
 };
 
-const mafsOptions = {
-    apiOptions: {
-        flags: {
-            mafs: {
-                segment: true,
-                polygon: true,
-            },
+const enableMafs: APIOptions = {
+    flags: {
+        mafs: {
+            segment: true,
+            polygon: true,
         },
     },
 };
@@ -68,7 +68,19 @@ export const Polygon = (args: StoryArgs): React.ReactElement => (
 );
 
 export const PolygonWithMafs = (args: StoryArgs): React.ReactElement => (
-    <RendererWithDebugUI {...mafsOptions} question={polygonQuestion} />
+    <RendererWithDebugUI
+        apiOptions={{...enableMafs}}
+        question={polygonQuestion}
+    />
+);
+
+export const PolygonWithMafsReadOnly = (
+    args: StoryArgs,
+): React.ReactElement => (
+    <RendererWithDebugUI
+        apiOptions={{...enableMafs, readOnly: true}}
+        question={polygonQuestion}
+    />
 );
 
 export const Ray = (args: StoryArgs): React.ReactElement => (
@@ -83,7 +95,7 @@ export const SegmentWithMafsAndLockedPoints = (
     args: StoryArgs,
 ): React.ReactElement => (
     <RendererWithDebugUI
-        {...mafsOptions}
+        apiOptions={{...enableMafs}}
         question={segmentWithLockedPointsQuestion}
     />
 );
@@ -92,46 +104,49 @@ export const SegmentWithMafsAndLockedLines = (
     args: StoryArgs,
 ): React.ReactElement => (
     <RendererWithDebugUI
-        {...mafsOptions}
+        apiOptions={{...enableMafs}}
         question={segmentWithLockedLineQuestion}
     />
 );
 
 export const AllLockedLineSegments = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI
-        {...mafsOptions}
+        apiOptions={{...enableMafs}}
         question={segmentWithAllLockedLineSegmentVariations}
     />
 );
 
 export const AllLockedLines = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI
-        {...mafsOptions}
+        apiOptions={{...enableMafs}}
         question={segmentWithAllLockedLineVariations}
     />
 );
 
 export const AllLockedRays = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI
-        {...mafsOptions}
+        apiOptions={{...enableMafs}}
         question={segmentWithAllLockedRayVariations}
     />
 );
 
 export const LockedVector = (args: StoryArgs): React.ReactElement => (
-    <RendererWithDebugUI {...mafsOptions} question={segmentWithLockedVectors} />
+    <RendererWithDebugUI
+        apiOptions={{...enableMafs}}
+        question={segmentWithLockedVectors}
+    />
 );
 
 export const LockedEllipse = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI
-        {...mafsOptions}
+        apiOptions={{...enableMafs}}
         question={segmentWithLockedEllipses}
     />
 );
 
 export const LockedPolygon = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI
-        {...mafsOptions}
+        apiOptions={{...enableMafs}}
         question={segmentWithLockedPolygons}
     />
 );

packages/perseus/src/widgets/interactive-graph.tsx

@@ -1827,6 +1827,7 @@ class InteractiveGraph extends React.Component<Props, State> {
                     box={box}
                     showTooltips={!!this.props.showTooltips}
                     hintMode={this.props.hintMode}
+                    readOnly={this.props.apiOptions?.readOnly}
                 />
             );
         }

packages/perseus/src/widgets/interactive-graphs/graphs/circle.tsx

@@ -46,7 +46,7 @@ function MovableCircle(props: {
     onMove: (newCenter: vec.Vector2) => unknown;
 }) {
     const {center, radius, onMove} = props;
-    const {snapStep, hintMode} = useGraphConfig();
+    const {snapStep, disableKeyboardInteraction} = useGraphConfig();
 
     const draggableRef = useRef<SVGGElement>(null);
 
@@ -63,7 +63,7 @@ function MovableCircle(props: {
     return (
         <g
             ref={draggableRef}
-            tabIndex={hintMode ? -1 : 0}
+            tabIndex={disableKeyboardInteraction ? -1 : 0}
             className={`movable-circle ${dragging ? "movable-circle--dragging" : ""}`}
         >
             <ellipse

packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-line.tsx

@@ -78,7 +78,7 @@ function useControlPoint(
     color: string | undefined,
     onMovePoint: (newPoint: vec.Vector2) => unknown,
 ) {
-    const {snapStep, hintMode} = useGraphConfig();
+    const {snapStep, disableKeyboardInteraction} = useGraphConfig();
     const [focused, setFocused] = useState(false);
     const keyboardHandleRef = useRef<SVGGElement>(null);
     useDraggable({
@@ -100,7 +100,7 @@ function useControlPoint(
         <g
             data-testid="movable-point__focusable-handle"
             className="movable-point__focusable-handle"
-            tabIndex={hintMode ? -1 : 0}
+            tabIndex={disableKeyboardInteraction ? -1 : 0}
             ref={keyboardHandleRef}
             onFocus={() => setFocused(true)}
             onBlur={() => setFocused(false)}
@@ -142,8 +142,12 @@ export const Line = (props: LineProps) => {
     const {start, end, onMove, extend, stroke = defaultStroke} = props;
 
     const [startPtPx, endPtPx] = useTransformVectorsToPixels(start, end);
-    const {range, graphDimensionsInPixels, snapStep, hintMode} =
-        useGraphConfig();
+    const {
+        range,
+        graphDimensionsInPixels,
+        snapStep,
+        disableKeyboardInteraction,
+    } = useGraphConfig();
 
     let startExtend: vec.Vector2 | undefined = undefined;
     let endExtend: vec.Vector2 | undefined = undefined;
@@ -172,7 +176,7 @@ export const Line = (props: LineProps) => {
         <>
             <g
                 ref={line}
-                tabIndex={hintMode ? -1 : 0}
+                tabIndex={disableKeyboardInteraction ? -1 : 0}
                 className="movable-line"
                 data-testid="movable-line"
                 style={{cursor: dragging ? "grabbing" : "grab"}}

packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-point-view.tsx

@@ -38,7 +38,8 @@ const hitboxSizePx = 48;
 // the description of https://github.com/Khan/perseus/pull/1240
 export const MovablePointView = forwardRef(
     (props: Props, hitboxRef: ForwardedRef<SVGGElement>) => {
-        const {range, markings, showTooltips, hintMode} = useGraphConfig();
+        const {range, markings, showTooltips, disableKeyboardInteraction} =
+            useGraphConfig();
         const {
             point,
             color = WBColor.blue,
@@ -90,7 +91,9 @@ export const MovablePointView = forwardRef(
                 className={pointClasses}
                 style={{"--movable-point-color": color, cursor} as any}
                 data-testid="movable-point"
-                tabIndex={hintMode ? -1 : tabIndex(focusBehavior)}
+                tabIndex={
+                    disableKeyboardInteraction ? -1 : tabIndex(focusBehavior)
+                }
             >
                 <circle
                     className="movable-point-hitbox"

packages/perseus/src/widgets/interactive-graphs/graphs/polygon.tsx

@@ -25,7 +25,7 @@ export const PolygonGraph = (props: Props) => {
     const {dispatch} = props;
     const {coords, showAngles, showSides, range, snapStep, snapTo} =
         props.graphState;
-    const {hintMode} = useGraphConfig();
+    const {disableKeyboardInteraction} = useGraphConfig();
 
     // TODO(benchristel): can the default set of points be removed here? I don't
     // think coords can be null.
@@ -103,7 +103,7 @@ export const PolygonGraph = (props: Props) => {
                 color="transparent"
                 svgPolygonProps={{
                     ref,
-                    tabIndex: hintMode ? -1 : 0,
+                    tabIndex: disableKeyboardInteraction ? -1 : 0,
                     strokeWidth: TARGET_SIZE,
                     style: {
                         cursor: dragging ? "grabbing" : "grab",

packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx

@@ -26,6 +26,7 @@ function getBaseMafsGraphProps(): MafsGraphProps {
         showTooltips: false,
         showProtractor: false,
         hintMode: false,
+        readOnly: false,
         labels: ["x", "y"],
         dispatch: () => {},
         state: {

packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx

@@ -46,10 +46,11 @@ export type MafsGraphProps = {
     state: InteractiveGraphState;
     dispatch: React.Dispatch<InteractiveGraphAction>;
     hintMode: boolean;
+    readOnly: boolean;
 };
 
 export const MafsGraph = (props: MafsGraphProps) => {
-    const {state, dispatch, labels, hintMode} = props;
+    const {state, dispatch, labels, hintMode, readOnly} = props;
     const [width, height] = props.box;
     const tickStep = props.step as vec.Vector2;
     return (
@@ -65,7 +66,7 @@ export const MafsGraph = (props: MafsGraphProps) => {
                 width,
                 height,
                 labels,
-                hintMode,
+                disableKeyboardInteraction: hintMode || readOnly,
             }}
         >
             <View

packages/perseus/src/widgets/interactive-graphs/reducer/use-graph-config.ts

@@ -15,7 +15,7 @@ export type GraphConfig = {
     width: number; // pixels
     height: number; // pixels
     labels: readonly string[];
-    hintMode?: boolean;
+    disableKeyboardInteraction?: boolean;
 };
 
 const defaultGraphConfig: GraphConfig = {
@@ -32,7 +32,7 @@ const defaultGraphConfig: GraphConfig = {
     width: 0,
     height: 0,
     labels: [],
-    hintMode: false,
+    disableKeyboardInteraction: false,
 };
 
 export const GraphConfigContext =

packages/perseus/src/widgets/interactive-graphs/stateful-mafs-graph.test.tsx

@@ -26,6 +26,7 @@ function getBaseStatefulMafsGraphProps(): StatefulMafsGraphProps {
         showTooltips: false,
         showProtractor: false,
         hintMode: false,
+        readOnly: false,
         labels: ["x", "y"],
         graph: {type: "segment"},
     };

packages/perseus/src/widgets/interactive-graphs/stateful-mafs-graph.tsx

@@ -32,6 +32,7 @@ export type StatefulMafsGraphProps = {
     showProtractor: boolean;
     labels: InteractiveGraphProps["labels"];
     hintMode: boolean;
+    readOnly: boolean;
 };
 
 // Rather than be tightly bound to how data was structured in