Add query params to dev ui (#1097)

https://github.com/Khan/perseus/assets/23404711/43efa352-2e46-4780-a640-bd95ce79803d


## Summary
Add search feature and query params to dev ui to prevent needing to reset state and scroll to graph on each fast module reload.

### Issue
N/A

Author: nedredmond

Reviewers: jeremywiebe, nedredmond, benchristel, nishasy

Required Reviewers:

Approved By: jeremywiebe

Checks: ⌛ 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), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1097

Author: nedredmond

dev/gallery.tsx

@@ -2,12 +2,13 @@
 import {useUniqueIdWithMock, View} from "@khanacademy/wonder-blocks-core";
 import {OptionItem, MultiSelect} from "@khanacademy/wonder-blocks-dropdown";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
+import SearchField from "@khanacademy/wonder-blocks-search-field";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import Switch from "@khanacademy/wonder-blocks-switch";
 import {color} from "@khanacademy/wonder-blocks-tokens";
 import {css, StyleSheet} from "aphrodite";
 import * as React from "react";
-import {useState} from "react";
+import {useEffect, useMemo, useState} from "react";
 
 import {Renderer} from "../packages/perseus/src";
 import * as grapher from "../packages/perseus/src/widgets/__testdata__/grapher.testdata";
@@ -76,34 +77,79 @@ const styles = StyleSheet.create({
 
 export function Gallery() {
     const ids = useUniqueIdWithMock();
+    const params = useMemo(
+        () => new URLSearchParams(window.location.search),
+        [],
+    );
+
+    const [isMobile, setIsMobile] = useState(params.get("mobile") === "true");
+    const [mafsFlags, setMafsFlags] = useState<Array<string>>(
+        params.get("flags")?.split(",") || [],
+    );
+    const [search, setSearch] = useState<string>(params.get("search") || "");
 
-    const [isMobile, setIsMobile] = useState(false);
-    const [mafsFlags, setMafsFlags] = useState<Array<string>>([]);
+    useEffect(() => {
+        const url = new URL(window.location.href);
+        if (isMobile) {
+            url.searchParams.set("mobile", "true");
+        } else {
+            url.searchParams.delete("mobile");
+        }
+        if (mafsFlags.length === 0) {
+            url.searchParams.delete("flags");
+        } else {
+            url.searchParams.set("flags", mafsFlags.join(","));
+        }
+        if (!search) {
+            url.searchParams.delete("search");
+        } else {
+            url.searchParams.set("search", search);
+        }
+        window.history.replaceState({}, "", url.toString());
+    }, [isMobile, mafsFlags, params, search]);
 
     const mafsFlagsObject = mafsFlags.reduce((acc, flag) => {
         acc[flag] = true;
         return acc;
     }, {});
 
+    const mobileId = ids.get("mobile");
+    const flagsId = ids.get("flags");
+    const searchId = ids.get("search");
+
     return (
         <View className={css(styles.page)}>
             <header className={css(styles.header)}>
                 <Switch
-                    id={ids.get("mobile")}
+                    id={mobileId}
                     checked={isMobile}
                     onChange={setIsMobile}
                 />
                 <Strut size={Spacing.xSmall_8} />
-                <label htmlFor={ids.get("mobile")}>Mobile</label>
+                <label htmlFor={mobileId}>Mobile</label>
                 <Strut size={Spacing.medium_16} />
-                <MultiSelect onChange={setMafsFlags} selectedValues={mafsFlags}>
+                <MultiSelect
+                    id={flagsId}
+                    onChange={setMafsFlags}
+                    selectedValues={mafsFlags}
+                >
                     <OptionItem value="segment" label="Segment" />
                     <OptionItem value="linear" label="Linear" />
                     <OptionItem value="linear-system" label="Linear System" />
                     <OptionItem value="point" label="Point" />
                     <OptionItem value="ray" label="Ray" />
                     <OptionItem value="polygon" label="Polygon" />
                 </MultiSelect>
+                <Strut size={Spacing.xSmall_8} />
+                <label htmlFor={flagsId}>Mafs Flags</label>
+                <Strut size={Spacing.medium_16} />
+                <SearchField
+                    id={searchId}
+                    value={search}
+                    onChange={setSearch}
+                />
+                <Strut size={Spacing.xSmall_8} />
+                <label htmlFor={searchId}>Search Types</label>
                 <Strut size={Spacing.medium_16} />
                 <nav>
                     <a href="#flipbook">Flipbook</a>
@@ -114,16 +160,22 @@ export function Gallery() {
                     style={styles.cards}
                     className={isMobile ? "perseus-mobile" : ""}
                 >
-                    {questions.map((question, i) => (
-                        <QuestionRenderer
-                            key={i}
-                            question={question}
-                            apiOptions={{
-                                isMobile,
-                                flags: {mafs: mafsFlagsObject},
-                            }}
-                        />
-                    ))}
+                    {questions
+                        .filter((question) =>
+                            search
+                                ? graphTypeContainsText(question, search)
+                                : true,
+                        )
+                        .map((question, i) => (
+                            <QuestionRenderer
+                                key={i}
+                                question={question}
+                                apiOptions={{
+                                    isMobile,
+                                    flags: {mafs: mafsFlagsObject},
+                                }}
+                            />
+                        ))}
                 </View>
             </main>
         </View>
@@ -150,3 +202,31 @@ function QuestionRenderer({question, apiOptions = {}}: QuestionRendererProps) {
         </div>
     );
 }
+
+const graphTypeContainsText = (
+    question: PerseusRenderer,
+    search: string,
+): boolean => {
+    const widgetKey = Object.keys(question.widgets)[0];
+    const widget = question.widgets[widgetKey];
+    switch (widget.type) {
+        case "grapher":
+            if (
+                widget.options.availableTypes.some((type: string) =>
+                    type.includes(search),
+                )
+            ) {
+                return true;
+            }
+            return false;
+        case "interactive-graph":
+            if (widget.options.graph.type.includes(search)) {
+                return true;
+            }
+            return false;
+        case "number-line":
+            return widget.type.includes(search);
+        default:
+            return false;
+    }
+};

dev/package.json

@@ -24,6 +24,7 @@
         "@khanacademy/pure-markdown": "^0.3.1",
         "@khanacademy/simple-markdown": "^0.11.4",
         "@khanacademy/wonder-blocks-banner": "^3.0.33",
+        "@khanacademy/wonder-blocks-search-field": "^2.2.5",
         "@khanacademy/wonder-blocks-tokens": "^1.0.0"
     },
     "devDependencies": {