Theory selection widget

Author: hamidahoderinwale

packages/frontend/package.json

@@ -22,6 +22,7 @@
         "@automerge/automerge-repo-network-websocket": "^1.2.1",
         "@automerge/automerge-repo-storage-indexeddb": "^1.2.1",
         "@automerge/prosemirror": "^0.0.13",
+        "@corvu/dialog": "^0.2.3",
         "@corvu/disclosure": "^0.2.0",
         "@corvu/popover": "^0.2.0",
         "@corvu/resizable": "^0.2.2",

packages/frontend/pnpm-lock.yaml

@@ -1,18 +1,10 @@
 import type { 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,
-    For,
-    Match,
-    Switch,
-    createMemo,
-    createResource,
-    useContext,
-} from "solid-js";
-import invariant from "tiny-invariant";
-
 import type { Uuid } from "catlog-wasm";
+import { type Accessor, Match, Switch, createMemo, createResource, useContext } from "solid-js";
+import invariant from "tiny-invariant";
 import { RPCContext, RepoContext, retrieveDoc } from "../api";
 import { IconButton, InlineInput } from "../components";
 import {
@@ -41,10 +33,11 @@ import { BrandedToolbar, HelpButton } from "../page";
 import { type TheoryLibrary, TheoryLibraryContext } from "../stdlib";
 import type { Theory } from "../theory";
 import { type IndexedMap, indexMap } from "../util/indexing";
+import TheorySelector from "./theory_selector";
 import { type ModelDocument, newAnalysisDocument } from "./types";
 
 import "./model_document_editor.css";
-
+import "./theory_selector.css";
 import ChartNetwork from "lucide-solid/icons/chart-network";
 
 /** A model document "live" for editing.
@@ -225,26 +218,31 @@ export function ModelPane(props: {
                         placeholder="Untitled"
                     />
                 </div>
-                <div class="model-theory">
-                    <select
-                        required
-                        disabled={doc().notebook.cells.some((cell) => cell.tag === "formal")}
-                        value={doc().theory ?? ""}
-                        onInput={(evt) => {
-                            const id = evt.target.value;
-                            docHandle().change((model) => {
-                                model.theory = id ? id : undefined;
-                            });
-                        }}
-                    >
-                        <option value="" disabled selected hidden>
-                            Choose a logic
-                        </option>
-                        <For each={Array.from(theories.metadata())}>
-                            {(meta) => <option value={meta.id}>{meta.name}</option>}
-                        </For>
-                    </select>
-                </div>
+                <Dialog
+                    initialOpen={false}
+                    modal={true}
+                    closeOnEscapeKeyDown={true}
+                    trapFocus={true}
+                >
+                    <div>
+                        <Dialog.Trigger class="theory-selector">
+                            <span> {liveDoc().theory()?.name || "Theory"} </span>
+                        </Dialog.Trigger>
+                    </div>
+                    <Dialog.Portal>
+                        <div class="overlay">
+                            <Dialog.Content class="popup" id="theory-selector-popup">
+                                <span>
+                                    <TheorySelector
+                                        docHandle={docHandle}
+                                        theories={theories}
+                                        doc={doc()}
+                                    />
+                                </span>
+                            </Dialog.Content>
+                        </div>
+                    </Dialog.Portal>
+                </Dialog>
             </div>
             <MultiProvider
                 values={[

packages/frontend/src/document/model_document_editor.tsx

@@ -0,0 +1,80 @@
+.theory-selector {
+    text-transform: capitalize;
+    border: none;
+    font-size: 17px;
+    padding: 16px;
+    background-color: transparent;
+    font-family: var(--main-font);
+    cursor: pointer;
+    font-weight: 600;
+    opacity: 70%;
+}
+
+.theory-selector:hover {
+    color: var(--topos-color);
+}
+
+.description {
+    color: rgb(106, 106, 106);
+    font-size: 11px;
+    text-align: left;
+}
+
+#input-selections input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+}
+
+#input-selections {
+    display: flex;
+    flex-direction: column;
+    margin: 5px;
+    background-color: transparent;
+    text-align: left;
+    border-top: transparent;
+    border-left: transparent;
+    min-height: 30vh;
+}
+
+#selection-items:hover {
+    color: var(--topos-color);
+    cursor: pointer;
+}
+
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+ul li {
+    margin: 5px;
+    padding: 6px;
+}
+
+#division-category {
+    font-weight: 600;
+    padding-bottom: 1px;
+    opacity: 35%;
+}
+
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+#theory-selector-popup {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 20px;
+}

packages/frontend/src/document/theory_selector.css

@@ -0,0 +1,75 @@
+import { For, createMemo } from "solid-js";
+import type { TheoryLibrary } from "../stdlib/types";
+import type { ModelDocument } from "./types";
+import "./model_document_editor.css";
+import type { DocHandle } from "@automerge/automerge-repo";
+import type { TheoryMeta } from "../stdlib/types";
+import { Theory } from "../theory";
+
+interface TheorySelectorProps {
+    docHandle: DocHandle<TheorySelectorProps>;
+    theories: TheoryLibrary;
+    doc: ModelDocument;
+}
+
+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) {
+            const category = theory.divisionCategory ?? "Other";
+            grouped.set(category, [...(grouped.get(category) || []), theory]);
+        }
+
+        return Array.from(grouped.entries()).sort((a, b) => a[0].localeCompare(b[0]));
+    });
+
+    return (
+        <div id="input-selections">
+            <For each={groupedTheories()}>
+                {([category, theories]) => (
+                    <div class="selection-items">
+                        <h4 id="division-category">{category}</h4>
+                        <For each={theories}>
+                            {(meta) => (
+                                <label>
+                                    <input
+                                        type="radio"
+                                        name="theory"
+                                        value={meta.id}
+                                        onchange={(evt) => {
+                                            const id = (evt.target as HTMLInputElement).value;
+                                            props.docHandle().change(
+                                                (model: {
+                                                    theory: string | undefined;
+                                                }) => {
+                                                    model.theory = id ? id : undefined;
+                                                },
+                                            );
+                                        }}
+                                    />
+                                    <div>
+                                        <ul>
+                                            <li id="selection-items">
+                                                {meta.name}{" "}
+                                                <div>
+                                                    <span class="description">
+                                                        {meta.description}
+                                                    </span>
+                                                </div>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </label>
+                            )}
+                        </For>
+                    </div>
+                )}
+            </For>
+        </div>
+    );
+};
+export default TheorySelector;

packages/frontend/src/document/theory_selector.tsx

@@ -3,6 +3,7 @@
     --mono-font: Roboto Mono, monospace;
 
     --main-color: black;
+    --topos-color: #53b6b2;
 
     --h1-font-size: 3em;
     --h2-font-size: 2em;
@@ -60,6 +61,7 @@ h3 {
     border-radius: 6px;
     box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px,
         rgba(15, 15, 15, 0.2) 0px 9px 24px;
+    overflow-y: auto;
 }
 
 .growable-container {

packages/frontend/src/index.css

@@ -178,7 +178,7 @@ export function NotebookCell(props: {
                         </IconButton>
                     </Popover.Anchor>
                     <Popover.Portal>
-                        <Popover.Content class="popup">
+                        <Popover.Content class="selector-popup">
                             <Completions completions={completions()} onComplete={closeMenu} />
                         </Popover.Content>
                     </Popover.Portal>

packages/frontend/src/notebook/notebook_cell.tsx

@@ -20,6 +20,7 @@ stdTheories.add(
         id: "simple-olog",
         name: "Olog",
         description: "Ontology log, a simple conceptual model",
+        divisionCategory: "Knowledge and Data",
     },
     (meta) => {
         const thCategory = new catlog.ThCategory();
@@ -63,6 +64,7 @@ stdTheories.add(
         id: "schema",
         name: "Schema",
         description: "Schema for a categorical database",
+        divisionCategory: "Knowledge and Data",
     },
     (meta) => {
         const thSchema = new catlog.ThSchema();
@@ -132,6 +134,8 @@ stdTheories.add(
     {
         id: "reg-net",
         name: "Regulatory network",
+        description: "Signed graphs to model networks",
+        divisionCategory: "Life Sciences",
     },
     (meta) => {
         const thSignedCategory = new catlog.ThSignedCategory();
@@ -198,6 +202,8 @@ stdTheories.add(
     {
         id: "causal-loop",
         name: "Causal loop diagram",
+        description: "Model cause-and-effect relationships",
+        divisionCategory: "System Dynamics",
     },
     (meta) => {
         const thSignedCategory = new catlog.ThSignedCategory();
@@ -266,6 +272,8 @@ stdTheories.add(
     {
         id: "stock-flow",
         name: "Stock and flow",
+        description: "Model accumulation (stocks) and change (flows)",
+        divisionCategory: "System Dynamics",
     },
     (meta) => {
         const thCategoryLinks = new catlog.ThCategoryLinks();

packages/frontend/src/stdlib/theories.tsx

@@ -14,6 +14,9 @@ export type TheoryMeta = {
 
     /** Short description of models of theory. */
     description?: string;
+
+    /** division Category */
+    divisionCategory?: string;
 };
 
 /** Library of double theories configured for the frontend.