ENH: Cell type changes on frontend

Author: quffaro

packages/frontend/src/model/model_editor.tsx

@@ -27,6 +27,9 @@ export function ModelNotebookEditor(props: { liveModel: LiveModelDoc }) {
     const liveDoc = () => props.liveModel.liveDoc;
 
     const cellConstructors = () => {
+	    // const cells = liveDoc().doc.notebook.cellOrder;
+		// console.log(cells);
+
         const theory = props.liveModel.theory();
         return theory ? modelCellConstructors(theory) : [];
     };
@@ -54,6 +57,7 @@ export function ModelCellEditor(props: FormalCellEditorProps<ModelJudgment>) {
     const liveModel = useContext(LiveModelContext);
     invariant(liveModel, "Live model should be provided as context");
 
+    console.log(props);
     return (
         <Switch>
             <Match when={props.content.tag === "object" && liveModel().theory()}>
@@ -106,6 +110,7 @@ function modelCellConstructors(theory: Theory): CellConstructor<ModelJudgment>[]
             },
         });
     }
+
     for (const meta of theory.modelTypes ?? []) {
         constructors.push(modelCellConstructor(meta));
     }

packages/frontend/src/notebook/notebook_cell.tsx

@@ -108,6 +108,8 @@ export function NotebookCell(props: {
     tag?: string;
     currentDropTarget: string | null;
     setCurrentDropTarget: (cellId: string | null) => void;
+    isActive: boolean;
+    replaceCommands: Completion[];
 }) {
     let rootRef!: HTMLDivElement;
     let handleRef!: HTMLButtonElement;
@@ -248,13 +250,43 @@ export function NotebookCell(props: {
                     <div class="drop-indicator-with-dots" />
                 </Show>
             </div>
-            <Show when={props.tag}>
-                <div class="cell-tag">{props.tag}</div>
-            </Show>
+            <CellSwitcher tag={props.tag} completions={props.replaceCommands}></CellSwitcher>
         </div>
     );
 }
 
+export function CellSwitcher(props: { tag: string | undefined; completions: Completion[] }) {
+    const [isSwitchMenuOpen, setSwitchMenuOpen] = createSignal(false);
+    const openSwitchMenu = () => setSwitchMenuOpen(true);
+    const closeSwitchMenu = () => setSwitchMenuOpen(false);
+
+    return (
+        <Show when={props.tag}>
+            <Popover
+                open={isSwitchMenuOpen()}
+                onOpenChange={setSwitchMenuOpen}
+                floatingOptions={{
+                    autoPlacement: {
+                        allowedPlacements: ["left-start", "bottom-start", "top-start"],
+                    },
+                }}
+                trapFocus={false}
+            >
+                <Popover.Anchor as="span">
+                    <button type="button" class="plain" onClick={openSwitchMenu}>
+                        {props.tag}
+                    </button>
+                </Popover.Anchor>
+                <Popover.Portal>
+                    <Popover.Content class="popup">
+                        <Completions completions={props.completions} onComplete={closeSwitchMenu} />
+                    </Popover.Content>
+                </Popover.Portal>
+            </Popover>
+        </Show>
+    );
+}
+
 /** Editor for rich text cells, a simple wrapper around `RichTextEditor`.
  */
 export function RichTextCellEditor(

packages/frontend/src/notebook/notebook_editor.tsx

@@ -22,7 +22,7 @@ import {
     keyEventHasModifier,
     type ModifierKey,
 } from "catcolab-ui-components";
-import type { Cell, Notebook } from "catlog-wasm";
+import type { Cell, Notebook, MorType, ObType } from "catlog-wasm";
 import {
     type CellActions,
     type FormalCellEditorProps,
@@ -139,6 +139,33 @@ export function NotebookEditor<T>(props: {
         });
     };
 
+    const isFormalCell = (cell: Cell<T>): cell is { tag: "formal"; id: string; content: T } => {
+        return cell.tag === "formal";
+    };
+
+    const isObType = (content: any): content is { tag: "object"; obType: ObType } => {
+        return content && content.tag === "object";
+    };
+
+    const isMorType = (content: any): content is { tag: "morphism"; morType: MorType } => {
+        return content && content.tag === "morphism";
+    };
+
+    const retypeCellAs = (i: number, newCell: Cell<T>) => {
+	    if (!newCell || !isFormalCell(newCell)) return;
+        const mutator = (cellContent: T) => {
+            if (isObType(cellContent) && isObType(newCell.content)) {
+                cellContent.obType = newCell.content.obType;
+            } else if (isMorType(cellContent) && isMorType(newCell.content)) {
+                cellContent.morType = newCell.content.morType;
+            }
+        };
+        props.changeNotebook((nb) => {
+			NotebookUtils.retypeCell(nb, i, mutator);
+        });
+		setActiveCell(i);
+    };
+
     const cellConstructors = (): CellConstructor<T>[] => [
         {
             name: "Text",
@@ -160,6 +187,17 @@ export function NotebookEditor<T>(props: {
             };
         });
 
+    const retypeCommands = (i: number): Completion[] =>
+        cellConstructors().map((cc) => {
+            const { name, description, shortcut } = cc;
+            return {
+                name,
+                description,
+                shortcut,
+                onComplete: () => retypeCellAs(i, cc.construct()),
+            };
+        });
+
     makeEventListener(window, "keydown", (evt) => {
         if (props.noShortcuts) {
             return;
@@ -289,6 +327,19 @@ export function NotebookEditor<T>(props: {
                         const cell = props.notebook.cellContents[cellId];
                         invariant(cell, `Failed to find contents for cell '${cellId}'`);
 
+						// const tag = (cell.tag === "formal" ? props.cellLabel?.(cell.content) : undefined) as string;
+						const cellName = (cell: Cell<T>) =>
+                            (cell.tag === "formal"
+                                ? props.cellLabel?.(cell.content)
+                                : undefined) as string;
+						// const cellType = isFormalCell(cell)
+                            // ? isObType(cell.content)
+                                // ? "ObType"
+                                // : isMorType(cell.content)
+                                  // ? "MorType"
+                                  // : ""
+                            // : "";
+
                         if (cell.tag !== "rich-text") {
                             cellActions.duplicate = () => {
                                 const index = i();
@@ -310,12 +361,12 @@ export function NotebookEditor<T>(props: {
                                     index={i()}
                                     actions={cellActions}
                                     tag={
-                                        cell.tag === "formal"
-                                            ? props.cellLabel?.(cell.content)
-                                            : undefined
+                                       cellName(cell) 
                                     }
                                     currentDropTarget={currentDropTarget()}
                                     setCurrentDropTarget={setCurrentDropTarget}
+									isActive={isActive()}
+									replaceCommands={retypeCommands(i())}
                                 >
                                     <Switch>
                                         <Match when={cell.tag === "rich-text"}>

packages/frontend/src/notebook/types.ts

@@ -131,6 +131,11 @@ export namespace NotebookUtils {
         return notebook.cellOrder.some((cellId) => notebook.cellContents[cellId]?.tag === "formal");
     }
 
+    export function retypeCell<T>(notebook: Notebook<T>, index: number, mutator: (cellContent: T) => void) {
+        const cellId = getCellIdByIndex(notebook, index);
+        cellId && mutateCellContentById(notebook, cellId, mutator);
+    }
+
     export function numCells<T>(notebook: Notebook<T>): number {
         return notebook.cellOrder.length;
     }