ENH: Close theory selector dialog upon selection.

Also, refactor the dialog to not depend on the whole Automerge document.

Author: epatters

packages/frontend/src/document/model_document_editor.tsx

@@ -2,7 +2,15 @@ import type { ChangeFn, DocHandle } from "@automerge/automerge-repo";
 import Dialog from "@corvu/dialog";
 import { MultiProvider } from "@solid-primitives/context";
 import { useNavigate, useParams } from "@solidjs/router";
-import { type Accessor, Match, Switch, createMemo, createResource, useContext } from "solid-js";
+import {
+    type Accessor,
+    Match,
+    Switch,
+    createMemo,
+    createResource,
+    createSignal,
+    useContext,
+} from "solid-js";
 import invariant from "tiny-invariant";
 
 import type { JsonValue, Permissions } from "catcolab-api";
@@ -36,7 +44,7 @@ import { type TheoryLibrary, TheoryLibraryContext } from "../stdlib";
 import type { Theory } from "../theory";
 import { PermissionsButton } from "../user";
 import { type IndexedMap, indexMap } from "../util/indexing";
-import TheorySelector from "./theory_selector";
+import { TheorySelector } from "./theory_selector";
 import { type ModelDocument, newAnalysisDocument } from "./types";
 
 import "./model_document_editor.css";
@@ -215,6 +223,7 @@ export function ModelPane(props: {
 }) {
     const theories = useContext(TheoryLibraryContext);
     invariant(theories, "Library of theories should be provided as context");
+    const [theorySelectorOpen, setTheorySelectorOpen] = createSignal(false);
 
     const liveDoc = () => props.liveDoc;
     const doc = () => props.liveDoc.doc;
@@ -233,24 +242,22 @@ export function ModelPane(props: {
                         placeholder="Untitled"
                     />
                 </div>
-                <Dialog
-                    initialOpen={false}
-                    modal={true}
-                    closeOnEscapeKeyDown={true}
-                    trapFocus={true}
-                >
-                    <div>
-                        <Dialog.Trigger class="theory-selector-button">
-                            {liveDoc().theory()?.name || "Theory"}
-                        </Dialog.Trigger>
-                    </div>
+                <Dialog open={theorySelectorOpen()} onOpenChange={setTheorySelectorOpen}>
+                    <Dialog.Trigger class="theory-selector-button">
+                        {liveDoc().theory()?.name || "Theory"}
+                    </Dialog.Trigger>
                     <Dialog.Portal>
                         <Dialog.Overlay class="overlay" />
                         <Dialog.Content class="popup">
                             <TheorySelector
-                                docHandle={props.liveDoc.docHandle}
+                                theory={props.liveDoc.theory()?.id}
+                                setTheory={(id) => {
+                                    changeDoc((model) => {
+                                        model.theory = id;
+                                    });
+                                    setTheorySelectorOpen(false);
+                                }}
                                 theories={theories}
-                                doc={doc()}
                             />
                         </Dialog.Content>
                     </Dialog.Portal>

packages/frontend/src/document/theory_selector.tsx

@@ -1,25 +1,21 @@
-import type { DocHandle } from "@automerge/automerge-repo";
 import { For, createMemo } from "solid-js";
 
 import type { TheoryLibrary, TheoryMeta } from "../stdlib";
-import type { ModelDocument } from "./types";
+import type { TheoryId } from "../theory";
 
 import "./theory_selector.css";
 
-interface TheorySelectorProps {
-    docHandle: DocHandle<ModelDocument>;
+type TheorySelectorProps = {
+    theory: TheoryId | undefined;
+    setTheory: (theory: TheoryId | undefined) => void;
     theories: TheoryLibrary;
-    doc: ModelDocument;
-}
+};
 
-const TheorySelector = (props: TheorySelectorProps) => {
+export const TheorySelector = (props: TheorySelectorProps) => {
     const groupedTheories = createMemo(() => {
-        const theories = Array.from(props.theories.metadata()).filter(
-            (meta) => meta.divisionCategory,
-        );
         const grouped = new Map<string, TheoryMeta[]>();
 
-        for (const theory of theories) {
+        for (const theory of props.theories.metadata()) {
             const category = theory.divisionCategory ?? "Other";
             const group = grouped.get(category) || [];
             group.push(theory);
@@ -37,23 +33,22 @@ const TheorySelector = (props: TheorySelectorProps) => {
                         <h4 class="division">{category}</h4>
                         <For each={theories}>
                             {(meta) => (
-                                <label>
+                                <div class="theory">
                                     <input
                                         type="radio"
                                         name="theory"
+                                        id={meta.id}
                                         value={meta.id}
                                         onchange={(evt) => {
-                                            const id = (evt.target as HTMLInputElement).value;
-                                            props.docHandle.change((model) => {
-                                                model.theory = id ? id : undefined;
-                                            });
+                                            const id = evt.target.value as TheoryId;
+                                            props.setTheory(id ? id : undefined);
                                         }}
                                     />
-                                    <div class="theory">
-                                        {meta.name}
+                                    <label for={meta.id}>
+                                        <div class="name">{meta.name}</div>
                                         <div class="description">{meta.description}</div>
-                                    </div>
-                                </label>
+                                    </label>
+                                </div>
                             )}
                         </For>
                     </>
@@ -62,4 +57,3 @@ const TheorySelector = (props: TheorySelectorProps) => {
         </div>
     );
 };
-export default TheorySelector;