Get the interactive graph flipbook ready for QE testing (#1100)

QE has a lot on their plate right now, so we need to use their time
efficiently.

This PR makes the Interactive Graph flipbook available via Storybook,
so QE testers will be able to access it at https://khan.github.io/perseus.

I've also made some quality-of-life improvements to the flipbook to make
testing easier. The main one being that you can now see the index of the
question you're viewing, and jump to any question by index.

Issue: none

## Test plan:

- `yarn storybook`
- `open http://localhost:6006`
- Search for "Flipbook"
- You should be able to paste JSON from the WIP
  [test plan](https://khanacademy.atlassian.net/wiki/spaces/LC/pages/2738520299/Test+plan+for+segment+graph)
  into the box and flip through the questions.

<img width="1008" alt="Screen Shot 2024-03-20 at 9 46 52 AM" src="https://github.com/Khan/perseus/assets/693920/9bcb1502-8ed6-4be8-862c-5186bab08824">

Author: benchristel

Reviewers: jeremywiebe, nedredmond

Required Reviewers:

Approved By: jeremywiebe

Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Extract i18n strings (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ gerald, ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x)

Pull Request URL: #1100

Author: benchristel

dev/editable-controlled-input.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import {useState} from "react";
+
+import type {PropsFor} from "@khanacademy/wonder-blocks-core";
+
+type Props = Omit<PropsFor<"input">, "value" | "onInput"> & {
+    value: string;
+    onInput: (newValue: string) => unknown;
+};
+
+// The term "controlled input", in React, refers to an input element or
+// component whose displayed value is determined by its props, rather than by
+// the input's internal state. An EditableControlledInput is controlled as long
+// as it does not have focus. While it is focused, it becomes editable and emits
+// onInput events.
+export function EditableControlledInput(props: Props): React.ReactElement {
+    const {value, onInput, ...restOfProps} = props;
+    const [focused, setFocused] = useState(false);
+    const [wipValue, setWipValue] = useState("");
+    return (
+        <input
+            {...restOfProps}
+            value={focused ? wipValue : value}
+            onChange={(e) => {
+                setWipValue(e.target.value);
+                onInput(e.target.value);
+            }}
+            onFocus={() => {
+                setWipValue(value);
+                setFocused(true);
+            }}
+            onBlur={() => {
+                setFocused(false);
+            }}
+        />
+    );
+}

dev/flipbook-model.test.ts

@@ -5,6 +5,8 @@ import {
     previous,
     setQuestions,
     selectQuestions,
+    removeCurrentQuestion,
+    jumpToQuestion,
 } from "./flipbook-model";
 
 import type {FlipbookModel} from "./flipbook-model";
@@ -20,7 +22,9 @@ describe("flipbookModelReducer", () => {
             requestedIndex: 42,
         });
     });
+});
 
+describe("next/previous", () => {
     it("goes to the next question", () => {
         const model: FlipbookModel = {
             questions: `{}\n{}`,
@@ -75,7 +79,45 @@ describe("flipbookModelReducer", () => {
             requestedIndex: 0,
         });
     });
+});
+
+describe("jumpToQuestion", () => {
+    it("does nothing given a non-numeric value", () => {
+        const state: FlipbookModel = {questions: "foo", requestedIndex: 0};
+        const action = jumpToQuestion("blah");
+
+        expect(flipbookModelReducer(state, action)).toEqual({
+            questions: "foo",
+            requestedIndex: 0,
+        });
+    });
+
+    it("does nothing given a negative value", () => {});
+
+    it("does nothing given zero", () => {
+        // jumpToQuestion accepts raw user input, which uses 1-based indexing,
+        // not 0-based. So 0 is not a valid input.
+        const state: FlipbookModel = {
+            questions: "foo\nbar\nbaz",
+            requestedIndex: 2,
+        };
+        const action = jumpToQuestion("0");
+
+        expect(flipbookModelReducer(state, action).requestedIndex).toBe(2);
+    });
+
+    it("jumps to the given question by 1-based index", () => {
+        const state: FlipbookModel = {
+            questions: "foo\nbar\nbaz",
+            requestedIndex: 0,
+        };
+        const action = jumpToQuestion("2");
+
+        expect(flipbookModelReducer(state, action).requestedIndex).toBe(1);
+    });
+});
 
+describe("setQuestions", () => {
     it("replaces the questions string", () => {
         const model: FlipbookModel = {
             questions: "",
@@ -88,6 +130,40 @@ describe("flipbookModelReducer", () => {
     });
 });
 
+describe("removeCurrentQuestion", () => {
+    it("does nothing when there are no questions", () => {
+        const model: FlipbookModel = {questions: "", requestedIndex: 0};
+        expect(flipbookModelReducer(model, removeCurrentQuestion)).toEqual({
+            questions: "",
+            requestedIndex: 0,
+        });
+    });
+
+    it("removes the first question when the requestedIndex is 0", () => {
+        const model: FlipbookModel = {questions: "one\ntwo", requestedIndex: 0};
+        expect(flipbookModelReducer(model, removeCurrentQuestion)).toEqual({
+            questions: "two",
+            requestedIndex: 0,
+        });
+    });
+
+    it("removes the second question when the requestedIndex is 1", () => {
+        const model: FlipbookModel = {questions: "one\ntwo", requestedIndex: 1};
+        expect(flipbookModelReducer(model, removeCurrentQuestion)).toEqual({
+            questions: "one",
+            requestedIndex: 1,
+        });
+    });
+
+    it("removes the last question when the index is high out of bounds", () => {
+        const model: FlipbookModel = {questions: "one\ntwo", requestedIndex: 9};
+        expect(flipbookModelReducer(model, removeCurrentQuestion)).toEqual({
+            questions: "one",
+            requestedIndex: 9,
+        });
+    });
+});
+
 describe("selectCurrentQuestion", () => {
     it("returns null when there are no questions", () => {
         const model = {questions: "", requestedIndex: 0};

dev/flipbook-model.ts

@@ -14,18 +14,34 @@ export type FlipbookModel = {
 // ---------------------------------------------------------------------------
 
 export type Action =
+    | {type: "noop"}
     | {type: "next"}
     | {type: "previous"}
-    | {type: "set-questions"; questions: string};
+    | {type: "set-questions"; questions: string}
+    | {type: "remove-current-question"}
+    | {type: "jump-to-index"; index: number};
 
 export const next: Action = {type: "next"};
 
 export const previous: Action = {type: "previous"};
 
+export const jumpToQuestion = (rawUserInput: string): Action => {
+    if (!isPositiveInteger(rawUserInput)) {
+        return {type: "noop"};
+    }
+
+    return {
+        type: "jump-to-index",
+        index: parseInt(rawUserInput, 10) - 1,
+    };
+};
+
 export function setQuestions(questions: string): Action {
     return {type: "set-questions", questions};
 }
 
+export const removeCurrentQuestion: Action = {type: "remove-current-question"};
+
 // Reducer
 // ---------------------------------------------------------------------------
 
@@ -34,34 +50,47 @@ export function flipbookModelReducer(
     action: Action,
 ): FlipbookModel {
     switch (action.type) {
-        case "next": {
+        case "next":
+            return updateIndex(state, (index) => index + 1);
+        case "previous":
+            return updateIndex(state, (index) => index - 1);
+        case "jump-to-index":
+            return updateIndex(state, () => action.index);
+        case "set-questions": {
             return {
                 ...state,
-                requestedIndex: clampIndex(
-                    state.requestedIndex + 1,
-                    selectQuestions(state),
-                ),
+                questions: action.questions,
             };
         }
-        case "previous": {
+        case "remove-current-question": {
+            const indexToRemove = selectCurrentQuestionIndex(state);
             return {
                 ...state,
-                requestedIndex: clampIndex(
-                    state.requestedIndex - 1,
-                    selectQuestions(state),
-                ),
-            };
-        }
-        case "set-questions": {
-            return {
-                ...state,
-                questions: action.questions,
+                questions: state.questions
+                    .split("\n")
+                    .filter((_, i) => i !== indexToRemove)
+                    .join("\n"),
             };
         }
     }
     return state;
 }
 
+// updateIndex immutably updates the `requestedIndex` of the given `state`,
+// ensuring that the resulting index is valid and in-bounds.
+// The given `update` function is used to determine the new index. The index
+// passed to `update` is the current *effective* index, which may be different
+// from the requested index. Unlike the requested index, the effective index is
+// guaranteed to be in-bounds.
+function updateIndex(state: FlipbookModel, update: (index: number) => number) {
+    const currIndex = selectCurrentQuestionIndex(state);
+    const questions = selectQuestions(state);
+    return {
+        ...state,
+        requestedIndex: clampIndex(update(currIndex), questions),
+    };
+}
+
 function clampIndex(index: number, array: unknown[]): number {
     if (array.length === 0) {
         return 0;
@@ -91,10 +120,18 @@ export const selectQuestions = cache(
 export const selectCurrentQuestion = cache(
     (state: FlipbookModel): PerseusRenderer | null => {
         const questions = selectQuestions(state);
-        return questions[clampIndex(state.requestedIndex, questions)] ?? null;
+        return questions[selectCurrentQuestionIndex(state)] ?? null;
     },
 );
 
+export const selectNumQuestions = cache(
+    (state: FlipbookModel): number => selectQuestions(state).length,
+);
+
+export const selectCurrentQuestionIndex = (state: FlipbookModel): number => {
+    return clampIndex(state.requestedIndex, selectQuestions(state));
+};
+
 function parseQuestion(json): PerseusRenderer {
     try {
         return JSON.parse(json);
@@ -109,3 +146,7 @@ function parseQuestion(json): PerseusRenderer {
         };
     }
 }
+
+function isPositiveInteger(s: string): boolean {
+    return /^\d+$/.test(s) && +s > 0;
+}

dev/flipbook.tsx

@@ -1,5 +1,6 @@
 /* eslint monorepo/no-internal-import: "off", monorepo/no-relative-import: "off", import/no-relative-packages: "off" */
 import Button from "@khanacademy/wonder-blocks-button";
+import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
@@ -9,12 +10,17 @@ import {useReducer, useRef} from "react";
 import {Renderer} from "../packages/perseus/src";
 import {isCorrect} from "../packages/perseus/src/util";
 
+import {EditableControlledInput} from "./editable-controlled-input";
 import {
     flipbookModelReducer,
     next,
     previous,
+    removeCurrentQuestion,
+    selectCurrentQuestionIndex,
     selectCurrentQuestion,
     setQuestions,
+    selectNumQuestions,
+    jumpToQuestion,
 } from "./flipbook-model";
 
 import type {
@@ -40,6 +46,8 @@ export function Flipbook() {
     });
 
     const question = selectCurrentQuestion(state);
+    const numQuestions = selectNumQuestions(state);
+    const index = selectCurrentQuestionIndex(state);
 
     const noTextEntered = state.questions.trim() === "";
 
@@ -53,15 +61,29 @@ export function Flipbook() {
                 onChange={(e) => dispatch(setQuestions(e.target.value))}
             />
             <Strut size={Spacing.small_12} />
-            <View style={{flexDirection: "row"}}>
+            <View style={{flexDirection: "row", alignItems: "baseline"}}>
                 <Button kind="secondary" onClick={() => dispatch(previous)}>
                     Previous
                 </Button>
                 <Strut size={Spacing.xxSmall_6} />
                 <Button kind="secondary" onClick={() => dispatch(next)}>
                     Next
                 </Button>
+                <Strut size={Spacing.medium_16} />
+                <Progress
+                    zeroBasedIndex={index}
+                    total={numQuestions}
+                    onIndexChanged={(input) => dispatch(jumpToQuestion(input))}
+                />
+                <Strut size={Spacing.medium_16} />
+                <Button
+                    kind="tertiary"
+                    onClick={() => dispatch(removeCurrentQuestion)}
+                >
+                    Discard question
+                </Button>
             </View>
+            <Strut size={Spacing.small_12} />
             <div style={{display: noTextEntered ? "block" : "none"}}>
                 <h2>Instructions</h2>
                 <ol>
@@ -101,8 +123,9 @@ function SideBySideQuestionRenderer({
                 className="framework-perseus"
                 style={{
                     flexDirection: "row",
-                    padding: Spacing.xLarge_32,
-                    gap: Spacing.small_12,
+                    padding: Spacing.medium_16,
+                    gap: Spacing.medium_16,
+                    background: "#f8f8f8",
                 }}
             >
                 <GradableRenderer
@@ -137,7 +160,14 @@ function GradableRenderer(props: QuestionRendererProps) {
     }
 
     return (
-        <View style={{alignItems: "flex-start"}}>
+        <View
+            style={{
+                alignItems: "flex-start",
+                overflow: "hidden",
+                background: Color.white,
+                padding: Spacing.medium_16,
+            }}
+        >
             <Renderer
                 ref={rendererRef}
                 content={question.content}
@@ -158,3 +188,24 @@ function GradableRenderer(props: QuestionRendererProps) {
         </View>
     );
 }
+
+type ProgressProps = {
+    zeroBasedIndex: number;
+    total: number;
+    onIndexChanged: (rawUserInput: string) => unknown;
+};
+
+function Progress(props: ProgressProps) {
+    const {zeroBasedIndex, total, onIndexChanged} = props;
+    const indexToDisplay = Math.min(total, zeroBasedIndex + 1);
+    return (
+        <div>
+            <EditableControlledInput
+                value={String(indexToDisplay)}
+                onInput={onIndexChanged}
+                style={{width: "4em", textAlign: "right"}}
+            />
+            &nbsp;of {total}
+        </div>
+    );
+}