ENH: Editor variants, a petri-net string diagram editor variant

Author: kasbah

packages/frontend/src/model/document.ts

@@ -11,10 +11,11 @@ import type { ValidatedModel } from "./model_library";
 export type ModelDocument = Document & { type: "model" };
 
 /** Create an empty model document. */
-export const newModelDocument = (theory: string): ModelDocument => ({
+export const newModelDocument = (theory: string, editorVariant?: string): ModelDocument => ({
     name: "",
     type: "model",
     theory,
+    ...(editorVariant ? { editorVariant } : {}),
     notebook: newNotebook<ModelJudgment>(),
     version: currentVersion(),
 });
@@ -57,37 +58,72 @@ export async function createModel(
     return api.createDoc(init);
 }
 
-/** Migrate a model document from one theory to another. */
-export async function migrateModelDocument(
+/** Migrate a model document to a different theory, or switch its editor variant.
+ */
+export async function switchTheoryOrEditor(
     liveModel: LiveModelDoc,
-    targetTheoryId: string,
+    editorOrModelId: string,
     theories: TheoryLibrary,
 ) {
     const { doc, changeDoc } = liveModel.liveDoc;
-    const targetTheory = await theories.get(targetTheoryId);
+
+    let targetBaseId: string = editorOrModelId;
+    let targetEditorVariant: string | undefined;
+    const isEditor = theories.isEditorVariant(editorOrModelId);
+    if (isEditor) {
+        const base = theories.getBaseTheoryId(editorOrModelId);
+        invariant(base !== undefined, "Editor variant must have a base theory");
+        targetBaseId = base;
+        targetEditorVariant = editorOrModelId;
+    }
+
+    // If only the editor variant is changing (same base theory), just flip the field.
+    if (targetBaseId === doc.theory) {
+        changeDoc((doc) => {
+            if (targetEditorVariant) {
+                doc.editorVariant = targetEditorVariant;
+            } else {
+                delete doc.editorVariant;
+            }
+        });
+        return;
+    }
+
+    // Real theory migration below.
+    const targetTheory = await theories.get(targetBaseId);
     const theory = liveModel.theory();
     let model = liveModel.elaboratedModel();
     invariant(theory && model); // FIXME: Should fail gracefully.
 
     // Trivial migration.
-    if (!NotebookUtils.hasFormalCells(doc.notebook) || theory.inclusions.includes(targetTheoryId)) {
+    if (!NotebookUtils.hasFormalCells(doc.notebook) || theory.inclusions.includes(targetBaseId)) {
         changeDoc((doc) => {
-            doc.theory = targetTheoryId;
+            doc.theory = targetBaseId;
+            if (targetEditorVariant) {
+                doc.editorVariant = targetEditorVariant;
+            } else {
+                delete doc.editorVariant;
+            }
         });
         return;
     }
 
     // Pushforward migration.
-    const migration = theory.pushforwards.find((m) => m.target === targetTheoryId);
+    const migration = theory.pushforwards.find((m) => m.target === targetBaseId);
     if (!migration) {
-        throw new Error(`No migration defined from ${theory.id} to ${targetTheoryId}`);
+        throw new Error(`No migration defined from ${theory.id} to ${targetBaseId}`);
     }
     // TODO: We need a general method to propagate changes from catlog models to
     // notebooks. This stop-gap solution only works because pushforward
     // migration doesn't have to create/delete cells, only update types.
     model = migration.migrate(model, targetTheory.theory);
     changeDoc((doc) => {
-        doc.theory = targetTheoryId;
+        doc.theory = targetBaseId;
+        if (targetEditorVariant) {
+            doc.editorVariant = targetEditorVariant;
+        } else {
+            delete doc.editorVariant;
+        }
         for (const judgment of NotebookUtils.getFormalContent(doc.notebook)) {
             if (judgment.tag === "object") {
                 judgment.obType = model.obType({

packages/frontend/src/model/editors.ts

@@ -0,0 +1,33 @@
+import type { Component } from "solid-js";
+
+import type { MorDecl, MorType, ObDecl, ObType } from "catlog-wasm";
+import type { CellActions } from "../notebook";
+import type { Theory } from "../theory";
+
+/** Editor overrides for an editor variant of a theory.
+
+Specifies which editor components should replace the defaults for particular
+object or morphism types.
+ */
+export type EditorVariantOverrides = {
+    obEditors?: Array<{ obType: ObType; editor: Component<ObjectEditorProps> }>;
+    morEditors?: Array<{ morType: MorType; editor: Component<MorphismEditorProps> }>;
+};
+
+/** Props for an object cell editor component in a model. */
+export type ObjectEditorProps = {
+    object: ObDecl;
+    modifyObject: (f: (decl: ObDecl) => void) => void;
+    isActive: boolean;
+    actions: CellActions;
+    theory: Theory;
+};
+
+/** Props for a morphism cell editor component in a model. */
+export type MorphismEditorProps = {
+    morphism: MorDecl;
+    modifyMorphism: (f: (decl: MorDecl) => void) => void;
+    isActive: boolean;
+    actions: CellActions;
+    theory: Theory;
+};

packages/frontend/src/model/model_editor.tsx

@@ -1,4 +1,6 @@
+import { deepEqual } from "fast-equals";
 import { Match, Switch, useContext } from "solid-js";
+import { Dynamic } from "solid-js/web";
 import invariant from "tiny-invariant";
 
 import type { InstantiatedModel, ModelJudgment, MorDecl, ObDecl } from "catlog-wasm";
@@ -8,7 +10,7 @@ import {
     NotebookEditor,
     newFormalCell,
 } from "../notebook";
-import type { ModelTypeMeta, Theory } from "../theory";
+import { TheoryLibraryContext, type ModelTypeMeta, type Theory } from "../theory";
 import { LiveModelContext } from "./context";
 import type { LiveModelDoc } from "./document";
 import { InstantiationCellEditor } from "./instantiation_cell_editor";
@@ -54,32 +56,60 @@ export function ModelNotebookEditor(props: { liveModel: LiveModelDoc }) {
 export function ModelCellEditor(props: FormalCellEditorProps<ModelJudgment>) {
     const liveModel = useContext(LiveModelContext);
     invariant(liveModel, "Live model should be provided as context");
+    const theories = useContext(TheoryLibraryContext);
+
+    const editorOverrides = () => {
+        const variantId = liveModel().liveDoc.doc.editorVariant;
+        return variantId && theories ? theories.getEditorOverrides(variantId) : undefined;
+    };
 
     return (
         <Switch>
             <Match when={props.content.tag === "object" && liveModel().theory()}>
-                {(theory) => (
-                    <ObjectCellEditor
-                        object={props.content as ObDecl}
-                        modifyObject={(f) => props.changeContent((content) => f(content as ObDecl))}
-                        isActive={props.isActive}
-                        actions={props.actions}
-                        theory={theory()}
-                    />
-                )}
+                {(theory) => {
+                    const obDecl = () => props.content as ObDecl;
+                    const editor = () => {
+                        const override = editorOverrides()?.obEditors?.find((o) =>
+                            deepEqual(o.obType, obDecl().obType),
+                        );
+                        return override?.editor ?? ObjectCellEditor;
+                    };
+                    return (
+                        <Dynamic
+                            component={editor()}
+                            object={obDecl()}
+                            modifyObject={(f: (decl: ObDecl) => void) =>
+                                props.changeContent((content) => f(content as ObDecl))
+                            }
+                            isActive={props.isActive}
+                            actions={props.actions}
+                            theory={theory()}
+                        />
+                    );
+                }}
             </Match>
             <Match when={props.content.tag === "morphism" && liveModel().theory()}>
-                {(theory) => (
-                    <MorphismCellEditor
-                        morphism={props.content as MorDecl}
-                        modifyMorphism={(f) =>
-                            props.changeContent((content) => f(content as MorDecl))
-                        }
-                        isActive={props.isActive}
-                        actions={props.actions}
-                        theory={theory()}
-                    />
-                )}
+                {(theory) => {
+                    const morDecl = () => props.content as MorDecl;
+                    const editor = () => {
+                        const override = editorOverrides()?.morEditors?.find((o) =>
+                            deepEqual(o.morType, morDecl().morType),
+                        );
+                        return override?.editor ?? MorphismCellEditor;
+                    };
+                    return (
+                        <Dynamic
+                            component={editor()}
+                            morphism={morDecl()}
+                            modifyMorphism={(f: (decl: MorDecl) => void) =>
+                                props.changeContent((content) => f(content as MorDecl))
+                            }
+                            isActive={props.isActive}
+                            actions={props.actions}
+                            theory={theory()}
+                        />
+                    );
+                }}
             </Match>
             <Match when={props.content.tag === "instantiation"}>
                 <InstantiationCellEditor

packages/frontend/src/model/model_info.tsx

@@ -1,7 +1,7 @@
 import { NotebookUtils } from "../notebook";
 import { stdTheories } from "../stdlib";
 import { TheorySelectorDialog } from "../theory/theory_selector";
-import { type LiveModelDoc, migrateModelDocument } from "./document";
+import { type LiveModelDoc, switchTheoryOrEditor } from "./document";
 
 /** Widget in the top right corner of a model document pane.
  */
@@ -10,7 +10,13 @@ export function ModelInfo(props: { liveModel: LiveModelDoc }) {
 
     const selectableTheories = () => {
         if (NotebookUtils.hasFormalCells(liveDoc().doc.notebook)) {
-            return props.liveModel.theory()?.migrationTargets ?? [];
+            const theory = props.liveModel.theory();
+            if (!theory) {
+                return [];
+            }
+            const baseId = liveDoc().doc.theory;
+            const editorVariantIds = stdTheories.getEditorVariantIds(baseId);
+            return [baseId, ...editorVariantIds, ...theory.migrationTargets];
         } else {
             // If the model has no formal cells, allow any theory to be selected.
             return undefined;
@@ -19,8 +25,10 @@ export function ModelInfo(props: { liveModel: LiveModelDoc }) {
 
     return (
         <TheorySelectorDialog
-            theoryMeta={stdTheories.getMetadata(liveDoc().doc.theory)}
-            setTheory={(id) => migrateModelDocument(props.liveModel, id, stdTheories)}
+            theoryMeta={stdTheories.getMetadata(
+                liveDoc().doc.editorVariant ?? liveDoc().doc.theory,
+            )}
+            setTheory={(id) => switchTheoryOrEditor(props.liveModel, id, stdTheories)}
             theories={selectableTheories()}
         />
     );

packages/frontend/src/model/morphism_cell_editor.tsx

@@ -2,24 +2,16 @@ import { createMemo, createSignal, useContext } from "solid-js";
 import invariant from "tiny-invariant";
 
 import { NameInput } from "catcolab-ui-components";
-import type { MorDecl } from "catlog-wasm";
-import type { CellActions } from "../notebook";
-import type { Theory } from "../theory";
 import { LiveModelContext } from "./context";
+import type { MorphismEditorProps } from "./editors";
 import { obClasses } from "./object_cell_editor";
 import { ObInput } from "./object_input";
 
 import arrowStyles from "../stdlib/arrow_styles.module.css";
 import "./morphism_cell_editor.css";
 
 /** Editor for a morphism declaration cell in a model. */
-export function MorphismCellEditor(props: {
-    morphism: MorDecl;
-    modifyMorphism: (f: (decl: MorDecl) => void) => void;
-    isActive: boolean;
-    actions: CellActions;
-    theory: Theory;
-}) {
+export function MorphismCellEditor(props: MorphismEditorProps) {
     const liveModel = useContext(LiveModelContext);
     invariant(liveModel, "Live model should be provided as context");
 

packages/frontend/src/model/object_cell_editor.tsx

@@ -1,18 +1,12 @@
 import { NameInput } from "catcolab-ui-components";
-import type { ObDecl, ObType } from "catlog-wasm";
-import type { CellActions } from "../notebook";
+import type { ObType } from "catlog-wasm";
 import type { Theory } from "../theory";
+import type { ObjectEditorProps } from "./editors";
 
 import "./object_cell_editor.css";
 
 /** Editor for an object declaration cell in a model. */
-export function ObjectCellEditor(props: {
-    object: ObDecl;
-    modifyObject: (f: (decl: ObDecl) => void) => void;
-    isActive: boolean;
-    actions: CellActions;
-    theory: Theory;
-}) {
+export function ObjectCellEditor(props: ObjectEditorProps) {
     const cssClasses = () => [
         "formal-judgment",
         "object-decl",