Merge pull request #225 from ToposInstitute/theoryselection

Selection widget for theories

Author: epatters

packages/frontend/src/document/model_document_editor.tsx

@@ -1,15 +1,7 @@
 import type { ChangeFn, DocHandle } from "@automerge/automerge-repo";
 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 { type Accessor, Match, Switch, createMemo, createResource, useContext } from "solid-js";
 import invariant from "tiny-invariant";
 
 import type { JsonValue, Permissions } from "catcolab-api";
@@ -43,6 +35,7 @@ import { type TheoryLibrary, TheoryLibraryContext } from "../stdlib";
 import type { Theory } from "../theory";
 import { PermissionsButton } from "../user";
 import { type IndexedMap, indexMap } from "../util/indexing";
+import { TheorySelectorDialog } from "./theory_selector";
 import { type ModelDocument, newAnalysisDocument } from "./types";
 
 import "./model_document_editor.css";
@@ -239,26 +232,16 @@ 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;
-                            changeDoc((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>
+                <TheorySelectorDialog
+                    theory={props.liveDoc.theory()}
+                    setTheory={(id) => {
+                        changeDoc((model) => {
+                            model.theory = id;
+                        });
+                    }}
+                    theories={theories}
+                    disabled={doc().notebook.cells.some((cell) => cell.tag === "formal")}
+                />
             </div>
             <MultiProvider
                 values={[

packages/frontend/src/document/theory_selector.css

@@ -0,0 +1,62 @@
+.theory-selector-button {
+    border: none;
+    font-size: 1.25em;
+    padding: 16px;
+    background-color: transparent;
+    font-family: var(--main-font);
+    cursor: pointer;
+    font-weight: 500;
+
+    & .placeholder {
+        color: darkgray;
+    }
+
+    &:hover,
+    & .placeholder:hover {
+        color: var(--topos-color);
+    }
+}
+
+.theory-selector {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    background-color: transparent;
+    text-align: left;
+    border-top: transparent;
+    border-left: transparent;
+    min-height: 30vh;
+
+    & input[type="radio"] {
+        position: absolute;
+        opacity: 0;
+    }
+
+    & label:hover {
+        color: var(--topos-color);
+        cursor: pointer;
+    }
+
+    & .division {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+    }
+
+    & .division-name {
+        font-weight: 600;
+        padding-bottom: 1px;
+        opacity: 35%;
+    }
+
+    & .theory {
+        margin-left: 2ex;
+    }
+
+    & .description {
+        color: rgb(106, 106, 106);
+        font-size: 11px;
+        text-align: left;
+    }
+}

packages/frontend/src/document/theory_selector.tsx

@@ -0,0 +1,94 @@
+import Dialog from "@corvu/dialog";
+import { For, Show, createMemo, createSignal } from "solid-js";
+
+import type { TheoryLibrary, TheoryMeta } from "../stdlib";
+import type { TheoryId } from "../theory";
+
+import "./theory_selector.css";
+
+type TheorySelectorProps = {
+    theory: TheoryMeta | undefined;
+    setTheory: (theory: TheoryId | undefined) => void;
+    theories: TheoryLibrary;
+};
+
+export function TheorySelectorDialog(
+    props: {
+        disabled?: boolean;
+    } & TheorySelectorProps,
+) {
+    const [theorySelectorOpen, setTheorySelectorOpen] = createSignal(false);
+
+    return (
+        <Dialog open={theorySelectorOpen()} onOpenChange={setTheorySelectorOpen}>
+            <Dialog.Trigger class="theory-selector-button" disabled={props.disabled}>
+                <Show
+                    when={props.theory}
+                    fallback={<span class="placeholder">Choose a logic</span>}
+                >
+                    {props.theory?.name}
+                </Show>
+            </Dialog.Trigger>
+            <Dialog.Portal>
+                <Dialog.Overlay class="overlay" />
+                <Dialog.Content class="popup">
+                    <TheorySelector
+                        theory={props.theory}
+                        setTheory={(id) => {
+                            props.setTheory(id);
+                            setTheorySelectorOpen(false);
+                        }}
+                        theories={props.theories}
+                    />
+                </Dialog.Content>
+            </Dialog.Portal>
+        </Dialog>
+    );
+}
+
+export function TheorySelector(props: TheorySelectorProps) {
+    const groupedTheories = createMemo(() => {
+        const grouped = new Map<string, TheoryMeta[]>();
+
+        for (const theory of props.theories.metadata()) {
+            const category = theory.divisionCategory ?? "Other";
+            const group = grouped.get(category) || [];
+            group.push(theory);
+            grouped.set(category, group);
+        }
+
+        return Array.from(grouped.entries()).sort((a, b) => a[0].localeCompare(b[0]));
+    });
+
+    return (
+        <div class="theory-selector">
+            <For each={groupedTheories()}>
+                {([category, theories]) => (
+                    <div class="division">
+                        <h4 class="division-name">{category}</h4>
+                        <For each={theories}>
+                            {(meta) => (
+                                <div class="theory">
+                                    <input
+                                        type="radio"
+                                        name="theory"
+                                        id={meta.id}
+                                        value={meta.id}
+                                        onchange={(evt) => {
+                                            const id = evt.target.value as TheoryId;
+                                            props.setTheory(id ? id : undefined);
+                                        }}
+                                    />
+                                    <label for={meta.id}>
+                                        <div class="name">{meta.name}</div>
+                                        <div class="description">{meta.description}</div>
+                                    </label>
+                                </div>
+                            )}
+                        </For>
+                    </div>
+                )}
+            </For>
+        </div>
+    );
+}

packages/frontend/src/index.css

@@ -3,6 +3,7 @@
     --mono-font: Roboto Mono, monospace;
 
     --main-color: black;
+    --topos-color: #53b6b2;
 
     --h1-font-size: 3em;
     --h2-font-size: 2em;
@@ -62,6 +63,15 @@ h3 {
         rgba(15, 15, 15, 0.2) 0px 9px 24px;
 }
 
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
 .growable-container {
     flex-grow: 1;
 }

packages/frontend/src/stdlib/theories.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();
@@ -327,6 +333,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/types.ts

@@ -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.